通过 Websockets 进行 WebRTC 视频聊天答案

【问题标题】：WebRTC videochat through Websockets通过 Websockets 进行 WebRTC 视频聊天
【发布时间】：2013-05-15 08:48:02
【问题描述】：

我正在尝试使用 webRTC 和 WebSockets 来开发一个视频聊天应用程序来发送信号。我的问题是我不确切知道创建 RTCPeerConnection 并通过 webSocket（至少在本地）连接两个对等点（2 个浏览器）的过程。

我知道如何通过 WebSockets 与客户端通信，但不知道如何使用 RTCPeerConnection API，您知道任何教程一步一步地解释该过程吗？（提供 SDP、答案、ICE、...）另一方面，服务器代码如何通过 RTCPeerConnection 管理这些客户端？

这是我的服务器 Node.js 代码

"use strict";

// Optional. You will see this name in eg. 'ps' or 'top' command
process.title = 'node-webrtc';

// Port where we'll run the websocket server
var webSocketsServerPort = 1337;

// websocket and http servers
var webSocketServer = require('websocket').server;
var http = require('http');

 /* ---------------------------------

            GLOBAL VARIABLES

  ----------------------------------*/

// latest 100 messages
//var history = [ ];

// list of currently connected clients (users)
var clients = [ ];

 /* ---------------------------------

            HTTP SERVER

  ----------------------------------*/

var server = http.createServer(function(request, response) {
    // Not important for us. We're writing WebSocket server, not HTTP server
});
server.listen(webSocketsServerPort, function() {
    console.log((new Date()) + " Server is listening on port " + webSocketsServerPort);
});

 /* ---------------------------------

            WEBSOCKET SERVER

  ----------------------------------*/

var wsServer = new webSocketServer({
    // WebSocket server is tied to a HTTP server. WebSocket request is just
    // an enhanced HTTP request. For more info http://tools.ietf.org/html/rfc6455#page-6
    httpServer: server
});

// 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 + '.');

    // accept connection - you should check 'request.origin' to make sure that
    // client is connecting from your website
    // (http://en.wikipedia.org/wiki/Same_origin_policy)
    var connection = request.accept(null, request.origin); 
    // we need to know client index to remove them on 'close' event
    var index = clients.push(connection) - 1;

    console.log((new Date()) + ' Connection accepted.');


    // user sent some message
    connection.on('message', function(message) {
        for (var i=0; i < clients.length; i++) {
            clients[i].sendUTF(message);
        }   
    });


    // user disconnected
    connection.on('close', function(conn) {  
        console.log((new Date()) + " Peer " + conn.remoteAddress + " disconnected.");
        // remove user from the list of connected clients
        clients.splice(index, 1);
    });

});

【问题讨论】：

标签： javascript video websocket webrtc

【解决方案1】：

你看过或遇到过WebRTC.io吗？这是一个开源 GitHub 项目，它利用 Node.js 和 websockets 来做你所说的事情。我，不是一个 javascript 的人，能够在一周内弄清楚它在做什么。这不是一步一步的说明，但是任何有 javascript 经验的人都可以弄清楚函数调用顺序。

代码有两个位：server side 和 client side。服务器端使用 Node.js 运行，并将客户端代码提供给浏览器。如果我没记错的话，由于这两个项目是分开的，如果你想合并它们，你必须从客户端复制 webrtcio.js 文件并将其粘贴到服务器端文件夹中。不过，我认为如果您正确克隆 github 存储库，您可能不必担心这一点。

【讨论】：

感谢 AeroBuffalo，这就是我正在搜索的内容 :) 现在，我将理解代码并制作自己的代码。
感谢您指出这个项目。设置示例站点非常简单。过去一周我一直在与 socket.io、websocket.io、RTCMultiConnection 和 RTCPeerConnection 作斗争，但 WebRTC.io 正是我想要的。

【解决方案2】：

您可能想看看我为 Google I/O 所做的代码实验室：bitbucket.org/webrtc/codelab。

Step 5 展示了如何使用 socket.io 设置信令服务器，Step 6 将其与 RTCPeerConnection 结合起来制作了一个简单的视频聊天应用程序。

您可能还想看看easyRTC（全栈）和Signalmaster（为SimpleWebRTC 创建的信号服务器）。

apprtc.appspot.com 的“规范”WebRTC 视频聊天示例使用 XHR 和 Google App Engine Channel API 来发送信号。

【讨论】：