Assigning video stream sent by sender using socket to reciever's video tag in WebRTC gives error

Question

I am trying to implement WebRTC. As of now, I am able to send video stream using socket.

//This is called when any client connects to the server.
wsServer.on('request', function(request) {
var connection = request.accept(null, request.origin);
clients.push(connection);

//All the messages are handled here
connection.on('message', function(message) {
    if (message.type === 'utf8') {
        // Display the received message
        console.log(' Received utf8 Message ' + message.utf8Data);

        //Broadcast to all the users connected.
        clients.forEach(function (outputConnection) {
            if (outputConnection != connection) {
                outputConnection.send(message.utf8Data, sendCallback);
            }
        });
    }
});

connection.on('close', function(connection) {
    // close user connection
    console.log((new Date()) + " Peer disconnected.");        
});
});

But, I am missing something which prevents me to see that video stream at receiver's video side using following code:

// accept connection request
socket.addEventListener("message", onMessage, false);
  function onMessage(evt) {
    var remotevid = document.getElementById('remotevideo');
    console.log("RECEIVED: ", evt.data);
    if (!started) {
      createPeerConnection();
      window.RTCPeerConnection.addStream(localStream);
      started = true;
    } else {
        //Mostly control comes here
        remotevid.src = evt.data;
        remotevid.play();
    }
}

I would like to hear what is being missed by me exactly. Some help would be really appreciable. Thanks in advance !

Answer 1

You shouldn't assign the data received to the src attribute of the VIDEO tag (I suspect #remotevideo is a VIDEO tag). Instead check RTCPeerConnection.onaddstream and there you should create an URL from the stream and assign it to the src attribute of the VIDEO tag.