1

我正在尝试在本地同一台机器上使用 WebRTC 进行视频通话。我可以在 Firefox 上看到远程视频。但是我在 Chrome 上看不到它。当我控制台记录我的代码时，我发现它event.candidate同时null适用于localPeerConnection.onicecandidate和remotePeerConnection.onicecandidate. 于是，我再次在 Chrome 上测试，发现connectionStatusis"new"和iceGatheringStateis "complete"。在尝试 Trickle ICE ( https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ ) 时，我发现我在 Chrome 上没有获得任何冰选项，但适用于 Firefox。

谢谢 ：）

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC</title>
</head>
<body>
    <video id="local" playsinline muted autoplay controls></video>
    <video id="remote" playsinline autoplay controls></video>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang UP</button>
    <script type="text/javascript">
    // Stream info
    var localStream, localPeerConnection, remotePeerConnection;

    // Video tags
    var localVideo = document.getElementById("local");
    var remoteVideo = document.getElementById("remote");

    // Buttons
    var startButton = document.getElementById("startButton");
    var callButton = document.getElementById("callButton");
    var hangupButton = document.getElementById("hangupButton");

    startButton.disabled = false;
    callButton.disabled = true;
    hangupButton.disabled = true;

    var servers = null;

    startButton.onclick = start;
    callButton.onclick = call;
    hangupButton.onclick = hangup;

    function log(text){
        console.log("At time"+(performance.now()/1000).toFixed(3)+"-->\n"+ text);
    }

    function successCallback(stream){
        log("Received local stream");
        if(navigator.mediaDevices.getUserMedia){
            localVideo.srcObject = stream;
        }
        else{
            console.error("GetUserMediaError",error);
        }
        localStream = stream;
        callButton.disabled = false;
    }

    var constraints = {audio: true, video: true};
    function start(){
        log("Requesting local stream");
        startButton.disabled = true;
        navigator.mediaDevices.getUserMedia(constraints).then(successCallback);
    }

    function call(){
        callButton.disabled = true;
        hangupButton.disabled = false;
        log("Starting Call");
        if(navigator.mediaDevices.getUserMedia){
            if(localStream.getVideoTracks().length > 0){
                log("Using video device:" + localStream.getVideoTracks()[0].label);
            }
            if(localStream.getAudioTracks().length > 0){
                log("Using audio device:" + localStream.getAudioTracks()[0].label);
            }
        }


        localPeerConnection = new RTCPeerConnection(servers);
        log("Created local peer connection object localPeerConnection");
        localPeerConnection.onicecandidate = gotLocalIceCandidate;
        localPeerConnection.onconnectionstatechange = function(event){
            console.log("QWERTY");
        }
        
        remotePeerConnection = new RTCPeerConnection(servers);
        log("Created remote peer connection object remotePeerConnection");
        remotePeerConnection.onicecandidate = gotRemoteIceCandidate;



        if (remotePeerConnection.addTrack !== undefined) {
            remotePeerConnection.ontrack = ev => {
            ev.streams.forEach(stream => doAddStream(stream));
            }
        } else {
            remotePeerConnection.onaddstream = ev => {
            doAddStream(ev.stream);
            }
        }

        localStream.getTracks().forEach((track)=>{
            localPeerConnection.addTrack(track, localStream);
        });
        // localPeerConnection.addStream(localStream);
        log("Added localStream to localPeerConnection");
        localPeerConnection.createOffer(gotLocalDescription, onSignalingError);
    }

    function gotLocalDescription(description){
        localPeerConnection.setLocalDescription(description);
        log("Offer from localPeerConnection: "+ description.sdp);
        remotePeerConnection.setRemoteDescription(description);
        remotePeerConnection.createAnswer(gotRemoteDescription, onSignalingError);
    }

    function gotRemoteDescription(description){
        remotePeerConnection.setLocalDescription(description);
        log("Answer from remotePeerConnection:"+description.sdp);
        localPeerConnection.setRemoteDescription(description);
    }

    function hangup(){
        log("Ending call");
        localPeerConnection.close();
        remotePeerConnection.close();
        localPeerConnection = null;
        remotePeerConnection = null;
        hangupButton.disabled = true;
        callButton.disabled = false;
    }

    function onSignalingError(error){
        log("Failed to create signaling message: "+ error.name);
    }


    function gotLocalIceCandidate(event){
        if(event.candidate){
            remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
            log("Local ICE candidate: \n" + event.candidate.candidate);
        }
    }

    function gotRemoteIceCandidate(event){
        if(event.candidate){
            localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
            log("Remote ICE candidate: \n" +event.candidate.candidate);
        }
    }

    function doAddStream(stream){
        remoteVideo.srcObject = stream;
        log("Received remote stream Do add Stream");
    }
    </script>
</body>
</html>


  [1]: https://i.stack.imgur.com/gjNi4.png
4

0 回答 0