1. ホーム
  2. 質問と答え
  3. webrtc pc.onaddstream window.URL.createObjectURlが表示されないリモートビデオ

webrtc pc.onaddstream window.URL.createObjectURlが表示されないリモートビデオ

2016-07-17 5 views
1

私は基本的なビデオチャットの例を設定しようとしています。現在、同じコンピュータの2つのクロムタブをチャットしようとしています。
リモートビデオストリームを取得するまではすべてがうまく見えますが、を使用してremoteVideo要素に入れると、何も表示されません。私はリモートストリームイベントを持っていますが、ビデオは表示されません。webrtc pc.onaddstream window.URL.createObjectURlが表示されないリモートビデオ

これはどうしてですか？何か案は？助けてください！ここ

は、シグナリングの対数である：

発信者：

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.

コーリー：

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.

コードは、（発呼者のための真isInitiator =とのstartSessionで開始します - 地元のメディアを入手した後）：

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; 
    } 

}

出典

2016-07-17 Yaniv Hakim

+0

'handleRemoteStreamAdded'関数で' event.stream'とは何ですか？ – guest271314

+0

RTCPeerConnection addstreamイベントのデータです。私はそれがこの方法でもevent.stream私はオブジェクトとurl.createObjectUrlが動作し、blobのURLを返す受信されると思います...しかし、私はそれをビデオに表示するビデオが表示されません。 –

+0

'event.source'は' Blob'か 'ArrayBuffer'ですか？ – guest271314

答えて

1

私は答えを見つけました！ 小さな虫（私はinit isStarted = trueではありませんでした）のために、私は氷の候補を追加しませんでした。これは問題を引き起こしていました。

出典

2016-07-17 21:47:00

関連する問題

 関連する問題