WebRTC 不显示远程媒体

Posted

技术标签:

【中文标题】WebRTC 不显示远程媒体【英文标题】：WebRTC doesn´t show remote media 【发布时间】：2019-01-17 17:02:34 【问题描述】：

我正在开发我的第一个 WebRTC 应用（视频聊天），但遇到了一些问题。

问题是，我无法在本地对等点上正确显示远程流，但它只是有时会发生。

我的意思是，例如它通常可以正常工作：

Chrome/Opera for android 和 Android/Opera for Windows

当我在计算机上使用同一 Chrome 浏览器的两个标签页时。

但是不能正常工作：

当我尝试在两台不同的计算机之间建立连接时，使用哪个浏览器并不重要。

信令服务器是用 node.js 和 websocket 库构建的。

问题是，连接似乎工作正常（当被呼叫者到来时，会建立连接并传输一个提议/答案）。

我会把我的 SDP 代码放在这里，然后也许你可以帮我看看是否有问题：

被叫方（收到报价）：

"v=0
o=- 6054484206475406414 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:W3ex
a=ice-pwd:V0W/L093KmN2xg3/YNkN8WRs
a=ice-options:trickle
a=fingerprint:sha-256      46:E4:F6:13:B4:19:D6:12:55:8A:56:66:77:34:51:73:5F:CF:A1:1A:DC:00:E9:46:D5:FF:EF:  72:6D:E6:A9:D6
a=setup:actpass
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:s-s-rc-audio-level
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:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=s-s-rc:1569538704 cname:SKNCGEejjnbKbP66
a=s-s-rc:1569538704 msid:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB 9077db38-7e9d- 4c6d-80b8-74c8396f0ca6
a=s-s-rc:1569538704 mslabel:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB
a=s-s-rc:1569538704 label:9077db38-7e9d-4c6d-80b8-74c8396f0ca6
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 122 127 121 125 107 108 109 124 120 123 119 114
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:W3ex
a=ice-pwd:V0W/L093KmN2xg3/YNkN8WRs
a=ice-options:trickle
a=fingerprint:sha-256 46:E4:F6:13:B4:19:D6:12:55:8A:56:66:77:34:51:73:5F:CF:A1:1A:DC:00:E9:46:D5:FF:EF:72:6D:E6:A9:D6
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=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc- extensions-01
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:10 http://tools.ietf.org/html/draft-ietf-avtext-framemarking-07
a=sendrecv
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=fmtp:98 profile-id=0
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 H264/90000
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:102 H264/90000
a=rtcp-fb:102 goog-remb
a=rtcp-fb:102 transport-cc
a=rtcp-fb:102 ccm fir
a=rtcp-fb:102 nack
a=rtcp-fb:102 nack pli
a=fmtp:102 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f
a=rtpmap:122 rtx/90000
a=fmtp:122 apt=102
a=rtpmap:127 H264/90000
a=rtcp-fb:127 goog-remb
a=rtcp-fb:127 transport-cc
a=rtcp-fb:127 ccm fir
a=rtcp-fb:127 nack
a=rtcp-fb:127 nack pli
a=fmtp:127 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:121 rtx/90000
a=fmtp:121 apt=127
a=rtpmap:125 H264/90000
a=rtcp-fb:125 goog-remb
a=rtcp-fb:125 transport-cc
a=rtcp-fb:125 ccm fir
a=rtcp-fb:125 nack
a=rtcp-fb:125 nack pli
a=fmtp:125 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f
a=rtpmap:107 rtx/90000
a=fmtp:107 apt=125
a=rtpmap:108 H264/90000
a=rtcp-fb:108 goog-remb
a=rtcp-fb:108 transport-cc
a=rtcp-fb:108 ccm fir
a=rtcp-fb:108 nack
a=rtcp-fb:108 nack pli
a=fmtp:108 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d0032
a=rtpmap:109 rtx/90000
a=fmtp:109 apt=108
a=rtpmap:124 H264/90000
a=rtcp-fb:124 goog-remb
a=rtcp-fb:124 transport-cc
a=rtcp-fb:124 ccm fir
a=rtcp-fb:124 nack
a=rtcp-fb:124 nack pli
a=fmtp:124 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=640032
a=rtpmap:120 rtx/90000
a=fmtp:120 apt=124
a=rtpmap:123 red/90000
a=rtpmap:119 rtx/90000
a=fmtp:119 apt=123
a=rtpmap:114 ulpfec/90000
a=s-s-rc-group:FID 1391635065 3022413398
a=s-s-rc:1391635065 cname:SKNCGEejjnbKbP66
a=s-s-rc:1391635065 msid:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB f8c6a0bd-4438-495c-895e-0f4180112cea
a=s-s-rc:1391635065 mslabel:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB
a=s-s-rc:1391635065 label:f8c6a0bd-4438-495c-895e-0f4180112cea
a=s-s-rc:3022413398 cname:SKNCGEejjnbKbP66
a=s-s-rc:3022413398 msid:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB f8c6a0bd-4438-495c-895e-0f4180112cea
a=s-s-rc:3022413398 mslabel:RkydrovqF8H5a1LGU8Bcl0GG1bmgsSHCjKaB
a=s-s-rc:3022413398 label:f8c6a0bd-4438-495c-895e-0f4180112cea
"

来电者（收到答复）：

