PeerJS video stream not working when using iPhone - iOS to Android or iOS to iOS - Node.js

Viewed 590

I have been testing this program on my Mac Laptop and it has been working fine. It would show the video from MacOS to Samsung OneUI Android, and that worked. The problem is that when I use iOS (I tried from the iPhone SE 2) and connected it to my Samsung phone (Android), it would connect, but the video did not show. The space was filled for the video (meaning the connection was there), but there was no contents of the video. It WILL show its own video contents (just the iPhone SE camera contents to itself), just not the peers video, but I know I am receiving the connection (due to socket.io and PeerJS getting to the point of trying to create the video). PS: I even tried logging 'User Connected' to the console to see if they were connecting, and they were.

I have tried putting the following:

video.playsInline = true;

Or this:

video. setAttribute('autoplay', '');
video. setAttribute('muted', '');
video. setAttribute('playsinline', '');

But it still did not work.

Do any of you know how to fix this issue?

Full Code (Client):

const socket = io('/');

const videos = document.getElementById('videos');
const myVideo = document.createElement('video');
let alreadyDoneUsers = {};
let myUserId = null;

const myPeer = new Peer(undefined, {
    host: '/',
    port: '8090'
});

myVideo.playsInline = true;
myVideo.muted = true;
var getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia;

getUserMedia({
    video: true,
    audio: true
})
.then((stream) => {
    addVideo(myVideo, stream); 
    
    myPeer.on('call', (call) => {
        call.answer(stream);
        const video = document.createElement('video');
        video.playsInline = true;
        call.on('stream', (peerStream) => {
            addVideo(video, peerStream); 
        });
        socket.on('user-disconnected', (userIdDisconnected) => {
            if (call.peer == userIdDisconnected || call.peer == myUserId) {
                video.remove();
            }
        })
    })
    socket.on('user-connected', (userId) => {
        console.log('User Connected');
        const call = myPeer.call(userId, stream);
        const video = document.createElement('video');
        video.playsInline = true;
        call.on('stream', (peerStream) => {
            addVideo(video, peerStream); 
        });
        socket.emit('user-id-send', myUserId);
        socket.on('user-disconnected', (userIdDisconnected) => {
            if (userId == userIdDisconnected) {
                video.remove();
                call.close();
            }
        })
    });
});

myPeer.on('open', (id) => {
    myUserId = id;
    socket.emit('joined', ROOM_ID, id); 
});

function addVideo(video, stream) {
    video.srcObject = stream;
    video.addEventListener('loadedmetadata', () => {
        video.play(); 
    });
    videos.append(video);
}
0 Answers
Related