关于WebRTC的初步尝试

WebRTC(Web Real TimeCommunication),即支持web中音频,视频和数据的实时通信。

在Firefox,opera,chrome on desktop,chrome on android中均有支持。

WebRTC使用RTCPeerConnection在浏览器之间传递流数据,但也需要一种协调通信和发送控制消息的机制,这一过程称为信令。WebRTC未规定信令方法和协议。

WebRTC旨在工作于点对点,因此用户可以通过最直接的路线进行连接。但是,WebRTC是为了应对真实世界的网络而构建的:客户端应用程序需要穿越NAT网关和防火墙,并且在直接连接失败的情况下需要对等网络需求回退。作为此过程的一部分,WebRTC API使用STN服务器来获取计算机的IP地址,并在发生对等通信失败的情况下使TURN服务器充当中继服务器。

另外,所有WebRTC组件都必须加密,并且其JavaScript API只能用于安全源(HTTPS或本地主机,这点很重要!)。信令机制不是由WebRTC标准定义的,所以首先必须确保使用安全协议。

用法:

在工作目录中添加一个video元素和一个script元素到index.html

Realtime communication with WebRTC

Realtime communication with WebRTC

将以下内容添加到js文件夹中的main.js中:

'use strict';

varconstraints={

video:true

};

varvideo=document.querySelector('video');

functionhandleSuccess(stream){

video.srcObject=stream;

}

functionhandleError(error){

console.error('getUserMedia error: ',error);

}

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

效果:

运行分析:

在getUserMedia()通话之后,浏览器请求用户访问其相机的许可(如果这是第一次请求当前原点的相机访问)。如果成功,则返回MediaStream,媒体元素可以通过srcObject属性使用它:

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

functionhandleSuccess(stream){

video.srcObject=stream;

}

该constraints参数允许您指定要获取的媒体。在这个例子中,只有视频,因为音频默认是禁用的:

varconstraints={

video:true

};

也可以使用约束来实现视频分辨率等附加要求:

consthdConstraints={

video:{

width:{

min:1280

},

height:{

min:720

}

}

}

该MediaTrackConstraints规范列出了所有可能的约束类型,虽然不是所有的选项都被所有浏览器支持。如果当前选择的摄像机不支持请求的分辨率,getUserMedia()则会拒绝该分辨率,OverconstrainedError并且用户不会被提示允许访问其摄像机。

如果getUserMedia()成功,则来自网络摄像头的视频流被设置为视频元素的来源:

functionhandleSuccess(stream){

video.srcObject=stream;

}

——Happy Ending——

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180403G1SQ5M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券