WebRTC 无法在 chrome 和 edge 中播放，但在 Firefox 中播放

问题描述

我有一个非常简单的使用 WebRTC 进行视频通话的代码。整个系统针对不同的浏览器工作方式不同。

捕获浏览器	播放器浏览器	工作
铬	火狐	✔
铬	铬	X
火狐	铬	X
火狐	火狐	✔

捕获码是 JS：

(function () {
    var localVideo,localConnection;
    const signaling = new WebSocket('wss://crs4kx11s1/websockets');
    signaling.onmessage = function (message) {
        var data = JSON.parse(message.data);
        if (data.sdp) {
            var answerSDP = data.sdp;
            if (answerSDP.type == "answer") {
                localConnection.setRemoteDescription(answerSDP);
            }
        }
        if (data.candidate && data.candidateType == "answerClient") {
            localConnection.addIceCandidate(data.candidate);
        }
    }
    localConnection = new RTCPeerConnection({
        iceServers: [{
            urls: 'turn:127.0.0.1:8043?transport=tcp',credential: 'jupiter',username: 'simpleshare'
        }]
    });
    document.addEventListener("DOMContentLoaded",function (event) {
        $("#share").click(function (event) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function (stream) {
                    stream.getTracks().forEach(
                        function (track) {
                            localConnection.addTrack(
                                track,stream
                            );
                        }
                    );
                    localVideo = document.getElementById('local');
                    localVideo.srcObject = stream;
                    localConnection.onnegotiationneeded = function () {
                        localConnection.createOffer()
                            .then(offer => {
                                localConnection.setLocalDescription(offer)
                                    .then(() => {
                                        signaling.send(JSON.stringify({ sdp: offer }));
                                    })
                            });
                    }
                    localConnection.onicecandidate = function (e) {
                        if (e.candidate) {
                            signaling.send(JSON.stringify({
                                candidateType: 'offerClient',candidate: e.candidate.toJSON()
                            }));
                        }
                        console.log('offerClient is on icecandidate');
                    };
                });
        });
    }); 
})();

HTML

<div>
    <button id="share">Share</button>
    <video id="local" autoplay></video>
 </div>

现在是播放器代码

JS

(function () {
    var localVideo,localConnection;
    const signaling = new WebSocket('wss://crs4kx11s1/websockets');
    signaling.onmessage = function (message) {
        const data = JSON.parse(message.data);
        // const content = data.content;
        try {
            if (data.sdp) {
                let offerSDP = data.sdp;
                if (offerSDP.type == "offer") {
                    console.log("Accepting the offer.")
                    localConnection.setRemoteDescription(offerSDP);
                    localConnection.createAnswer().then(function (answer) {
                        console.log("Answer created!")
                        localConnection.setLocalDescription(answer);
                        signaling.send(JSON.stringify({ sdp: answer }));
                    });
                    
                }
            }
            if (data.candidate && data.candidateType == "offerClient") {
                console.log("ICE candidate added!");
                localConnection.addIceCandidate(data.candidate);
            }

        } catch (err) {
            console.error(err);
        }
    };
    document.addEventListener("DOMContentLoaded",function (event) {

            startConnection();
            localVideo = document.getElementById('self-view');

    });

    function startConnection() {
        console.info("Starting connection");
        localConnection = new RTCPeerConnection({iceServers: [{
                urls: 'turn:127.0.0.1:8043?transport=tcp',username: 'simpleshare'
            }]
        });
        //startCapture();
        localConnection.onicecandidate = function (e) {
            console.info("onicecandidate",e);
            if (e.candidate) {
                    signaling.send(JSON.stringify({
                        candidateType: 'answerClient',candidate: e.candidate.toJSON()
                    }));
                }
            console.log('answerClient is on icecandidate');
        };
        

        localConnection.onconnectionstatechange = function (e) {
            console.log("Current state",localConnection.connectionState);
        }
        localConnection.ontrack = function (e) {
            localVideo.srcObject = e.streams[0];
        }

    }

})();

HTML

<div id="chat-room">
   <div id="videos">
      <video id="self-view" autoplay></video>
    </div>
</div>

除此之外，还有一个 WebSocket 服务器，用于中继 SDP 报价和候选人。 请注意，我使用了我们自己的 TURN 服务器。

解决方法

成功了。这是因为 chrome 中的新 autoplay policy。刚刚添加了 localVideo.play(); 并且它起作用了。