使用 WebSockets 进行 HTML5 视频直播

这篇文章是2014年发的,已经过时了!不要再评论了!

最近在做的一个小项目需要用到相关技术,找到这篇文章貌似不错,于是就翻译转载上来了。
Recently I'm interesting in these technologies and I'm working on a project related to it. I've found this useful article so I translated and posted it here.

原文地址 / Original post:
HTML5 Live Video Streaming via WebSockets - PhobosLab

笔者之前做一个实时监控应用的时候,曾搜索过一些将 iPhone 的摄像头拍摄的画面实时传输到浏览器的方案,一个都没有。

就 HTML5 来说,视频(实时)直播是一个很悲催的活,HTML5 视频目前还没有一个正式的流式传输支持,Safari 支持很蹩脚的 HTTP Live Streaming 并且也即将有 Media Source Extension 规范和 MPEG-DASH。但所有这些方案都是将视频分成小片,由浏览器单独下载,因此会产生最小五秒钟的延迟。

下面是一个完全不同的方案,可以支持所有现代浏览器:Firefox、Chrome、Safari、Mobile Safari、Android 版 Chrome 甚至是 IE10。

原文的这个位置提供了一个_伪_直播例子。

这套方案向后兼容,没有用到什么新奇技术,目前暂时不支持音频。但它出乎意料地好用。

来自摄像头的视频被 ffmpeg 编码,然后通过 HTTP 传递给一个 Node.js 写的小脚本;脚本会将这条 MPEG 视频流通过 WebSockets 分发给所有链接的浏览器;浏览器使用 JavaScript 解码 MPEG 视频流并将解码后的画面渲染到 Canvas 元素上。

你甚至可以用树莓派来传输视频。可能会有点慢,但是笔者测试过以 30fps 的帧率实时编码 320x240 视频不成问题。对笔者来说这是最好的树莓派视频方案。

下面是构建步骤。首先你需要取得最新版本的 ffmpeg,最新的安装包可以从 deb-multimedia 获得。如果你使用 Linux,你的摄像头应该在位于 /dev/video0/dev/video1;在 OS X 或 Windows 上你可以用 VLC

确保用来分发视频流的服务器安装了 Node.js。下载 phoboslab/jsmpeg 项目的 stream-server.js 脚本。安装 WebSocket 包 ws 并启动服务器:

npm install ws
node stream-server.js 你的密码

这里的密码是用来确保不会有好奇宝宝来劫持你的视频流用的。如果服务器运行正常,你应该会看到这样的输出:

Listening for MPEG Stream on http://127.0.0.1:8082/<secret>/<width>/<height>
Awaiting WebSocket connections on ws://127.0.0.1:8084/

服务器启动后,你就可以启动 ffmpeg 并将它指向到正在运行的这个域名和端口了:

ffmpeg -s 640x480 -f video4linux2 -i /dev/video0 -f mpeg1video -b 800k -r 30 http://example.com:8082/你的密码/640/480/

这条命令会开始从摄像头捕捉 640x480 的视频,并编码成 30fps 码率 800kbps 的 MPEG 视频。编码后的视频会通过 HTTP 被发送到所指定的服务器和端口。确保密码正确,URL 中的长和宽也需要正确指定,否则服务器无法正确判断当前的分辨率。

在树莓派上你可能需要将分辨率降至 320x240 来确保编码速度仍能维持 30fps。

要观看直播,需要从前文提到的 jsmpeg 项目中下载 stream-example.html 和 jsmpg.js 文件,更改 stream-example.html 中的 WebSocket URL 为你的服务器地址,并使用你喜欢的浏览器打开。

如果一切正常,你就能看到少于 100ms 延迟的流畅的摄像头画面。很好很强大对不?

更便捷的方案请围观原文的 Instant Webcam

只是备忘一下,近期会再发一篇博文来总结一下各个方案的实际使用效果。

重复一次原文地址 / Original post:
HTML5 Live Video Streaming via WebSockets - PhobosLab


1.1k 声望
47 粉丝
0 条评论
推荐阅读
小试 Material Design:一大波养眼妹纸
嗯……就是偶然看到了一个网站,于是经得站长同意后,决定写一个~~极致单手操作体验的~~ App 练练~~手~~。 源代码戳:xingrz/meizhi APK 下载回复 1024 咳,这里才是重点 主要用了这些玩意: Material Design Volle...

XiNGRZ1阅读 5.7k评论 3

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.2k评论 9

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(五):数据库访问
回顾 从零搭建 Node.js 企业级 Web 服务器(一):接口与分层,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,控制层与服务层实现了业务处理过程,模型层定义了业务实体并以 对象-关系...

乌柏木34阅读 4.6k评论 9

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
1.1k 声望
47 粉丝
宣传栏