javascript - WebRTC:添加了 MediaStream 但没有媒体可见

Question

我创建了一个非常基本的 WebRTC 视频聊天界面(仅限 Chrome 测试)。我通过 websockets 向 SDP 发送信号，并使用 Twilio 服务进行 STUN/TURN 配置。

“offer answer dance”似乎工作正常，我得到了远程流(用 id 标识)并且 blob url 添加到视频标签:

<video controls="true" autoplay="autoplay" width="640" height="480" src="blob:http%3A//localhost%3A3000/76ea7cb1-3ded-4c8d-b486-ea8856fe259e"></video>

但是 View 是空的。

---

以下是我如何回答收到的邀请:

navigator.getUserMedia({video: true, audio: true}, function (stream) {
                        console.log("Stream Created:", stream.id);
                        pc.addStream(stream);
                        pc.setRemoteDescription(new RTCSessionDescription({type: "offer", sdp: sdp}), function () {
                            console.log("Remote description set");
                            pc.createAnswer(function (answer) {
                                pc.setLocalDescription(answer, function () {
                                    // send the answer to a server to be forwarded back to the caller 
                                    ws.send(JSON.stringify({action: "answer", to: callerID, from:myId, message: answer.sdp}));
                                }, error);
                            }, error);
                        }, error);
                    });

这是 onaddstream 函数:

pc.onaddstream = function(e){
        console.log("Stream Added:", e.stream.id);
        $("video")[0].src = URL.createObjectURL(e.stream);
        $("video")[0].play();
    };

编辑添加的 SDP:

Offer SDP v=0
    o=- 69925770258960282 2 IN IP4 127.0.0.1
    s=-
        t=0 0
    a=group:BUNDLE audio video
    a=msid-semantic: WMS sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp
    m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 126
    c=IN IP4 0.0.0.0
    a=rtcp:9 IN IP4 0.0.0.0
    a=ice-ufrag:ADj3FEdod3ks08kE
    a=ice-pwd:3W5QU38oyiB2Sj7EZql8p8Gn
    a=fingerprint:sha-256 ED:D2:A4:8C:E0:5F:38:25:D3:D9:86:FC:BD:7C:1E:5C:DE:DE:6D:01:75:DA:3A:8F:F5:3E:27:83:D2:FD:DF:FD
    a=setup:actpass
    a=mid:audio
    a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
    a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
        a=sendrecv
    a=rtcp-mux
    a=rtpmap:111 opus/48000/2
    a=rtcp-fb:111 transport-cc
    a=fmtp:111 minptime=10; useinbandfec=1
    a=rtpmap:103 ISAC/16000
    a=rtpmap:104 ISAC/32000
    a=rtpmap:9 G722/8000
    a=rtpmap:0 PCMU/8000
    a=rtpmap:8 PCMA/8000
    a=rtpmap:106 CN/32000
    a=rtpmap:105 CN/16000
    a=rtpmap:13 CN/8000
    a=rtpmap:126 telephone-event/8000
    a=maxptime:60
    a=ssrc:349223883 cname:07HrC4w/vFw0loFv
    a=ssrc:349223883 msid:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp 282288d1-5b9a-4912-9ced-f6188b33139e
    a=ssrc:349223883 mslabel:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp
    a=ssrc:349223883 label:282288d1-5b9a-4912-9ced-f6188b33139e
    m=video 9 UDP/TLS/RTP/SAVPF 100 101 116 117 96 97 98
    c=IN IP4 0.0.0.0
    a=rtcp:9 IN IP4 0.0.0.0
    a=ice-ufrag:ADj3FEdod3ks08kE
    a=ice-pwd:3W5QU38oyiB2Sj7EZql8p8Gn
    a=fingerprint:sha-256 ED:D2:A4:8C:E0:5F:38:25:D3:D9:86:FC:BD:7C:1E:5C:DE:DE:6D:01:75:DA:3A:8F:F5:3E:27:83:D2:FD:DF:FD
    a=setup:actpass
    a=mid:video
    a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
    a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
        a=extmap:4 urn:3gpp:video-orientation
    a=sendrecv
    a=rtcp-mux
    a=rtpmap:100 VP8/90000
    a=rtcp-fb:100 ccm fir
    a=rtcp-fb:100 nack
    a=rtcp-fb:100 nack pli
    a=rtcp-fb:100 goog-remb
    a=rtcp-fb:100 transport-cc
    a=rtpmap:101 VP9/90000
    a=rtcp-fb:101 ccm fir
    a=rtcp-fb:101 nack
    a=rtcp-fb:101 nack pli
    a=rtcp-fb:101 goog-remb
    a=rtcp-fb:101 transport-cc
    a=rtpmap:116 red/90000
    a=rtpmap:117 ulpfec/90000
    a=rtpmap:96 rtx/90000
    a=fmtp:96 apt=100
    a=rtpmap:97 rtx/90000
    a=fmtp:97 apt=101
    a=rtpmap:98 rtx/90000
    a=fmtp:98 apt=116
    a=ssrc-group:FID 2207775072 661034986
    a=ssrc:2207775072 cname:07HrC4w/vFw0loFv
    a=ssrc:2207775072 msid:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp 4b45d0b6-877f-400e-8e3d-42cefcd8808e
    a=ssrc:2207775072 mslabel:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp
    a=ssrc:2207775072 label:4b45d0b6-877f-400e-8e3d-42cefcd8808e
    a=ssrc:661034986 cname:07HrC4w/vFw0loFv
    a=ssrc:661034986 msid:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp 4b45d0b6-877f-400e-8e3d-42cefcd8808e
    a=ssrc:661034986 mslabel:sY6R8GGwtIDPcK4uDv3W66jBseIXZvAq2Nbp
    a=ssrc:661034986 label:4b45d0b6-877f-400e-8e3d-42cefcd8808e

我错过了什么？

Answer 1

SDP 最初不会在其中包含任何 ICE 候选者，并且您似乎缺少代码 - 并且没有提及 - 在 ICE 候选者可用时通过您的信号 channel 滴入它们:

pc.onicecandidate = e => yourSignaling.send({ ice: e.candidate });

在另一端:

var incoming = msg => pc.addIceCandidate(msg.ice).catch(log);

参见 Sending ICE candidates在 MDN 上。

此外，在收到报价后，尽快调用 setRemoteDescription，在 getUserMedia 之前，否则该对等方尚未准备好接收可能会在报价后立即到达的 ICE 候选人.