点对点视频 Web 开发高级 CSS 初学者中级 Javascript

使用 WebRTC 进行视频会议

Hussain Mubaireek

4.82/5 (22投票s)

2012年12月30日

公共领域

4分钟阅读

318194

仅使用 websockets 和 javascript 在 HTML5 中进行视频会议。

引言

该项目正在实现一个简单的视频会议应用程序，您可以通过打开同一个 HTML 页面在两个人之间进行在线视频会议。这是通过 WebRTC 和 Websockets 完成的。

背景

视频会议很难，并且需要很多东西，例如宽带编解码器（语音和视频）、回声消除、自动增益控制、降噪/抑制、动态抖动缓冲区、错误隐藏、网络穿透、P2P 协议和会话设置。

但是，现在有了 WebRTC，它变得容易多了，您可以在浏览器中进行视频会议，无需插件！

首先，让我们了解什么是 WebRTC？

WebRTC 是一个免费的开源项目，它通过简单的 Javascript API 使 Web 浏览器具备实时通信 (RTC) 功能。

WebRTC 的使命是通过简单的 Javascript API 和 HTML5 在浏览器中开发丰富、高质量的 RTC 应用程序。

WebRTC 的工作仍在进行中，它得到了 Google Chrome Canary/Firefox Aurora/Opera Labs 的支持。

你需要做什么？

要进行视频会议，我们需要做五件事

1.在 HTML 页面中设置视频元素

<video></video>

2.访问本地设备（摄像头、麦克风）

navigator.getUserMedia();

3. 显示本地或远程对等方的 a/v

createObjectURL

4.连接到远程对等方

PeerConnection

使用代码

首先，要访问本地设备并在您的 HTML 页面中显示它，我们使用此代码：

// Replace the source of the video element with the stream from the camera
try 
{ 
navigator.webkitGetUserMedia({audio: true, video: true}, successCallback, errorCallback);
} 

catch (e) 
{
navigator.webkitGetUserMedia("video,audio", successCallback, errorCallback);
}

function successCallback(stream) {
  sourcevid.src = window.webkitURL.createObjectURL(stream);
  sourcevid.style.webkitTransform = "rotateY(180deg)";
  localStream = stream;
}

function errorCallback(error) {
  logg('An error occurred: [CODE ' + error.code + ']');
}

GetUserMedia() 的浏览器实现：

WebKit (Chrome)
webkitGetUserMedia()
window.webkitURL.createObjectURL()

Opera
getUserMedia()
直接设置 video.src

Firefox
mozGetUserMedia()
window.URL.createObjectURL()

IE
目前尚未实现。

其次，我们需要设置一个对等连接

我们可以通过 Websockets 建立连接，或者使用 Google appengine 上的通道管理服务器（例如开源的 apprtc 应用程序）。我决定使用 Websocket 服务器作为双向通信通道。

WebRTC 使用 PeerConnection 来通信数据流。但是，我们需要一种在对等方之间发送控制消息的机制，这个过程称为信令。您可以选择任何您喜欢的消息协议，例如 SIP。

信令过程
- 呼叫者发送offer。
- 被叫方接收offer。
- 被叫方发送answer。
- 呼叫方接收answer。

要启动会话，WebRTC 客户端需要本地和远程配置信息，因此这些配置信息由符合 SDP 的 SessionDiscreption 发送。呼叫者发送的 SessionDescription 被称为 offer，而被叫方的响应是 answer。这种架构称为 JSEP（JavaScript Session Establishment Protocol）。

通过 WebRTC 实现聊天消息
我之所以想让文本聊天在 WebRTC 中工作，是因为我知道它目前还不支持（只能传输视频/音频）。为了让它工作，我稍微修改了信令过程。所以，当呼叫者想发送一条文本消息时，我让他发送一个chat消息作为 SessionDescription 消息，一旦接收方收到，就将其添加到他拥有的聊天 iframe 中。

第三，创建对等连接后，我们需要添加远程流

  var remotevid = document.getElementById('remotevid');

  try {
      logg("Creating peer connection");
	  var servers = [];
	  servers.push({'url':'stun:' + stunServer});
	  var pc_config = {'iceServers':servers};	  
      peerConn = new webkitRTCPeerConnection(pc_config);
      peerConn.onicecandidate = onIceCandidate;
    }
 
   catch (e) {
	 logg("Failed to create PeerConnection, exception: " + e.message);   
	}

    peerConn.onaddstream = onRemoteStreamAdded;
    peerConn.onremovestream = onRemoteStreamRemoved;

  function onRemoteStreamAdded(event) {
    logg("Added remote stream");
    remotevid.src = window.webkitURL.createObjectURL(event.stream);
  }

关注点

这个项目很有趣，因为我学到了新东西，而且我还对实现和尝试诸如从相机流捕获图像之类的事情很感兴趣。

所以，要从相机流中拍照，需要创建一个 canvas 元素

<canvas id="canvas"></canvas>

我们还需要一个按钮来拍照，以及一个 img 标签来设置捕获的图片

<button id="btn">Take photo</button>

<img src="" id="photo" alt="photo" style="margin-left:90px;">

当然，正如我们上面学到的，您必须有一个视频元素。然后

startbutton  = document.querySelector('#btn');

startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

另外，更有趣的是使用 CSS 对相机流应用实时效果。

如何运行代码

1.下载源代码。
2.将源文件移至您的 www 目录（您需要本地运行一个 http 服务器）。
3.安装 node.js（来自nodejs.org ），以便能够使用它运行服务器。
4.安装 node.js（以及附带的必要命令）后，打开 Node.js 命令提示符。
5.移至 websocket 服务器所在目录（websocket-server.js）。
6.输入此命令：node websocket-server.js。
7.现在服务器正在运行，并在端口 1337 上侦听。
8.打开 VideoConference.htm 并修改代码中的 IP 地址以匹配您计算机的网络 IP（或者您可以写入 127.0.0.1）。
9.现在，其他客户端应该执行步骤 1-2 和 8（在步骤 8 中，他应该输入运行服务器的计算机的 IP 地址）。
10.现在，在打开 VideoConference.htm（在 Chrome Canary 浏览器中）后，服务器应该会检测到你们俩的连接。
11.在双方都单击开始后，您现在可以看到自己了。单击连接也可以看到远程客户端。

致谢

这项工作是 SWE 344 Internet Protocols and Client-Server Programming (2012年秋季) 项目的一部分。
该项目由我的讲师 Dr. Nasir Darwish. 提出。

参考文献

1. GingerTech
http://blog.gingertech.net/2012/06/04/video-conferencing-in-html5-webrtc-via-web-sockets/

他实现了 websocket 服务器，我将其改编到我的应用程序中（那里的演示不起作用，因为它是一个旧的并且使用了旧的已弃用的 API。

2. Chrom 开发者开发的 apprtc 应用程序

http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/

了解流程并查看新 API。

3. WebRTC.org
www.webrtc.org/home

获取一般信息和演示

4. HTML5Rocks
http://www.html5rocks.com/en/tutorials/webrtc/basics/

获取一般信息并了解流程。

5. Photobooth 示例
http://html5-demos.appspot.com/static/getusermedia/photobooth.html

用于将 CSS 滤镜应用于实时流。