Video chat don't show remote video

Jayme neto

unread,

Feb 22, 2019, 2:03:22 PM2/22/19

to discuss-webrtc

Hi guys,

I'm using WebRTC to make a Video chat. It was working fine but I don't know why I'm not seeing the received video on the screen anymore. Could any one help me? I'm using a AWS server.

This is my code:

 if (room !== '') {
      socket.emit('create or join', room);
      console.log('Criando ou acessando quarto ', room);
    } else{
      prompt("Digite o nome do paciente")
    }

    socket.on('created', room => isInitiator = true );
    socket.on('full', room => console.log('Esta sala esta cheia'))
    socket.on('join', room => {
      console.log('Outro ponto também acessou esse quarto')
      CanalPronto = true
    })
    socket.on('joined', room => { CanalPronto = true })
    socket.on('log', array => console.log.apply(console, array))

    function sendMessage(message) {
      socket.emit('message', message);
    }


    socket.on('message', message => {
      try{
        console.log('Client received message:', message);
        if (message === 'got user media') {
          maybeStart();
        } else if (message.type === 'offer') {
          if (!isInitiator && !isStarted) {
            maybeStart();
          }
          pc.setRemoteDescription(new RTCSessionDescription(message))
          doAnswer();
        } else if (message.type === 'answer' && isStarted) {
          pc.setRemoteDescription(new RTCSessionDescription(message));
        } else if (message.type === 'candidate' && isStarted) {
          var candidate = new RTCIceCandidate({ sdpMLineIndex: message.label, candidate: message.candidate });
          pc.addIceCandidate(candidate);
        } else if (message === 'bye' && isStarted) {
          handleRemoteHangup();
        }
      } catch (e){
        console.log("O erro foi: ", e)
      }
      
    });

    function gotStream(stream) {
      console.log('Adding local stream.');
      localStream = stream;
      localVideo.srcObject = stream;
      sendMessage('got user media');
      if (isInitiator) {
        maybeStart();
      }
    }

    function maybeStart() {
      // console.log('>>>>>>> maybeStart() ', isStarted, localStream, CanalPronto);
      if (!isStarted && typeof localStream !== 'undefined' && CanalPronto) {
        // console.log('>>>>>> creating peer connection');
        createPeerConnection();
        pc.addStream(localStream);
        isStarted = true;
        // console.log('isInitiator', isInitiator);
        if (isInitiator) {
          // console.log("This is the initiator")
          doCall();
        }
      }
    }

    window.onbeforeunload = function() {
      sendMessage('bye');
    };

    function createPeerConnection() {
      try {
        pc = new RTCPeerConnection(null);
        pc.onicecandidate = handleIceCandidate;
        pc.onaddstream = handleRemoteStreamAdded;
        pc.onremovestream = handleRemoteStreamRemoved;
        // console.log('Criado RTCPeerConnnection');
      } catch (e) {
        console.log('Failed to create PeerConnection, exception: ' + e.message);
        alert('Cannot create RTCPeerConnection object.');
        return;
      }
    }

    function handleIceCandidate(event) {
      console.log('icecandidate event: ', event);
      if (event.candidate) {
        // console.log("Enviando ICE Candidate")
        sendMessage({ type: 'candidate', label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate });
      } else {console.log('End of candidates.');}
    }

    function doCall() {
      // console.log('Enviando oferta para o destino');
      pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
    }

    function doAnswer() {
      // console.log('Enviando resposta para o peer.')
      pc.createAnswer().then(setLocalAndSendMessage, onCreateSessionDescriptionError)
    }

    function setLocalAndSendMessage(sessionDescription) {
      pc.setLocalDescription(sessionDescription);
      // console.log('função setLocalAndSendMessage criando mensagem', sessionDescription);
      sendMessage(sessionDescription);
    }

    function onCreateSessionDescriptionError(error) {
      console.trace('Failed to create session description: ' + error.toString());
    }

    function handleCreateOfferError(event) {
      console.log('createOffer() error: ', event);
    }

    function handleRemoteStreamAdded(event) {
      try{
        remoteVideo.srcObject = event.stream}
      catch (e){
        console.log("O erro foi em handleRemoteStreamAdded: ", e)
      }
    }

    function handleRemoteStreamRemoved(event) {
      console.log('Remote stream removed. Event: ', event);
    }

ad...@norvi.net

unread,

Feb 23, 2019, 9:14:05 AM2/23/19

to discuss-webrtc

How many year ago was it when it last worked? Seems to be based upon the old addstream api, which isn't standards compliant anymore.

You should be listening for ontrack instead of onaddstream/onremovestream. I think in chrome this still works, just not other browsers, but you're probably just not telling the video to play.

I have mine setup like this.

videoEl.setAttribute("autoplay", true);
videoEl.setAttribute("playsinline", true);
videoEl.setAttribute("controls", true);
videoEl.setAttribute("muted", true);
setTimeout(() => {
  videoEl.removeAttribute("controls");
});
videoEl.onloadedmetadata = e => {
  console.log("Loaded metadata for video");
  var playPromise = videoEl.play();
  if (playPromise !== undefined) {
    playPromise.then(() => {
      console.log("Video playing");
    }).catch(error => {
      console.log("Video unable to play, error: " + error);
    });
  }
};

You also have a bunch of lines with no semi-colon at the end, not sure if that going to help.

Jayme neto

unread,

Feb 25, 2019, 9:48:58 AM2/25/19

to discuss-webrtc

Hi, it was working since last week. That is weird because I got tis code example 5 on this link https://codelabs.developers.google.com/codelabs/webrtc-web/#2 which I got on the WebRTC site.

Jayme neto

unread,

Feb 25, 2019, 12:54:42 PM2/25/19

to discuss-webrtc

I tryed to add this block of code on my createPeerConnection function:

pc.ontrack = pc.ontrack = function(event) {
      document.getElementById("remoteVideo").srcObject = event.streams[0];

but still not workin

Reply all

Reply to author

Forward