无需Flash录视频-HTML5中级进阶

TML5的权限越来越大了，浏览器可以直接调用摄像头、麦克风了，好激动啊。我们要用纯洁的HTML代码造出自己的天地。

视频采集

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

1.安全环境

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

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

而在设备枚举enumerateDevices()时，虽然不会报错，但是他隐藏了设备label。

注意：第一次在一个安全页面下执行enumerateDevices()时也会隐藏label，在允许使用摄像头等设备后，第二次执行才会显示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. Seehttps://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/[getUserMediaTestPage]时，就会顺利的执行这些API了。

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

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

2.设备枚举

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

代码如下:

</select>

<br>

</select>

navigator.mediaDevices.enumerateDevices().then(function (data) {

data.forEach(function (item) {

if(item.kind=="audioinput"){ //麦克风

document.getElementById("audioDevice").innerHTML += "<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}else if(item.kind=="videoinput"){ //摄像头

document.getElementById("videoDevice").innerHTML += "<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}

})

},function (error) {

console.log(error);

})

</script>

效果如下图，和浏览器自己获取的一模一样。

注意：上图的实例中，浏览器地址栏最右边的摄像头标识是需要使用 getUserMedia()函数时才会出现。

var getUserMedia = navigator.webkitGetUserMedia; //Chrome浏览器的方法

getUserMedia.call(navigator, {

video:true, // 开启音频

audio:true // 开启视频

}, function(stream){

console.log(stream); // 成功获取媒体流

}, function(error){

//处理媒体流创建失败错误

});

</script>

这时候可以通过浏览器给出的菜单下拉选择设备。

3.设置参数，预览

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

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

代码如下：

var getUserMedia = navigator.webkitGetUserMedia ;

getUserMedia.call(navigator, {

"audio":{

"mandatory":{

"sourceId":"" // 指定设备的 deviceId

}

"video":{

"optional":[

{"minWidth":400},

{"maxWidth":400}, // 数字类型，固定宽度

{"minHeight":220}，

{"maxHeight":220}, // 数字类型，固定高度

{"frameRate":"12"} // 帧率

],"mandatory":{

"sourceId":"" // 指定设备的 deviceId

}

}, function(stream){

//绑定本地媒体流到video标签用于输出

document.getElementById("video").src = URL.createObjectURL(stream);

}, function(error){

//处理媒体流创建失败错误

});

</script>

输出的视频流通过blob对象链接绑定到video标签输出。

这个deviceId就是从上文设备枚举 enumerateDevices() 获取到的。

两种设备，如果有一个deviceId填写不正确，就会报出一个DevicesNotFoundError的错误。

而且一旦指定了设备后，浏览器自己的设备选择就会变成灰色不可选。

视频的宽高，并不会因为填写的数值比例不合法而失真。

比如你设定了宽度30，高度100，那么他会从视频中心截取 30x100 的画面，而不是把原画面挤压到这个30x100的尺寸。

效果如下：

如果您的预览一片漆黑，或者只有一个小黑点，那么说明您的摄像头正在被占用...

吐槽：这个getUserMedia()函数的参数，w3的官方文档链接如下：

https://www.w3.org/TR/mediacapture-streams/

可是Chrome并没有遵循它，而且差距还挺大...

视频保存

1. 格式支持

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对象，并从浏览器下载存为视频文件。

代码如下：

var getUserMedia = navigator.webkitGetUserMedia ;

var g_stream = null, g_recorder = null;

function startPreview(){

getUserMedia.call(navigator, {

video:true,

audio:true

}, function(stream){

g_stream = stream;

}, function(error){

});

}

function stopRecording(){

g_recorder.stop();

}

function startRecording(){

var chunks = [];

g_recorder = new MediaRecorder(g_stream,{mimeType:"video/webm"});

g_recorder.ondataavailable = function(e) {

chunks.push(e.data);

}

g_recorder.onstop = function(e) {

var blob = new Blob(chunks, { 'type' : 'video/webm' });

var audioURL = URL.createObjectURL(blob);

window.open(audioURL);

}

g_recorder.start();

}

</script>

注意：本例并没有填写视频文件头，所以保存出来的视频文件没有时间轨，无法快进和跳跃。可以用格式工厂转

“莫基了”上面有一个录制音频的例子传送门：http://t.cn/RvxZAeo

这篇文章的DEMO请戳这里：http://t.cn/RVt9Q6I

☞―――――――――↓―――――――――☜

相关阅读

多屏互动——H5中级进阶
前端，想说爱你不容易！
无需Flash实现图片裁剪——HTML5中级进阶

作者信息

作者来自力谱宿云 LeapCloud 团队_UX成员：王诗诗【原创】
力谱宿云 LeapCloud 团队首发：https://blog.maxleap.cn/archives/1197
欢迎关注微信订阅号：MaxLeap_yidongyanfa

言

前不久抽空对目前比较火的视频直播，做了下研究与探索，了解其整体实现流程，以及探讨移动端HTML5直播可行性方案。

发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好，接下来将围绕这两种视频流协议来展开H5直播主题分享。

一、视频流协议HLS与RTMP

1. HTTP Live Streaming

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP，而一个提供 HLS 的服务器需要做两件事：

编码：以 H.263 格式对图像进行编码，以 MP3 或者 HE-AAC 对声音进行编码，最终打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把编码好的 TS 文件等长切分成后缀为 ts 的小文件，并生成一个 .m3u8 的纯文本索引文件；浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成，m3u8 必须动态更新，ts 可以走 CDN。一个典型的 m3u8 文件格式如下：

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应，所以适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象非常明显。如果每个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

对于支持 HLS 的浏览器来说，直接这样写就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

注意：HLS 在 PC 端仅支持safari浏览器，类似chrome浏览器使用HTML5 video

标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

程序猿的生活：web前端全栈资料粉丝福利（面试题、视频、资料笔记，进阶路线）zhuanlan.zhihu.com/p/136454207

2. Real Time Messaging Protocol

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。

虽然无法在iOS的H5页面播放，但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。浏览器端，HTML5 video

标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>

3. 视频流协议HLS与RTMP对比

二、直播形式

目前直播展示形式，通常以YY直播、映客直播这种页面居多，可以看到其结构可以分成三层：

① 背景视频层

② 关注、评论模块

③ 点赞动画

而现行H5类似直播页面，实现技术难点不大，其可以通过实现方式分为：

① 底部视频背景使用video视频标签实现播放

② 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现

③ 点赞利用 CSS3 动画

了解完直播形式之后，接下来整体了解直播流程。

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

三、直播整体流程

直播整体流程大致可分为：

视频采集端：可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风，目前以移动端手机视频为主。

直播流视频服务端：一台Nginx服务器，采集视频录制端传输的视频流(H264/ACC编码)，由服务器端进行解析编码，推送RTMP/HLS格式视频流至视频播放端。

视频播放端：可以是电脑上的播放器（QuickTime Player、VLC），手机端的native播放器，还有就是 H5 的video标签等，目前还是以手机端的native播放器为主。

（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

四、H5 录制视频

对于H5视频录制，可以使用强大的 webRTC （Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。

使用 webRTC 录制视频基本流程

① 调用 window.navigator.webkitGetUserMedia()

获取用户的PC摄像头视频数据。

② 将获取到视频流数据转换成 window.webkitRTCPeerConnection

(一种视频流数据格式)。

③ 利用 WebScoket

将视频流数据传输到服务端。

注意：

虽然Google一直在推WebRTC，目前已有不少成型的产品出现，但是大部分移动端的浏览器还不支持 webRTC（最新iOS 10.0也不支持），所以真正的视频录制还是要靠客户端（iOS,Android）来实现,效果会好一些。

WebRTC支持度

iOS原生应用调用摄像头录制视频流程

① 音视频的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。

② 对视频进行H264编码，对音频进行AAC编码，在iOS中分别有已经封装好的编码库（x264编码、faac编码、ffmpeg编码）来实现对音视频的编码。

③ 对编码后的音、视频数据进行组装封包。

④ 建立RTMP连接并上推到服务端。

五、搭建Nginx+Rtmp直播流服务

安装nginx、nginx-rtmp-module

① 先clone nginx项目到本地：

brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（路径/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http节点之前添加 rtmp 的配置内容：

② 在http中添加 hls 的配置

3. 重启nginx服务

重启nginx服务，浏览器中输入 http://localhost:8080，是否出现欢迎界面确定nginx重启成功。

nginx -s reload

六、直播流转换格式、编码推流

当服务器端接收到采集视频录制端传输过来的视频流时，需要对其进行解析编码，推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案，如x264编码、faac编码、ffmpeg编码等。鉴于 FFmpeg 工具集合了多种音频、视频格式编码，我们可以优先选用FFmpeg进行转换格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

视频文件地址：/Users/gao/Desktop/video/test.mp4

推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意：

当我们进行推流之后，可以安装VLC、ffplay（支持rtmp协议的视频播放器）本地拉流进行演示

3.FFmpeg推流命令

① 视频文件进行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流摄像头＋桌面+麦克风录制进行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令，请参考：

FFmpeg处理RTMP流媒体的命令大全

FFmpeg常用推流命令

七、H5 直播视频播放

移动端iOS和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频。

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

八、总结

本文从视频采集上传，服务器处理视频推流，以及H5页面播放直播视频一整套流程,具体阐述了直播实现原理，实现过程中会遇到很多性能优化问题。

① H5 HLS 限制必须是H264+AAC编码。

② H5 HLS 播放卡顿问题，server 端可以做好分片策略，将 ts 文件放在 CDN 上，前端可尽量做到 DNS 缓存等。

③ H5 直播为了达到更好的实时互动，也可以采用RTMP协议，通过video.js 实现播放。

原文 https://zhuanlan.zhihu.com/p/146323842

web技术将成为移动设备上的开发平台，只是目前该技术可能尚未成熟。基于HTML5的开发方式有两种：一种是混合式开发，一种是移动网页应用。怎么在移动互联网中应用html5，现在渥瑞达HTML5培训老师在这里提醒大家几点：

1. 目前主流的都是混合开发，所以对团队、技术人员的要求比较高，需要掌握多种不同的技术(JAVA、Obejective-c、HTML5、JAVASCRIPT、CSS/CSS3)，这种混合的开发模式。

2. 混合应用是一种需要下载，但有部分或者所有用户界面植入了浏览器元素的应用程序。对用户来说，混合应用与原生应用并无二致——它们都需要通过应用商店渠道下载，都可以保存的在手机，运行方式与原生应用并无差别。

3. 混合应用的HTML页面可通过网络服务器传送，但这一点并非必备条件。如果要提高运行性能，混合应用还可以植入一个包含其所需的网页资源的副本，以便用户快速访问内容，而不必等待网络服务器将内容传送过来。

4. 混合应用必须通过应用商店下载。

支持混合开发的javascript框架：JavaScript工具包

移动网页应用

1. 必须连网

2. 在浏览器运行，用户不需要下载安装就可以。

3. 需要等待网络服务器将内容传送到手机才可以

4.目前还不能访问摄像头、麦克风、通讯录等手机功能。

这是渥瑞达老师为大家总结的应用问题，相信大家对于如何在移动互联网应用html5已经有了初步的了解了吧。想要了解更多html5在移动互联网的应用问题可以关注渥瑞达培训课程。

在线咨询

上一篇：第47节 HTML5扩展-操作元素内容-零点程序员-王唯
下一篇：把图片转换成ico格式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

无需Flash录视频-HTML5中级进阶

言

一、视频流协议HLS与RTMP

二、直播形式

三、直播整体流程

四、H5 录制视频

五、搭建Nginx+Rtmp直播流服务

六、直播流转换格式、编码推流

七、H5 直播视频播放

八、总结

您的项目需求