javascript - WebRTC 音频不播放

问题描述

我在我的网络应用程序中使用 WebRTC 进行音频播放。因为，我是 WebRTC 的新手，所以我使用给定的示例 @ https://webrtc.github.io/samples/src/content/peerconnection/audio/作为参考。

问题是 50% 的情况下，当应用程序加载到浏览器中时没有音频播放。

我的 WebRTC 音频播放器的代码如下：

export default class WebRTCAudioPlayer {
    constructor()
    {
        this.audioPlayer = document.createElement("audio");
        this.audioPlayer.autoplay = true;

        const server = null;

        this.inputChannel = new RTCPeerConnection(server);
        console.info("WebRTCAudioPlayer : Created local peer connection object - inputChannel");
        this.outputChannel = new RTCPeerConnection(server);
        console.info("WebRTCAudioPlayer : Created remote peer connection object - outputChannel");

        this.inputChannel.onicecandidate = e => {
            this.outputChannel.addIceCandidate(e.candidate).then( _ => {
                console.info("WebRTCAudioPlayer : outputChannel Add ICE candidate Success");
            });
            console.info(`WebRTCAudioPlayer : inputChannel ICE candidate: \n${e.candidate ? e.candidate.candidate : '(null)'}`);
        }
        this.outputChannel.onicecandidate = e => {
            this.inputChannel.addIceCandidate(e.candidate).then( _ => {
                console.info("WebRTCAudioPlayer : inputChannel Add ICE candidate Success");
            });
            console.info(`WebRTCAudioPlayer : outputChannel ICE candidate: \n${e.candidate ? e.candidate.candidate : '(null)'}`);
        }

        this.outputChannel.ontrack = this.addTrackToAudioPlayer;
    }

    connect = (stream) => {
        console.info("WebRTCAudioPlayer : Received Local Stream");

        stream.getTracks().forEach(track => this.inputChannel.addTrack(track, stream));
        console.info("WebRTCAudioPlayer : Adding local stream to peer connection");

        const offerOptions = {
            offerToReceiveAudio: 1,
            offerToReceiveVideo: 0,
            voiceActivityDetection: false
        };

        this.inputChannel.createOffer(offerOptions).then(this.onInputChannelReady);
    }

    addTrackToAudioPlayer = (e) =>{
        this.audioPlayer.srcObject = e.streams[0];
        console.info("WebRTCAudioPlayer : Received Remote Stream");
        console.info(e.streams[0]);
    }

    onInputChannelReady = (desc) => {
        console.log(`WebRTCAudioPlayer : Offer from inputChannel\n${desc.sdp}`);
        this.inputChannel.setLocalDescription(desc).then(() => {
            this.outputChannel.setRemoteDescription(desc).then(() => {
                this.outputChannel.createAnswer().then(this.onOutputChannelReady);
            });
        });
    }

    onOutputChannelReady = (desc) => {
        console.log(`WebRTCAudioPlayer : Answer from outputChannel\n${desc.sdp}`);
        this.outputChannel.setLocalDescription(desc).then(() => {
            this.inputChannel.setRemoteDescription(desc);
        });
    }
}

WebRTC 报价如下：

v=0
o=- 2583551410876962681 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0
a=msid-semantic: WMS f5c29c05-4900-4af7-85b8-05295ceca69b
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:I0AS
a=ice-pwd:uQ8zxPynX8wD2EhQsb/kRaJA
a=ice-options:trickle
a=fingerprint:sha-256 56:97:15:F7:3C:CE:CA:6F:14:99:4F:F0:A0:22:2F:53:41:02:92:F1:55:23:BA:9F:06:85:CA:22:BC:BA:8E:77
a=setup:actpass
a=mid:0
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:4 urn:ietf:params:rtp-hdrext:sdes:mid
a=extmap:5 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id
a=extmap:6 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id
a=sendrecv
a=msid:f5c29c05-4900-4af7-85b8-05295ceca69b 7d5853b3-bddc-4b68-a440-821d890e950c
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:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:4020756194 cname:MTZVmqTew7j4Wkyu
a=ssrc:4020756194 msid:f5c29c05-4900-4af7-85b8-05295ceca69b 7d5853b3-bddc-4b68-a440-821d890e950c
a=ssrc:4020756194 mslabel:f5c29c05-4900-4af7-85b8-05295ceca69b
a=ssrc:4020756194 label:7d5853b3-bddc-4b68-a440-821d890e950c

WebRTC 的答案如下：

 v=0
o=- 412588473058311746 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0
a=msid-semantic: WMS
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:aSFD
a=ice-pwd:aHPt4OlSgdLcpNEnn2P4+LfS
a=ice-options:trickle
a=fingerprint:sha-256 B7:81:7F:E0:5C:FC:C3:46:7C:2C:EB:A2:4B:88:CD:00:6E:5B:B1:1E:F4:0A:52:AB:FA:6C:1E:23:1D:72:D7:03
a=setup:active
a=mid:0
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:4 urn:ietf:params:rtp-hdrext:sdes:mid
a=extmap:5 urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id
a=extmap:6 urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id
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:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000

从观察到的行为来看，我的猜测是这是因为 WebRTC 的异步特性没有得到正确处理。但是，我找不到错误。

任何帮助/指针表示赞赏。

更新： 在进一步调试中，我发现一旦浏览器授予麦克风权限，音频播放就会开始工作。目前，我已经更改了工作流程，以便在用户加入后立即获得麦克风许可。但是，从长远来看，这是不可取的。

我不确定它是否记录在任何地方。

标签： javascriptreactjsaudiowebrtc

javascript - WebRTC 音频不播放 - 间歇性

问题描述

解决方案

推荐阅读