webrtc不支持怎么调用设想吐_关于webRTC中video的使用实践

此次demo使用chrome49调试测试

前端在操作视频输入，音频输入，输出上一直是比较弱的，或者说很难进行相关的操作，经过我最近的一些研究发现，在PC上实际上是可以实现这一系列的功能的，其实现原理主要是得益于google的webRTC技术。

什么是webRTC

WebRTC，名称源自网页即时通讯(英语：Web Real-Time Communication)的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准[1][2][3]。(来自维基百科)

也就是说webRTC是让网页浏览器进行实时语音对话或者视频对话的一系列的解决方案。官方demo：https://github.com/webrtc/samples

这个demo里面实际上功能非常多，关于调用摄像头我们主要关心的是这个demo，可是当大家把代码拉下来之后发现非常多东西，我在这里给大家简单的总结一下，并自己写上几个简单的demo，当然想要关心具体实现功能，或者代码的也可以看源码。

如何在网页中调用摄像头

首先我们需要实现的就是在网页中调用到摄像头进行录制，假如没有摄像头的同学也可以去下载一个繁星伴奏，进行模拟，下载地址：http://fanxing.kugou.com/ac/accompany

我们这里需要用到navigator.getUserMedia这个API，当然在chrome下需要使用兼容前缀即navigator.webkitGetUserMedia

代码如下：

当前浏览器不支持 video直接播放，点击这里下载视频：下载视频

varconstraints={video:true};//设置参数LocalMediaStream

varvideo_element=document.getElementById("video");// if(navigator.getUserMedia){//默认API

navigator.getUserMedia(constraints)

.then(function(stream) {

console.info(stream);

window.stream=stream;

video_element.srcObject=stream;

video_element.src=URL.createObjectURL(stream);returnnavigator.mediaDevices.enumerateDevices();

})

.catch(errorCallback);

}else if(navigator.webkitGetUserMedia){//chrome兼容

navigator.webkitGetUserMedia(constraints,function(stream){//成功获取后回调

console.info(stream);

window.stream=stream;

video_element.srcObject=stream;

video_element.src=URL.createObjectURL(stream);returnnavigator.mediaDevices.enumerateDevices();

},function(data){//失败回调

console.info(data)

});

}

我们可以看下代码，HTML部分很简单 就是一个video标签，主要功能的实现在js中可以找到navigator.getUserMedia这个API，通过这个就可以调用当前摄像头，并且返回流信息。

关于navigator.getUserMedia

提示用户需要权限去使用像摄像头或麦克风之类的媒体设备，如果用户提供了这个权限。

语法

navigator.getUserMedia ( constraints, successCallback, errorCallback );

参数

constraints :

successCallback中传入的 LocalMediaStream对象所支持的媒体类型。

successCallback:

当应用中传递LocalMediaStream对象时触发的函数。

errorCallback:

当调用媒体设备失败时触发的函数.

其中第一个和第二是都是必须的.

第一个需要传入想要调用哪种媒体类型，具体就像代码中定义:

var constraints={video:true};

当然也可以写多个类型，例如

var constraints={video:true, audio: true};

第二个参数则是调用成功后的回调函数，回调函数本身也有一个参数data返回的则是相关的音频视频信息。

通过这个对整个API的使用，把获取到的流信息stream传给video标签的src中即可将视频信息在网页中显示出来。

多个设备的处理

假设现在用户有多个摄像设备，那我们需要让用户进行选择，又应该如何做呢？

首先我们需要给用户提供他自己的设备名称让他进行选择，在这里我们需要使用navigator.mediaDevices.enumerateDevices()这个API 因此我们可以这样写:

显示设备信息

视频输入设备