1

I'm trying to set a basic video chat example. Currently trying to chat between two chrome tabs on the same computer.
Everything looks good until I get the remote video stream, and when I put it in the remoteVideo element using URL.createObjectURI I just get blank nothing. No video showing although I got the remote stream event.

What can cause this? Any ideas? Please help!

Here is the log of the signalling:

caller:

 Got userMedia Registered signaling room BY_WebRTC.startSession HOQfXIe3uoLMtDgSlHVH+A== true VM9840:128 tryStart: created peer connection. VM9840:150 Created RTCPeerConnnection VM9840:133 tryStart: added stream to peer connection. VM9840:170 Sending offer to peer VM9840:184 sending sdp RTCSessionDescription {type: "offer", sdp: "v=0 ↵o=- 3416476007859143551 2 IN IP4 127.0.0.1 ↵s…9521 label:a8a8592f-d78d-40b2-bc1c-1a7c33772201 ↵"} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 2 udp 2122260222 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 2 udp 2122194686 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 2 udp 2122260222 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 2 udp 2122194686 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 2 tcp 1518280446 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 2 tcp 1518214910 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 2 tcp 1518280446 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1} VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 2 tcp 1518214910 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1} VM9840:110 Received answer VM9840:207 Remote stream added. MediaStreamEvent {stream: MediaStream, type: "addstream", target: RTCPeerConnection, currentTarget: RTCPeerConnection, eventPhase: 2…} VM9840:191 handleIceCandidate event: null VM9840:202 End of candidates.

callee:

Got User Media Registered signaling room Received offer webrtc.js?v=2.22:128 tryStart: created peer connection. webrtc.js?v=2.22:150 Created RTCPeerConnnection webrtc.js?v=2.22:133 tryStart: added stream to peer connection. webrtc.js?v=2.22:175 Sending answer to peer. webrtc.js?v=2.22:207 Remote stream added. MediaStreamEvent {stream: MediaStream, type: "addstream", target: RTCPeerConnection, currentTarget: RTCPeerConnection, eventPhase: 2…} webrtc.js?v=2.22:184 sending sdp RTCSessionDescription {type: "answer", sdp: "v=0 ↵o=- 1405083852183288173 2 IN IP4 127.0.0.1 ↵s…5319 label:9a0427e6-be00-4a66-a862-77c1deafb89d ↵"} webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 2", sdpMid: "audio", sdpMLineIndex: 0} webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 1", sdpMid: "audio", sdpMLineIndex: 0} webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 2", sdpMid: "audio", sdpMLineIndex: 0} webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 1", sdpMid: "audio", sdpMLineIndex: 0} webrtc.js?v=2.22:191 handleIceCandidate event: null webrtc.js?v=2.22:202 End of candidates.

code (starts at startSession with isInitiator=true for caller - after got local media):

