peerjs icon indicating copy to clipboard operation
peerjs copied to clipboard

Peerjs not sending stream between Android and IOS WebRTC

Open amrkamal1993 opened this issue 3 years ago • 5 comments

I am trying to create a video conference web app using peer/getUserMedia. when I tried to make the connection stream sending/receiving both platform not working I want to make it so the other user can see/hear local user thats in the video session.

this is my code

let localVideo = document.getElementById("local-video")
let remoteVideo = document.getElementById("remote-video")
    
let peer
function init(userId) {
    var config = { 'iceServers': [{ 'urls': ['stun:stun.l.google.com:19302'] }] };
    peer = new Peer(userId, config)

    listen();
    return peer;
}

let localStream
function listen() {
    peer.on('call', (call) => {

        navigator.getUserMedia({
            audio: true, 
            video: true
        }, (stream) => {
            localVideo.srcObject = stream
            localStream = stream

            call.answer(stream)
            call.on('stream', (remoteStream) => {
                remoteVideo.srcObject = remoteStream

                remoteVideo.className = "primary-video"
                localVideo.className = "secondary-video"
            })
        })
    })
}

function startCall(otherUserId) {
    navigator.getUserMedia({
        audio: true,
        video: true
    }, (stream) => {

        localVideo.srcObject = stream
        localStream = stream

        const call = peer.call(otherUserId, stream)
        
        call.on('stream', (remoteStream) => {
            remoteVideo.srcObject = remoteStream

            remoteVideo.className = "primary-video"
            localVideo.className = "secondary-video"
        })

    })
}

<html>
    <body>
        <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
        <video class="secondary-video" autoplay id="remote-video"></video>
        <video class="primary-video" autoplay muted id="local-video"></video>

        <script src="./call.js"></script>

    </body>
</html>

any help ???

amrkamal1993 avatar May 24 '22 21:05 amrkamal1993

getUserMedia is deprecated and won’t work on most browsers.

jonasgloning avatar May 25 '22 11:05 jonasgloning

So what's the alternative ? Peerjs offical website uses getUserMedia

amrkamal1993 avatar May 25 '22 22:05 amrkamal1993

Oh, you’re right. Need to update the docs. navigator.mediaDevices.getUserMedia, I think.

Your code runs flawlessly on Safari, but fails in Firefox with an Exception that getUserMedia is undefined.

jonasgloning avatar May 25 '22 22:05 jonasgloning

I changed getUserMedia and still not working , no need for me to run in Firefox , I tested it for Android and IOS but it didn't work now

let peer
function init(userId) {
    var config = { 'iceServers': [{ 'urls': ['stun:stun.l.google.com:19302'] }] };
    peer = new Peer(userId, config)

    listen();
    return peer;
}

let localStream
function listen() {
    peer.on('call', (call) => {

        navigator.mediaDevices.getUserMedia({
            audio: true, 
            video: true
        }, (stream) => {
            localVideo.srcObject = stream
            localStream = stream

            call.answer(stream)
            call.on('stream', (remoteStream) => {
                remoteVideo.srcObject = remoteStream

                remoteVideo.className = "primary-video"
                localVideo.className = "secondary-video"
            })
        })
    })
}

function startCall(otherUserId) {
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }, (stream) => {

        localVideo.srcObject = stream
        localStream = stream

        const call = peer.call(otherUserId, stream)
        call.on('stream', (remoteStream) => {
            remoteVideo.srcObject = remoteStream

            remoteVideo.className = "primary-video"
            localVideo.className = "secondary-video"
        })

    })
}

amrkamal1993 avatar May 25 '22 22:05 amrkamal1993

worked perfect in ios

let localVideo = document.getElementById("local-video") let remoteVideo = document.getElementById("remote-video") var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

localVideo.style.opacity = 0 remoteVideo.style.opacity = 0

localVideo.onplaying = () => { localVideo.style.opacity = 1 } remoteVideo.onplaying = () => { remoteVideo.style.opacity = 1 }

let peer function init() {

// peer = new Peer(userId, { // host: '192.168.0.102', // port: 9000, // path: '/videocallapp' peer = new Peer(undefined, { host: 'yourhost', port: 443, secure:true // path: '/videocallapp'

})


peer.on('open', (peerId) => {

    webkit.messageHandlers.bridge.postMessage(peerId)
   
    peer.on('call', (call) => {
        
        getUserMedia({
            audio: true,
            video: true
        }, (stream) => {
            localVideo.srcObject = stream
            localStream = stream
          
            call.answer(stream)
            call.on('stream', (remoteStream) => {
               
                remoteVideo.srcObject = remoteStream

                remoteVideo.className = "primary-video"
            
                remoteVideo.playsInline = true;
                localVideo.className = "secondary-video"
                localVideo.playsInline = true;

            })

        })
        
    })
})

}

let localStream

function initForStartCall(otherUserId, audio, video) { peer = new Peer(undefined, { host: 'mypeerjs3002.herokuapp.com', port: 443, secure:true

})
peer.on('open', (peerId) => {
 
    getUserMedia({audio: true,
        video: true}, (stream) => {

    localVideo.srcObject = stream
    localStream = stream
    localVideo.className = "secondary-video"
    localVideo.playsInline = true;
    const call = peer.call(otherUserId, stream)
    call.on('stream', (remoteStream) => {
        
        remoteVideo.srcObject = remoteStream
        remoteVideo.className = "primary-video"
        remoteVideo.playsInline = true;
    })

})
})

}

MostafaALZOUBI1994 avatar Jun 06 '22 15:06 MostafaALZOUBI1994