javascript – Can’t See Video received from other users/tabs in Peer js and WebRTC Video Chat App
So I was Building a Video chat Website using Peer Js and I am able to see my own video but when loggin in from another tab I can’t see the other user’s video stream…
Here is my code. Thanks in advance.
Here’s the client side code…
const socket = io();
const myPeer = new Peer(userID, {
host: "/",
port: 3001,
});
myPeer.on("open", (id) => {
socket.emit("join-room", roomID, userID);
});
// Video wala part
const videoGrid = document.querySelector(".videoGrid");
const myVideo = document.createElement("video");
myVideo.muted = true;
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
addVideoStream(myVideo, stream);
myPeer.on("call", (call) => {
call.answer(stream);
const userVideo = document.createElement("video");
call.on("stream", (userVideoStream) => {
console.log("User Video: ", userVideoStream);
addVideoStream(userVideo, userVideoStream);
});
});
socket.on("user-connected", (userID) => {
console.log("user Connected", userID);
connectToNewUser(userID, stream);
});
});
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream);
const video = document.createElement("video");
call.on("stream", (userVideoStream) => {
console.log("User Video: ", userVideoStream);
addVideoStream(video, userVideoStream);
});
call.on("close", () => {
video.remove();
});
}
function addVideoStream(video, stream) {
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
videoGrid.append(video);
}
Here’s the server side…
io.on("connection", (socket) => {
socket.on("join-room", (roomId, userId) => {
socket.join(roomId);
socket.broadcast.to(roomId).emit("user-connected", userId);
});
});
I was following this tutorial: youtu.be/DvlyzDZDEq4
Read more here: Source link