var BY_WebRTC = { // consts pc_config: { 'iceServers': [ { url: 'stun:stun1.l.google.com:19302' }] }, pc_constraints: { 'optional': [{ 'DtlsSrtpKeyAgreement': true }] }, sdpConstraints: { 'mandatory': { // Set up audio and video regardless of what devices are present. 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } }, localStream: null, remoteStream: null, isStarted: false, isInitiator: false, realtimeEventId: null, // current conversation object realtime server room id pc: null, // peer connection getUserMedia: function (video, audio, callback) { var constraints = { video: video, audio: audio }; navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { BY_WebRTC.localStream = stream; callback(stream); }).catch(function (error) { console.log("BY_WebRTC:getUserMedia Error!", error); }); }, startSession: function (encryptedObjectId, isInitiator) { // store the realtime event id BY_WebRTC.realtimeEventId = { groupType: 'object', groupId: encryptedObjectId, eventType: "webrtc" }; BY_WebRTC.encryptedObjectId = encryptedObjectId; // register chat room for webrtc signaling nowManager.registerGroupEvents([BY_WebRTC.realtimeEventId], BY_WebRTC.realtimeWebRTC_EventHandler); console.log("BY_WebRTC.startSession", encryptedObjectId, isInitiator); if (isInitiator) { BY_WebRTC.isInitiator = true; BY_WebRTC.tryStart(); } }, realtimeWebRTC_EventHandler: function (message) { if (message === 'start') { BY_WebRTC.tryStart(); } else if (message.type === 'offer') { console.log('Received offer'); if (!BY_WebRTC.isInitiator && !BY_WebRTC.isStarted) { BY_WebRTC.tryStart(); } BY_WebRTC.pc.setRemoteDescription(new RTCSessionDescription(message)); BY_WebRTC.sendAnswer(); } else if (message.type === 'answer' && isStarted) { console.log('Received answer'); BY_WebRTC.pc.setRemoteDescription(new RTCSessionDescription(message)); } else if (message.type === 'candidate' && BY_WebRTC.isStarted) { var candidate = new RTCIceCandidate({ sdpMLineIndex: message.label, candidate: message.candidate }); BY_WebRTC.pc.addIceCandidate(candidate); } else if (message === 'bye' && BY_WebRTC.isStarted) { BY_WebRTC.handleRemoteHangup(); } }, tryStart: function () { if (!BY_WebRTC.isStarted && typeof BY_WebRTC.localStream != null) { console.log("tryStart: created peer connection."); BY_WebRTC.createPeerConnection(); BY_WebRTC.pc.addStream(BY_WebRTC.localStream); console.log("tryStart: added stream to peer connection."); isStarted = true; if (BY_WebRTC.isInitiator) { BY_WebRTC.sendOffer(); } } }, createPeerConnection: function () { try { var pc = new RTCPeerConnection(this.pc_config); pc.onicecandidate = this.handleIceCandidate; pc.onaddstream = this.handleRemoteStreamAdded; pc.onremovestream = this.handleRemoteStreamRemoved; console.log('Created RTCPeerConnnection'); BY_WebRTC.pc = pc; } catch (e) { console.log('Failed to create PeerConnection, exception: ' + e.message); alert('Cannot create RTCPeerConnection object.'); return; } }, handleCreateOfferError: function (event) { console.log('sendOffer() error: ', e); }, handleSendAnswerError: function (event) { console.log('sendAnswer() error: ', e); }, sendOffer: function () { console.log('Sending offer to peer'); BY_WebRTC.pc.createOffer(BY_WebRTC.setLocalAndSendMessage, BY_WebRTC.handleCreateOfferError); }, sendAnswer: function () { console.log('Sending answer to peer.'); BY_WebRTC.pc.createAnswer(BY_WebRTC.setLocalAndSendMessage, BY_WebRTC.handleSendAnswerError, BY_WebRTC.sdpConstraints); }, setLocalAndSendMessage: function (sessionDescription) { // Set Opus as the preferred codec in SDP if Opus is present. sessionDescription.sdp = BY_WebRTC.preferOpus(sessionDescription.sdp); BY_WebRTC.pc.setLocalDescription(sessionDescription); console.log("sending sdp", sessionDescription); nowManager.sendGroupEvent(BY_WebRTC.realtimeEventId, sessionDescription); }, handleIceCandidate: function (event) { console.log('handleIceCandidate event: ', event.candidate); if (event.candidate) { nowManager.sendGroupEvent(BY_WebRTC.realtimeEventId, { type: 'candidate', label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate }); } else { console.log('End of candidates.'); } }, handleRemoteStreamAdded: function (event) { console.log('Remote stream added.', event); // todo: send callback event after got remote stream document.querySelector('#remoteVideo').src = window.URL.createObjectURL(event.stream); BY_WebRTC.remoteStream = event.stream; $("#remoteVideo").show(); }, handleRemoteStreamRemoved: function (event) { console.log('Remote stream removed. Event: ', event); }, hangup: function () { console.log('Hanging up.'); this.stop(); nowManager.sendGroupEvent(this.realtimeEventId, "bye"); }, handleRemoteHangup: function () { // console.log('Session terminated.'); // stop(); // isInitiator = false; }, stop: function () { BY_WebRTC.isStarted = false; BY_WebRTC.pc.close(); BY_WebRTC.pc = null; } }
Improve this question
4
  • What is event.stream at handleRemoteStreamAdded function? Commented Jul 17, 2016 at 17:58
  • it is the data of the RTCPeerConnection addstream event. i think it supposed to be this way and also the event.stream i recieve is an object and the url.createObjectUrl works and return a blob url... but when i put it in the video.src there is no video showing Commented Jul 17, 2016 at 18:40
  • Is event.source a Blob or an ArrayBuffer? Commented Jul 17, 2016 at 18:41
  • Did you try video.play(), or autoplay? Commented Jul 17, 2016 at 20:32

1 Answer 1

Reset to default
1

Ok i found the answer! Due to some small bug ( i didn't init isStarted = true ) I did not add the ice candidates. this was causing the problem.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.