javascript - WebRTC 远程对等流不显示

Question

我使用 WebRTC 创建了一个简单的视频通话应用程序。我已从以下链接 https://webrtc.github.io/samples/src/content/peerconnection/pc1/中获取参考

我已将该应用程序与信令服务器集成。PC1 将向信令服务器发送报价，PC2 将接收报价并发送回答案。

这是我使用 Javscript 编写的代码

HTML

/* Client video */
<video id="client_video" autoplay></video>
/* Peer video */
<video id="remote_video" autoplay></video>

Javascript

    var client_video = document.querySelector('#client_video');
    var peer_video = document.querySelector('#remote_video');
    var peerConnection, current_stream, client_user;
    
    var configuration = {
        "iceServers": [
            {
                "urls": "stun:stun.1.google.com:19302"
            },
            {
                urls: 'turn:192.158.29.39:3478?transport=tcp',
                credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
                username: '28224511:1379330808'
            }
        ]
    };
    
    //function for adding peer stream

    function gotRemoteStream(e) {
    
        if (peer_video.srcObject !== e.streams[0]) {
            peer_video.srcObject = e.streams[0];
            console.log('received remote stream');
        }
    }
    
    //function to detect ICE state change

    function onIceStateChange(pc, event) {
        if (pc) {
          console.log(`ICE state: ${pc.iceConnectionState}`);
          console.log('ICE state change event: ', event);
        }
    }
    
    //function to send ICE candidate to signaling server

    function icecandidateAdded(ev) {
        if (ev.candidate) {
            send_to_sigserver(ev.candidate); // candidate send to signaling server
        }
    };

  //function to access camera and RTCpeerconnection creation
  function Rtc_connection(){

    try {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
        console.log('Received local stream');
        client_video.srcObject = stream;
        current_stream = stream;
      } catch (e) {
        alert(`getUserMedia() error: ${e.name}`);
    }

    peerConnection = new RTCPeerConnection(configuration);
    current_stream.getTracks().forEach(track => peerConnection.addTrack(track, current_stream));
    peerConnection.addEventListener('track', e => gotRemoteStream(e));
    peerConnection.addEventListener('onicecandidate', e => icecandidateAdded(e));
    peerConnection.addEventListener('iceconnectionstatechange', e => onIceStateChange(peerConnection, e));

    if(client_user == true)
    {
        creating_offer(); 
    }
    else
    {
        creating_answer(); 
    }
}

以下是用于从服务器发送和接收数据的函数

// when ICE candidate received from server
async function onCandidate_from_server(candidate) {
    try {
        await (peerConnection.addIceCandidate(candidate));
      } catch (e) {
        onAddIceCandidateError(e);
      }
}

//ICE error
function onAddIceCandidateError(error) {
    console.log(` failed to add ICE Candidate: ${error.toString()}`);
}

async function onAnswer_from_server(answer) {
    //setRemoteDescription with answer first 
    try {
        await peerConnection.setRemoteDescription(answer);
      } catch (e) {
        onSetSessionDescriptionError(e);
      }
}

function onSetSessionDescriptionError(error) {
    console.log(`Failed to set session description: ${error.toString()}`);
  }

这些是创建报价和答案的功能

async function creating_offer() {
    try {
        const offer = await peerConnection.createOffer(offerOptions);
        await onCreateOfferSuccess(offer);
      } catch (e) {
        onCreateSessionDescriptionError(e);
      }
}

async function onCreateOfferSuccess(desc) {
    try {
      await peerConnection.setLocalDescription(desc);
      send_to_sigserver(desc); // offer send to signaling server
    } catch (e) {
      onSetSessionDescriptionError(e);
    }
}

async function creating_answer() {

    //set setRemoteDescription with offer first
    try {
      await peerConnection.setRemoteDescription(conn_offer);
    } catch (e) {
      onSetSessionDescriptionError(e);
    }

    try {
        const answer = await peerConnection.createAnswer();
        await onCreateAnswerSuccess(answer);
      } catch (e) {
        onCreateSessionDescriptionError(e);
    }
}

async function onCreateAnswerSuccess(desc) {

    try {
      await peerConnection.setLocalDescription(desc);
    } catch (e) {
      onSetSessionDescriptionError(e);
    }

    send_to_sigserver(desc); // answer send to signaling server
}

function onCreateSessionDescriptionError(error) {
    console.log(`Failed to create session description: ${error.toString()}`);
}

连接后，我可以从两端创建报价和答案。client_video我也可以在框架中看到客户端视频。但我无法看到远程对等流。我在连接中没有看到任何错误。所有的连接都很好。在两者Firefox中chrome，此代码都是not working. 但是webRTC sample code在两个浏览器中都可以使用。

我在这里做错了什么？请任何人提出解决方案或提示？

标签： javascriptwebrtcgetusermediapeerjssimple-peer