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:
- Display a person’s videos on a TV via a set-top box or display their videos in a digital photo frame.
- Provide people with the ability to edit or create new video content using existing videos.
- Provide people with the ability to display their video with owners within their app, like in dating or social apps.
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.
https://facebook.com
as the address.
http://localhost:9222 (or whatever port you put in)
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;
}
// 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");
--remote-debugging-port=9222
at the end of the Target. It doesn’t have to be port 9222.obs --remote-debugging-port=9222 (or whatever port you like)
Head over to this website's GitHub repository and open an Issue.
Or just comment in the YouTube video.