Question

<!DOCTYPE html>
<html>
<head>
<title>WebRTC Reference App</title>

<meta http-equiv="X-UA-Compatible" content="chrome=1"/>

<link rel="canonical" href="https://apprtc.appspot.com/?r=96443121"/>
<link rel="stylesheet" href="css/main.css" />

<script type="text/javascript" src="_ah/channel/jsapi.js"></script>
<!--<script type="text/javascript" src="/_ah/channel/jsapi"></script>-->
<script src="js/main.js"></script>
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->

<script src="js/adapter.js"></script>
</head>
<body >
<script type="text/javascript">
  var errorMessages = [];
  var channelToken = 'AHRlWroGHj6YqWMdr7JeFULjqux9vQzrpCOnFM7zD91GLHc4PVW1WDZJI08ptgM_XMj5M22InerI5Lw5QN1rS3rHu2Dlnx3g95ILmzupe2OFB4OLCbZGbAQ';
  var me = '49847744';
  var roomKey = '96443121';
  var roomLink = 'https://apprtc.appspot.com/?r=96443121';
  var initiator = 0;
  var pcConfig = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
  var pcConstraints = {"optional": [{"DtlsSrtpKeyAgreement": true}]};
  var offerConstraints = {"optional": [], "mandatory": {}};
  var mediaConstraints = {"audio": true, "video": true};
  var turnUrl = 'https://computeengineondemand.appspot.com/turn?username=49847744&key=4080218913';
  var stereo = false;
  var audio_send_codec = '';
  var audio_receive_codec = 'opus/48000';
  setTimeout(initialize, 1);


</script>`enter code here`

<div id="maindiv">
    <div id="container" ondblclick="enterFullScreen()">
      <div id="card">
            <div id="local">
                <video id="localVideo" autoplay muted="true"/>
            </div>

            <div id="remote">
                <video id="remoteVideo" autoplay>
                </video>

                <div id="mini">
                <video id="miniVideo" autoplay muted="true"/>
                </div>
            </div>
      </div>
    </div>
        <div class="buttons">
            <button id="startButton">Start</button>
            <button id="callButton">Call</button>
            <button id="hangupButton">Hang Up</button>
        </div>
</div>

<script>
var localStream, localPeerConnection, remotePeerConnection;

var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");

var startButton = document.getElementById("startButton");
var callButton = document.getElementById("callButton");
var hangupButton = document.getElementById("hangupButton");
startButton.disabled = false;
callButton.disabled = true;
hangupButton.disabled = true;
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;

function trace(text) {
  console.log((performance.now() / 1000).toFixed(3) + ": " + text);
}

function gotStream(stream){
  trace("Received local stream");
  localVideo.src = URL.createObjectURL(stream);
  localStream = stream;
  callButton.disabled = false;
}

function start() {
  trace("Requesting local stream");
  startButton.disabled = true;
  navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  navigator.getUserMedia({audio:true, video:true}, gotStream,
    function(error) {
      trace("navigator.getUserMedia error: ", error);
    });
}


function call() {
  callButton.disabled = true;
  hangupButton.disabled = false;
  trace("Starting call");

  if (localStream.getVideoTracks().length > 0) {
    trace('Using video device: ' + localStream.getVideoTracks()[0].label);
  }
  if (localStream.getAudioTracks().length > 0) {
    trace('Using audio device: ' + localStream.getAudioTracks()[0].label);
  }

  var servers = null;

  localPeerConnection = new webkitRTCPeerConnection(servers);
  trace("Created local peer connection object localPeerConnection");
  localPeerConnection.onicecandidate = gotLocalIceCandidate;

  remotePeerConnection = new webkitRTCPeerConnection(servers);
  trace("Created remote peer connection object remotePeerConnection");
  remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
  remotePeerConnection.onaddstream = gotRemoteStream;

  localPeerConnection.addStream(localStream);
  trace("Added localStream to localPeerConnection");
  localPeerConnection.createOffer(gotLocalDescription);
}

function gotLocalDescription(description){
  localPeerConnection.setLocalDescription(description);
  trace("Offer from localPeerConnection: \n" + description.sdp);
  remotePeerConnection.setRemoteDescription(description);
  remotePeerConnection.createAnswer(gotRemoteDescription);
}

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

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

function gotRemoteStream(event){
  remoteVideo.src = URL.createObjectURL(event.stream);
  trace("Received remote stream");
}

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

