无需Flash录视频,HTML5中级进阶 - 行业资讯 - 肥雀云

视频采集

本篇介绍的栗子都是在chrome 47版本以上的,低版本的可能会出现白屏和错误。

1。安全环境

随着铬版本的升高、安全性问题也越来越被重视,较新版本的Chrome浏览器在调用一些API时需要页面处在安全环境中。本篇文章所介绍的API函数,都需要在安全环境中执行。如果处在非安全环境下(http页面)这些API就会有意想不到的问题。

比如getUserMedia()就会报出警告,并执行出错。

而在设备枚举enumerateDevices()时,虽然不会报的错,但是他隐藏了设备标签。

注意:第一次在一个安全页面下执行enumerateDevices()时也会隐藏标签,在允许使用摄像头等设备后,第二次执行才会显示标签。

getUserMedia()不再工作> <李> http://localhost

<李> http://127.0.0.1

<李>
https开头的地址页面

如果你做了一个视频测试的页面,想嘚瑟给局域网的其他人,但是又没有域名证书怎么办?

这时候只能通过修改其他人的主机文件了

比如你的测试服务器IP地址是192.168.2.18,那么其他人的主机文件修改如下:
# localhost 127.0.0.1 　　localhost 192.168.2.18
当使用别人的Chrome浏览器访问,http://localhost/(getUserMediaTestPage)时,就会顺利的执行这些API了。

但是移动端的浏览器并不认localhost,就算你修改了主机,移动端的浏览器根本不理你,解析都不解析。

所以想在手机上测试,只能老老实实申请个证书了。

2。设备枚举

在开启摄像头之前,先要把可以使用的麦克风和摄像头(输入设备)列出来,如果没有这两样设备也就无法继续。

代码如下:
& lt; label 为=癮udioDevice祝辞,录音设备:,& lt;/label> 　　& lt; select id=癮udioDevice”比; 　　　　& lt;/select> 　　& lt; br> 　　& lt; label =" videoDevice "祝辞,录影设备:,& lt;/label> 　　& lt; select id=皏ideoDevice”比; 　　　　& lt;/select> 　　　　& lt; script> 　　navigator.mediaDevices.enumerateDevices () (function (数据),{ 　　data.forEach才能(function (项),{ 　　,,,如果(item.kind==癮udioinput”){,//麦克风　　,,,,. getelementbyid (“audioDevice”) .innerHTML +=,,“& lt; option value=" " +, item.deviceId +”“在”,+,item.label +,“时间/option>, & lt;” 　　,,,}else 如果(item.kind==皏ideoinput”){,//摄像头　　,,,,. getelementbyid (“videoDevice”) .innerHTML +=,,“& lt; option value=" " +, item.deviceId +”“在”,+,item.label +,“时间/option>, & lt;” 　　,,,} 　　})才能　　},function (错误),{ 　　console.log才能(错误); 　　}）　　& lt;/script>
效果如下图,和浏览器自己获取的一模一样。

注意:上图的实例中,浏览器地址栏最右边的摄像头标识是需要使用getUserMedia()函数时才会出现。
& lt; script> 　　var 才能;getUserMedia =, navigator.webkitGetUserMedia;,//铬浏览器的方法　　,,,getUserMedia.call(导航器,,{ 　　,,,,,视频:真的,,//,开启音频　　,,,,,音频:true ,//,开启视频　　,,,},,函数(流){ 　　,,,,,,,console.log(流),,//,成功获取媒体流　　,,,},,函数(错误){ 　　,,,,,,,//处理媒体流创建失败错误　　,,,}); 　　& lt;/script>
这时候可以通过浏览器给出的菜单下拉选择设备。

3。设置参数,预览

我们可以通过代码来指定使用哪个摄像头和麦克风设备。

也可以通过代码设置视频的宽,高和帧率。

代码如下:
& lt; video id=笆悠怠?autoplay> & lt;/video>, & lt; !——,一定要有,autoplay ——比; 　　　　& lt; script> 　　var getUserMedia =, navigator.webkitGetUserMedia ; 　　　　getUserMedia.call(导航器,,{ 　　“音频”:{才能　　,,,“强制”:{ 　　,,,,," sourceId ": " ",//,指定设备的,的deviceId 　　,,,} 　　,,}, 　　“视频”:{才能　　,,,,,,,“可选的”:[, 　　,,,,,,,,,,,{“minWidth”: 400}, 　　,,,,,,,,,,,{“maxWidth”: 400},,,//,数字类型,固定宽度　　,,,,,,,,,,,{“minHeight”: 220},, 　　,,,,,{“maxHeight”: 220},,,//,数字类型,固定高度　　,,,,,,,,,,,{“帧速率”:“12”},,//,帧率　　,,,,,,,,“强制”:{ 　　,,,,,,," sourceId ": " ",//,指定设备的,的deviceId 　　,,,,,,,} 　　,,,,,} 　　},,函数(流){ 　　,,,//绑定本地媒体流到视频标签用于输出　　,,,. getelementbyid(“视频”).src =, URL.createObjectURL(流); 　　},,函数(错误){ 　　,,,//处理媒体流创建失败错误　　}); 　　　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null
无需Flash录视频,HTML5中级进阶