摘要：比如就会报出警告，并执行出错。视频的宽高，并不会因为填写的数值比例不合法而失真。通过绑定事件，来获取视频片段数据，并在内存中累积。执行之后会停止触发事件。录制结束后，把累计的片段数据保存为对象，并从浏览器下载存为视频文件。
前言
HTML5的权限越来越大了，浏览器可以直接调用摄像头、麦克风了，好激动啊。我们要用纯洁的HTML代码造出自己的天地。
视频采集本篇介绍的栗子 都是在chrome 47 版本以上的，低版本的可能会出现白屏和错误。
1.安全环境随着Chrome版本的升高，安全性问题也越来越被重视，较新版本的Chrome浏览器在调用一些API时需要页面处在安全环境中。本篇文章所介绍的API函数，都需要在安全环境中执行。如果处在非安全环境下 ( http页面 ) 这些API就会有意想不到的问题。
比如 getUserMedia()就会报出警告，并执行出错。而在设备枚举enumerateDevices()时，虽然不会报错，但是他隐藏了设备label。
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
根据谷歌的意思，常用的安全环境有如下
http://localhost
http://127.0.0.1
https 开头的地址页面
如果你做了一个视频测试的页面，想嘚瑟给局域网的其他人，但是又没有域名证书怎么办？
这时候只能通过修改其他人的hosts文件了
比如你的测试服务器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：
#localhost 127.0.0.1 localhost 192.168.2.18
当使用别人的Chrome浏览器访问 http://localhost/[getUserMedi...时，就会顺利的执行这些API了。
但是移动端的浏览器并不认localhost，就算你修改了hosts ，移动端的浏览器根本不理你，解析都不解析。
所以想在手机上测试，只能老老实实申请个证书了。
在开启摄像头之前，先要把可以使用的麦克风和摄像头 ( 输入设备 ) 列出来，如果没有这两样设备也就无法继续。
代码如下:
效果如下图，和浏览器自己获取的一模一样。
注意：上图的实例中，浏览器地址栏最右边的摄像头标识是需要使用 getUserMedia()函数时才会出现。
这时候可以通过浏览器给出的菜单下拉选择设备。
3.设置参数，预览我们可以通过代码来指定使用哪个摄像头和麦克风设备。
也可以通过代码设置视频的宽、高和帧率。
代码如下：
输出的视频流通过blob对象链接绑定到video标签输出。
这个deviceId就是从上文设备枚举 enumerateDevices() 获取到的。
两种设备，如果有一个deviceId填写不正确，就会报出一个DevicesNotFoundError的错误。而且一旦指定了设备后，浏览器自己的设备选择就会变成灰色不可选。
视频的宽高，并不会因为填写的数值比例不合法而失真。
比如你设定了宽度30，高度100，那么他会从视频中心截取 30x100 的画面，而不是把原画面挤压到这个30x100的尺寸。
效果如下：
如果您的预览一片漆黑，或者只有一个小黑点，那么说明您的摄像头正在被占用...
吐槽：这个getUserMedia()函数的参数，w3的官方文档链接如下：
https://www.w3.org/TR/mediaca...
可是Chrome并没有遵循它，而且差距还挺大...
Chrome浏览器是大力推广webm的视频格式的。可以用MediaRecorder.isTypeSupported("video/webm")来测试是否支持这种类型的编码。如果返回true，那么我们录制的视频就可以被保存为这种指定的格式。如果不指定，那么将会使用浏览器自动指定的文件格式。文档原话如下
If this paramater is not specified, the UA will use a platform-specific default format.
但是这个默认值却无法直接获取，全靠猜...
2. 视频录制 MediaRecorder我们使用 MediaRecorder来录制视频，参数是通过getUserMedia()获取的媒体流。
通过绑定ondataavailable事件，来获取视频片段数据，并在内存中累积。
录制的开始和结束分别使用 start和stop 函数。
执行start之后会周期性触发ondataavailable事件。
执行stop之后会停止触发ondataavailable事件。
录制结束后，把累计的片段数据保存为blob对象，并从浏览器下载存为视频文件。
代码如下：
注意：本例并没有填写视频文件头，所以保存出来的视频文件没有时间轨，无法快进和跳跃。可以用格式工厂转
“莫基了”上面有一个录制音频的例子 传送门
这篇文章的DEMO请戳 这里
相关阅读
多屏互动——H5中级进阶
前端，想说爱你不容易！
无需Flash实现图片裁剪——HTML5中级进阶
作者信息
作者来自力谱宿云 LeapCloud 团队_UX成员：王诗诗 【原创】
力谱宿云 LeapCloud 团队首发：https://blog.maxleap.cn/archi...
欢迎关注微信订阅号：MaxLeap_yidongyanfa
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/11762.html
摘要：比如就会报出警告，并执行出错。视频的宽高，并不会因为填写的数值比例不合法而失真。通过绑定事件，来获取视频片段数据，并在内存中累积。执行之后会停止触发事件。录制结束后，把累计的片段数据保存为对象，并从浏览器下载存为视频文件。 前言 HTML5的权限越来越大了，浏览器可以直接调用摄像头、麦克风了，好激动啊。我们要用纯洁的HTML代码造出自己的天地。 视频采集 本篇介绍的栗子 都是在chro...
摘要：需求就是那么简单，在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。 前言 图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 需求就是那么简单，在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是，将图片和裁剪参数（x...
摘要：需求就是那么简单，在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。 前言 图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 需求就是那么简单，在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是，将图片和裁剪参数（x...
摘要：，是否自动播放，可以为或，默认为，参数不为时播放器加载完成后均为暂停状态。，视频开始前广告播放的秒数，只针对或图片有效，默认为。，视频结束后的动作，停止播放并发送，是不发送且重新循环播放，停止播放，默认为。 网页中常见的功能就是播放视频，下面介绍的这个ckplayer.js既可以在pc端播放，也可以在手机网页上播放。 可调用flash也可以调用html5播放器： var ...
摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。 今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...
阅读 1192·2021-11-19 09:40
阅读 910·2021-09-22 15:43
阅读 2100·2021-09-22 15:32
阅读 4031·2021-09-22 15:11
阅读 1921·2019-08-30 15:55
阅读 2334·2019-08-30 15:54
阅读 863·2019-08-30 15:44
阅读 873·2019-08-29 13:26