"v=0
o=- 7085228660038989257 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:xq7k
a=ice-pwd:TJdcAwO4t3idGbRFAzjGxShI
a=ice-options:trickle
a=fingerprint:sha-256 F5:95:1F:17:E2:F1:DB:29:78:9A:0C:F5:2F:90:8D:F7:1C:28:A6:40:6A:52:5D:C0:74:C1:CB:B8:29:55:42:5D
a=setup:active
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:s-s-rc-audio-level
a=recvonly
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:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 122 127 121 125 107 108 109 124 120 123 119 114
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:xq7k
a=ice-pwd:TJdcAwO4t3idGbRFAzjGxShI
a=ice-options:trickle
a=fingerprint:sha-256 F5:95:1F:17:E2:F1:DB:29:78:9A:0C:F5:2F:90:8D:F7:1C:28:A6:40:6A:52:5D:C0:74:C1:CB:B8:29:55:42:5D
a=setup:active
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=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=recvonly
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=fmtp:98 x-google-profile-id=0
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 H264/90000
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:102 H264/90000
a=rtcp-fb:102 goog-remb
a=rtcp-fb:102 transport-cc
a=rtcp-fb:102 ccm fir
a=rtcp-fb:102 nack
a=rtcp-fb:102 nack pli
a=fmtp:102 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f
a=rtpmap:122 rtx/90000
a=fmtp:122 apt=102
a=rtpmap:127 H264/90000
a=rtcp-fb:127 goog-remb
a=rtcp-fb:127 transport-cc
a=rtcp-fb:127 ccm fir
a=rtcp-fb:127 nack
a=rtcp-fb:127 nack pli
a=fmtp:127 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:121 rtx/90000
a=fmtp:121 apt=127
a=rtpmap:125 H264/90000
a=rtcp-fb:125 goog-remb
a=rtcp-fb:125 transport-cc
a=rtcp-fb:125 ccm fir
a=rtcp-fb:125 nack
a=rtcp-fb:125 nack pli
a=fmtp:125 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f
a=rtpmap:107 rtx/90000
a=fmtp:107 apt=125
a=rtpmap:108 H264/90000
a=rtcp-fb:108 goog-remb
a=rtcp-fb:108 transport-cc
a=rtcp-fb:108 ccm fir
a=rtcp-fb:108 nack
a=rtcp-fb:108 nack pli
a=fmtp:108 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d0032
a=rtpmap:109 rtx/90000
a=fmtp:109 apt=108
a=rtpmap:124 H264/90000
a=rtcp-fb:124 goog-remb
a=rtcp-fb:124 transport-cc
a=rtcp-fb:124 ccm fir
a=rtcp-fb:124 nack
a=rtcp-fb:124 nack pli
a=fmtp:124 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=640032
a=rtpmap:120 rtx/90000
a=fmtp:120 apt=124
a=rtpmap:123 red/90000
a=rtpmap:119 rtx/90000
a=fmtp:119 apt=123
a=rtpmap:114 ulpfec/90000
"

我使用的 TURN 和 STURN 服务器是这些公共的，获得 here:

"iceServers":[
              
                    urls:"stun:stun.sipgate.net:3478"
              , 
              
                    urls: 'turn:192.158.29.39:3478?transport=udp',
                    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
                    username: '28224511:1379330808'
              ,
              
                    urls: 'turn:192.158.29.39:3478?transport=tcp',
                    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
                    username: '28224511:1379330808'
              
             
]

【问题讨论】：

当您的代码失败时，您的浏览器控制台是否出现任何错误？ @Ferrybig 不，没有错误。 【参考方案1】：

https://testrtc.com/webrtc-api-trace/ 描述了如何调试此类问题。但是，既然您说“公共转服务器”，解决方案就很明显了：公共转服务器是一个神话，没有人会为您的应用程序产生的流量付费。运行你自己的。

您使用的凭据取自 https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/，已于 2013 年 9 月过期。

【讨论】：

感谢您的回答。那么在 Github 上获得的具有所谓公共服务器的列表是什么？没有办法运行测试应用程序并使用其他人创建的任何 STUN 和 TURN 服务器？感谢您的链接，我将使用它们来学习；很明显我是新手:) 这个列表已经流传了很长一段时间...为了测试你需要在同一个网络上 @Phillipp Hancke 非常感谢。奇怪的是，当我从 android Chrome/Opera 设备和计算机浏览器（在不同的网络上）进行测试时，它似乎工作正常！我可以毫无问题地获得所有远程媒体（大多数情况下）。我想我将不得不开始寻找一个好的 STUN 和 TURN 提供商。 这在很大程度上取决于网络。有些网络只需要一个 stun 服务器。 @Phillipp Hancke 或者问题是，我正在连接与另一个对等点（计算机）连接到同一网络的手机？当我尝试使用我的手机但使用另一个不同的网络访问时，它不会像我在同一个网络上那样工作......你的线索教会了我很多东西！

以上是关于WebRTC 不显示远程媒体的主要内容，如果未能解决你的问题，请参考以下文章

通知服务应用程序扩展必须在远程通知中显示媒体？

WebRTC 无法在控制台上的 RTCPeerConnection 错误上执行“addIceCandidate”，但仍可以显示远程和本地视频

WebRTC音视频采集和播放示例及MediaStream媒体流解析

Windows远程桌面实现之十三：浏览器客户端使用WebRTC传输，以及WebRTC和MSE渲染显示

Windows远程桌面实现之十三：浏览器客户端使用WebRTC传输，以及WebRTC和MSE渲染显示

Windows远程桌面实现之十三：浏览器客户端使用WebRTC传输，以及WebRTC和MSE渲染显示