All geek questions in one place

I can not receive the remote video stream

I use google chrome 21.x on linux, webrtc peer connection is established, but I can’t get the remote video stream, the callback passed to peerconnection ".onaddstream" is never called, can any authority tell me where I need to look?

I paste all my code, still can not get the remote video stream, and there are no errors.

var peerConnCreated = false; var peerConn = null; var cameraOn = false; var clientId = 0; var svcName = ""; var clientIdRecvd = false; var myname = ""; var hisname = ""; var myJsep; var hisJsep; var mySdp; var hisSdp; function login() { var loginid = document.getElementById("login").value; var jsonText = {"clientid":clientId, "service":"rtc", "mtype": "online", "username": loginid}; myname = loginid; socket.send(JSON.stringify(jsonText)); } function iceCallback(canditate, moreToFollow) { if(canditate) { console.log("ice canditate"); var jsonText = {"clientid":clientId, "service":"rtc", "mtype": "canditate", "sndr": myname, "rcpt": hisname, "label": canditate.label, "cand": canditate.toSdp()}; socket.send(JSON.stringify(jsonText)); } } function onSessionConnecting(message) { console.log("session connecting ..."); } function onRemoteStreamRemoved(event) { console.log("remote stream removed"); remotevid.src = ""; } function onSessionOpened(message) { console.log("session opened"); } function onRemoteStreamAdded(event) { console.log("remote stream added"); remotevid.src = window.webkitURL.createObjectURL(event.stream); remotevid.style.opacity = 1; } function createPeerConnection() { if (peerConnCreated) return; peerConn = new webkitPeerConnection00("STUN stun.l.google.com:19302", iceCallback); peerConn.onconnecting = onSessionConnecting; peerConn.onopen = onSessionOpened; peerConn.onaddstream = onRemoteStreamAdded; peerConn.onremovestream = onRemoteStreamRemoved; console.log("peer connection created"); peerConnCreated = true; } function turnOnCameraAndMic() { navigator.webkitGetUserMedia({video:true, audio:true}, successCallback, errorCallback); function successCallback(stream) { sourcevid.style.opacity = 1; sourcevid.src = window.webkitURL.createObjectURL(stream); peerConn.addStream(stream); console.log("local stream added"); } function errorCallback(error) { console.error('An error occurred: [CODE ' + error.code + ']'); } cameraOn = true; } function dialUser(user) { if (!peerConnCreated) createPeerConnection(); hisname = user; var localOffer = peerConn.createOffer({has_audio:true, has_video:true}); peerConn.setLocalDescription(peerConn.SDP_OFFER, localOffer); mySdp = peerConn.localDescription; myJsep = mySdp.toSdp(); var call = {"clientid":clientId, "service":"rtc", "mtype": "call", "sndr": myname, "rcpt": hisname, "jsepdata": myJsep}; socket.send(JSON.stringify(call)); console.log("sent offer"); //console.log(myJsep); peerConn.startIce(); console.log("ice started "); } //handle the message from the sip server //There is a new connection from our peer so turn on the camera //and relay the stream to peer. function handleRtcMessage(request) { var sessionRequest = eval('(' + request + ')'); switch(sessionRequest.mtype) { case 'online': console.log("new user online"); var newuser = sessionRequest.username; var li = document.createElement("li"); var name = document.createTextNode(newuser); li.appendChild(name); li.onclick = function() { dialUser(newuser); }; document.getElementById("Contact List").appendChild(li); break; case 'call': console.log("recvng call"); alert("Incoming call ..."); if (!peerConnCreated) createPeerConnection(); peerConn.setRemoteDescription(peerConn.SDP_OFFER, new SessionDescription(sessionRequest.jsepdata)); hisname = sessionRequest.sndr; var remoteOffer = peerConn.remoteDescription; //console.log("remoteOffer" + remoteOffer.toSdp()); var localAnswer = peerConn.createAnswer(remoteOffer.toSdp(), {has_audio:true, has_video:true}); peerConn.setLocalDescription(peerConn.SDP_ANSWER, localAnswer); var jsonText = {"clientid":clientId,"service":"rtc", "mtype": "pickup", "sndr" :myname, "rcpt": hisname, "jsepdata": localAnswer.toSdp()}; socket.send(JSON.stringify(jsonText)); console.log("sent answer"); //console.log(localAnswer.toSdp()); peerConn.startIce(); if (!cameraOn) turnOnCameraAndMic(); break; case 'pickup': console.log("recvd pickup"); peerConn.setRemoteDescription(peerConn.SDP_ANSWER, new SessionDescription(sessionRequest.jsepdata)); hisname = sessionRequest.sndr; if (!cameraOn) turnOnCameraAndMic(); break; case 'canditate': console.log("recvd canditate"); var canditate = new IceCandidate(sessionRequest.label, sessionRequest.cand); peerConn.processIceMessage(canditate); break; case 'bye': console.log("recvd bye"); break; } } //open the websocket to the antkorp webserver var socket = new WebSocket('ws://bldsvrub:9981'); var sourcevid = null; var remotevid = null; socket.onopen = function () { console.log("websocket opened"); sourcevid = document.getElementById("sourcevid"); remotevid = document.getElementById("remotevid"); }; socket.onmessage = function (event) { if (!clientIdRecvd) { var reqObj = eval('(' + event.data + ')'); clientId = reqObj.clientid; svcName = reqObj.service; clientIdRecvd = true; } else { //hookup the new handler to process session requests handleRtcMessage(event.data); } }; socket.onclose = function (event) { socket = null; };
+6
source share
4 answers

the above code contains a small error, the stream must be added to the peer connection before generating a response or sentence, that is, addStream should be called before calling setlocalDescription or setRemoteDescription.

+9
source

Many WebRTC demos:

eg. individual audio / video / screen calls WebRTC:

Note:

This question is TOOO-Old. That is why I do not think that I should add a code snippet of the working fragment. The above link answers all questions.

However, if you are a NEW-WebRTC user and encounter similar issues, here are some suggestions:

  • Before creating peers, make sure both partners are ready for a handshake.
  • Ready-made tools, both peers have access to media streams (audio and / or video).
  • The first peer must initiate an RTCPeerConnection object, call addStream, and create offer descriptions.
  • The second peer must receive OFFER-SDP from the first peer.
  • The second peer must initiate the RTCPeerConnection object, call addStream and setRemoteDescription before creating the ANSWER description.
  • The second peer should create ANSWER-SDP.
  • The first peer should receive ANSWER-SDP and set up Remote-Descriptions.
  • ICE candidate parties should be exchanged in parallel with the process described above.

Here you can find several guides:

Remember

This answer targets WebRTC-1.0. It does not respond to WebRTC-1.1 (ORTC) or newer.

+4
source

onaddstream must be called upon receipt of a response that contains at least one stream. If you are not receiving a callback, be sure to call and create setLocal and setRemoteDescription.

+3
source

I found that in my case I can’t receive the video if I don’t respond to another video.

I tricked myself with a fake video stream:

  let w = 640; let h = 480; let canvas: any = Object.assign(document.createElement("canvas"), { w, h }); canvas.getContext('2d').fillRect(0, 0, w, h); let blackStream = canvas.captureStream(); outgoingStream.addTrack(blackStream.getVideoTracks()[0]);
0
source

Source: https://habr.com/ru/post/922035/

More articles:


All Articles