function gotRemoteIceCandidate(event){
  if (event.candidate) {
    localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    trace("Remote ICE candidate: \n " + event.candidate.candidate);
  }
}
</script>
</body>
<footer id="status">`enter code here`
</footer>
<div id="infoDiv"></div>
</html>

这里在上面的代码中如何连接两个不同的PC并进行视频通话。我从webrtc.org获取了它。我在同一台PC上收到两个视频。我想连接两台不同的PC并进行视频通话。这个例子可以在vline.com上看到，其中链接是自动生成的，只需要连接到给定的链接，他们就可以进行视频通话。请帮忙

Answer 1

您需要一个信令服务器来中继两个对等体之间的所有消息。例如，您可以使用node.js在Javascript中执行此操作：

var WebSocketServer = require('websocket').server;
var http = require('http');
var clients = [];

var server = http.createServer(function(request, response) {
    // process HTTP request. Since we're writing just WebSockets server
    // we don't have to implement anything.
});
server.listen(80, function() {
  console.log((new Date()) + " Server is listening on port 80");
});

// create the server
wsServer = new WebSocketServer({
    httpServer: server
});

function sendCallback(err) {
    if (err) console.error("send() error: " + err);
}

// This callback function is called every time someone
// tries to connect to the WebSocket server
wsServer.on('request', function(request) {
    console.log((new Date()) + ' Connection from origin ' + request.origin + '.');
    var connection = request.accept(null, request.origin);
    console.log(' Connection ' + connection.remoteAddress);
    clients.push(connection);

    // This is the most important callback for us, we'll handle
    // all messages from users here.
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            // process WebSocket message
            console.log((new Date()) + ' Received Message ' + message.utf8Data);
            // broadcast message to all connected clients
            clients.forEach(function (outputConnection) {
                if (outputConnection != connection) {
                  outputConnection.send(message.utf8Data, sendCallback);
                }
            });
        }
    });

    connection.on('close', function(connection) {
        // close user connection
        console.log((new Date()) + " Peer disconnected.");        
    });
});

对等体需要通过此信令服务器（socket.send（））发送所有信令（提供，答案和候选）。以下对等示例：

function connect() {
    if (!started && localStream && channelReady) {
        createPeerConnection();
        started = true;
        peerConn.createOffer(setLocalAndSendMessage, errorCallback, mediaConstraints);
    } else {
        alert("Local stream may not be running yet, or problem with signaling");
    }
}

// send SDP via websocket connection
function setLocalAndSendMessage(sessionDescription) {
    peerConn.setLocalDescription(sessionDescription);
    socket.send(JSON.stringify(sessionDescription));
}

// Signaling messages end up here
function onMessage(evt) {
    var descr = JSON.parse(evt.data);

    if (descr.type === 'offer') {
        if (!started) {
            createPeerConnection();
            started = true;
        }
        peerConn.setRemoteDescription(new RTCSessionDescription(descr));
        peerConn.createAnswer(setLocalAndSendMessage, errorCallback, mediaConstraints);
    } else if (descr.type === 'answer'){
        peerConn.setRemoteDescription(new RTCSessionDescription(descr));
    } else if (descr.type === 'candidate'){
        var candidate = new RTCIceCandidate({sdpMLineIndex: descr.sdpMLineIndex, sdpMid: descr.sdpMid, candidate: descr.candidate});
        peerConn.addIceCandidate(candidate);
    }
}

//Creates a new RTCPeerConnection
function createPeerConnection() {
    peerConn = new webkitRTCPeerConnection({"iceServers": []});

    // send any ice candidates to the other peer    
    peerConn.onicecandidate = function(evt) {
        if (event.candidate) {
            socket.send(JSON.stringify({
                type: "candidate", 
                sdpMLineIndex: evt.candidate.sdpMLineIndex,
                sdpMid: evt.candidate.sdpMid,
                candidate: evt.candidate.candidate}));
        } else {
            console.log("End of candidates.");
        }

    };
    peerConn.addStream(localStream);
    peerConn.addEventListener("addstream", onRemoteStreamAdded, false);
}

function onRemoteStreamAdded(event) {
    //peerConn.removeEventListener("addstream", onRemoteStreamAdded, false);
    remotevidArr.src = window.URL.createObjectURL(event.stream);
}

（WebRTC）如何连接两台PC进行视频聊天？

1 个答案: