javascriptpeerjs

Cannot set properties 'srcObject' of undefined - Peer.js


I am trying to develop a video chatroulette platform, I am using Peer js and AJAX, PHP and MYSQL to manage the backend part, that is the sessions.

So when I click on 'chat now' I will be redirected to video.php, the following AJAX code will be executed:

 function searchSession(){
        $.ajax({
        type:"post",
        url:"php/enterInVideoSession.php",
        data: 
        {  
           
        },
        cache:false,
        success: function (html) 
        {
            console.log(html)
            var json = JSON.parse(html);
            if(json.event == 'make'){
                
                createRoom(json.sessionId)
            }else if(json.event == 'join'){
                
                joinRoom(json.sessionId)
            }
        }
    });
    return false;
 }

So if no session was found, the function will return 'make', so we will make a new session with the session id returned by the ajax call:

function createRoom(room) {


 navigator.mediaDevices.getUserMedia({video: true, audio: true}).then( stream => {
        window.localStream = stream; 
        window.localAudio.srcObject = stream; 
        window.localAudio.autoplay = true; 
    }).catch( err => {
        console.log("u got an error:" + err)
    });
    
    
    console.log("Creating Room")
    
    room_id = PRE + room + SUF;
    peer = new Peer(room_id)
    peer.on('open', (id) => {
        console.log("Peer Connected with ID: ", id)
        navigator.getUserMedia({ video: true, audio: true }, (stream) => {
            local_stream = stream;
            setLocalStream(local_stream)
        }, (err) => {
            console.log(err)
        })
        notify("Waiting for peer to join.")
    })
    peer.on('call', (call) => {
        call.answer(local_stream);
        call.on('stream', (stream) => {
            setRemoteStream(stream)
        })
        currentPeer = call;
    })
}

Otherwise if we have 'join' we will have to join a room already created and therefore sessionId will be the ID of the room we will have to join, so we will go to join the room by running this function:

function joinRoom(room) {
    console.log("Joining Room")
    room_id = PRE + room + SUF;
    peer = new Peer()
    peer.on('open', (id) => {
        console.log("Connected with Id: " + id)
        navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) => {
            local_stream = stream;
            setLocalStream(local_stream)
            notify("Joining peer")
            let call = peer.call(room_id, stream)
            call.on('stream', (stream) => {
                setRemoteStream(stream);
            })
            currentPeer = call;
        }, (err) => {
            console.log(err)
        })

    })
}

The error I'm getting is in the session creation function.

TypeError: Cannot set properties of undefined (setting 'srcObject')

so the problem lies in this piece of code: navigator.mediaDevices.getUserMedia: navigator.mediaDevices.getUserMedia.....

When a user joins he will not share neither the audio nor the video with the other user, you will only be able to see your own video

Is there a way to solve this problem?

this is the url project: https://randoot.com


Solution

  • The error is that can't set "whatever" on undefined. This is this line of code: window.localAudio.srcObject = stream; and it means localAudio is undefined. what is it supposed to be?

    Try first

    var element = document.createElement('audio');  
    document.body.appendChild(element)           
    window.localAudio = element;