WebRTC

#WebRTC

陈文

博看文思(广州)

WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。

WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API，目前是WebRTC 1.0版本，Draft状态；另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，Google也希望和致力于让WebRTC的技术成为HTML5标准之一，可见Google布局之深远。
WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。

浏览器支持情况

桌上PC端
- Google Chrome 23
- Mozilla Firefox 22
- Opera 18
Android端
- Google Chrome 28（从版本29开始默认开启）
- Mozilla Firefox 24[10]
- Opera Mobile 12
Google Chrome OS
Firefox OS
iOS
Blackberry 10 内置浏览器

开发环境搭建

访问Node.js网站，在操作系统中安装Node.js
打开终端或命令行界面并输入npm install -g node-static（你很可能需要管理员权限）

开始第一个项目

在你想要的地方创建一个文件夹，作为你的工程目录

在文件夹下创建一个 server.js 文件，代码如下：

 var static = require('node-static');
 var http = require('http');
 var file = new(static.Server)();
 var app = http.createServer(function (req, res) {
      file.serve(req, res);
 }).listen(8080);

在文件夹下创建一个 index.html 文件，js代码如下：

    function hasUserMedia() {
       return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
     }
 if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;   
   navigator.getUserMedia({
     video: true,
     audio: true
   }, function (stream) {
     var video = document.querySelector('video');
     video.src = window.URL.createObjectURL(stream);
   }, function (err) {
       console.log(err);
   });
 } else {
   alert("抱歉，你的浏览器不支持 getUserMedia.");
 }

打开终端或命令行界面, cd + 您创建的文件夹路径
继续输入 node server.js
出现错误之后，输入 npm install node-static
在浏览器输入 localhost:8080

浏览器支持情况

开发环境搭建

开始第一个项目

项目地址