OBS Personal Facebook Live Comments

This is for Facebook users who do not want to create a Facebook Page and share their stream publicly just to show their comments feed on their stream.

Use this at your own Risk.

I attempted making a proper app that allows people to login using their Facebook account and simply copying a link to their Browser Source (see more here) similar to TidyLabs if you are DLive user, but unfortunately Facebook did not approve the app.

The app requires approval from Facebook so it can access your Live Streams but according to the allowed usages:

user_videos

Requires App Review

The user_videos permission allows your app to read a list of videos uploaded by a user.

Allowed Usage:

Hence, the disapproval. If I have to point it out to you, what we want is not part of the Allowed Usage.

BUT, “Where there is a will, there is a way”, so here you go.

Instructions (Updated Sep 22, 2021; Only one step code needed)

  1. Open up OBS with remote debugging. See how to.
  2. Add a Browser Source.
    If this is your first time, put https://facebook.com as the address.
  3. Visit OBS’s browser on your browser by going to http://localhost:9222 (or whatever port you put in).
  4. Click the link to that corresponds to the Browser Source you added.
    Each Browser Source in OBS will show up as a link in here.
  5. If this was your first time, Log In to Facebook because later on we will need to go to your stream's direct link.
  6. Copy the CSS code and paste it in the CSS textboxt of OBS Browser Source dialog box.
  7. Start your stream. Both in OBS and Facebook.
  8. Copy the direct link to your stream by Right-clicking on the "Just Now" under your name, and selecting "Copy link address".
  9. Visit your Stream in OBS Browser by either pasting it in OBS Browser's address bar i.e in http://localhost:9222 (or whatever port you put in)
  10. Click the Network tab and filter by "WS" (which means WebSocket).
  11. If you did not see anything in there, just refresh the OBS Browser. There's a refresh button in there.
  12. Click the "Initiator" on the one that contains "realtime" so we can see the code that creates the realtime connection Facebook uses.
  13. Add a breakpoint to the line. If you want to confirm, it has the "new WebSocket" somewhere in that line. This will stop the code execution so we can execute the code we need first.
  14. Refresh OBS Browser again.
  15. Paste the Code and press Enter..
  16. Remove the breakpoint by clicking on the line again.
    It should remove the "blue tick".
    Continue the code execution so the webpage works.
    Go to "Sources" tab and click the blue play button.
  17. Done. Enjoy.

The Codes

CSS Code

You can customize this if you know CSS.

html {
  font-size: 16px;
}

body {
  height: 100vh;
}

#obs-fb-live-comments {
  list-style-type: none;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 100%;

  margin: 16px;
  overflow: hidden;
}

.message + .message {
  margin-top: 8px;
}

.message {
  border-radius: 12px;
  padding: 12px;
  background: #424242;
  color: #eee;
}

.message__author {
  font-weight: 600;
}

.message__body {
  font-size: 18px;
}

JS Code

// Create our chat container
const ID = "obs-fb-live-comments";
const containerElement = document.createElement("div");
containerElement.id = ID;

function createCommentElement({ author, message }) {
  const commentEl = document.createElement("div");
  commentEl.classList.add("message");

  const authorEl = document.createElement("div");
  authorEl.classList.add("message__author");
  authorEl.textContent = author;

  const bodyEl = document.createElement("div");
  bodyEl.classList.add("message__body");
  bodyEl.textContent = message;

  commentEl.appendChild(authorEl);
  commentEl.appendChild(bodyEl);

  return commentEl;
}

function websocketHandler(evt) {
  const decoder = new TextDecoder("utf-8");
  const rootJson = decoder.decode(evt.data);

  // The message seems to contain a "topic" name at the start and end of the data.
  // I think it is MQTT stuff and I do not know how to work with it
  // especially in the browser AND without loading external scripts.
  const startOfJson = rootJson.indexOf("{");
  const endOfJson = rootJson.lastIndexOf("}");
  const normalizedJson = rootJson.slice(startOfJson, endOfJson + 1);

  try {
    const parsedJson = JSON.parse(normalizedJson);
    const comment = (((parsedJson || {}).data || {}).live_video_comment_create_subscribe || {}).comment;

    // The message received does not contain a comment.
    // Could be for other stuff that we don't need.
    if (!comment) {
      return;
    }

    console.log("Has a comment.", comment);

    // Insert comment element to the container
    containerElement.appendChild(
      createCommentElement({
        author: comment.author.name,
        message: comment.body.text,
      })
    );

    // Scroll to the last comment
    document.body.scrollTop = document.body.scrollHeight;
  } catch (e) {
    // not the data we want and just dont crash at all whatever happens.
  }
}

// Copy the original WebSocket function
// because we are going to override it.
const NativeWebSocket = window.WebSocket;

// Override original WebSocket so we can
// have a reference to the instance FB will use.
// Can't find a way to make a connection to them manually.
window.WebSocket = function (...args) {
  const instance = new NativeWebSocket(...args);

  // Listen for new comments and do stuff.
  instance.addEventListener("message", websocketHandler);

  return instance;
};

// Remove all elements in the page.
Array.prototype.forEach.call(document.body.children, function (el) {
  document.body.removeChild(el);
});

// Put our container to the page.
document.body.appendChild(containerElement);

// Make the webpage transparent and hide scrollbar
// so we can use it as overlay in OBS.
document.documentElement.style.setProperty("overflow", "hidden", "important");
document.body.style.setProperty("overflow", "hidden", "important");
document.body.style.setProperty("background", "rgba(0,0,0,0)", "important");

How To Start OBS With Remote Debugging

Windows

Linux

obs --remote-debugging-port=9222 (or whatever port you like)

Issues or Suggestions

Head over to this website's GitHub repository and open an Issue.
Or just comment in the YouTube video.