使用websocket做视频直播

本文涉及的产品
视频直播,500GB 1个月
简介: 使用websocket做视频直播

做的一个小项目需要用到相关技术,找到这篇文章貌似不错,于是就翻译转载上来了。

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 的帧率实时编码 320×240 视频不成问题。对笔者来说这是最好的树莓派视频方案。


下面是构建步骤。首先你需要取得最新版本的 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/

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


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


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


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


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


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


重复一次原文地址 / Original post:

HTML5 Live Video Streaming via WebSockets – PhobosLab

目录
相关文章
|
Web App开发 移动开发 JavaScript
【视频直播篇一】入门篇
公司产品要集成视频直播,原来找的一家第三方厂家已经对接好了,后来领导说成本太高要换。拿到同行的产品来看,发现他们用的是rtmp协议的直播流。领导说要上这个,把这个任务交给我,当时都蒙圈了。这啥玩意?!从来没见过啊。领导的话就是命令,没办法,硬着头皮也要上。 花了几天时间稍微入了门,在这里总结一下。 首先直播中有两个非常重要的概念:推流、拉流。通俗来讲,推流指的就是我们在直播平台看到的主播那一端采集摄像头数据推送到视频流服务器。而拉流就是观众这一段使用pc、移动端播放直播视频了。
506 0
|
1月前
|
Web App开发 编解码 监控
直播协议
【10月更文挑战第26天】不同的直播协议具有不同的特点和应用场景。在选择直播协议时,需要根据直播的需求、目标受众、网络环境等因素进行综合考虑,以选择最适合的直播协议,确保直播的流畅性、稳定性和高质量。
|
7月前
|
编解码 安全 视频直播
为了在智能媒体服务中实现超低延时的直播效果,您需要购买和使用视频直播服务
【2月更文挑战第14天】为了在智能媒体服务中实现超低延时的直播效果,您需要购买和使用视频直播服务
68 3
|
视频直播 定位技术 UED
海外视频直播源码技术视频直播间的搭建
大家听到这里是不是感觉这个源码平台非常的熟悉,没错,这个源码平台就海外视频直播源码平台,而我说的这个房间就是视频直播间,主持人就是视频直播间内的主播,今天我就为大家分享海外视频直播源码技术视频直播间的搭建。
海外视频直播源码技术视频直播间的搭建
|
视频直播
【视频直播篇七】Aliplayer的使用
本文着重介绍Aliplayer的使用
1048 0
|
Web App开发
【视频点播】阿里云视频点播如何获取视频播放的URL
展示如何使用阿里云视频点播服务获取播放地址.
34997 0
【视频点播】阿里云视频点播如何获取视频播放的URL
|
存储 编解码 弹性计算
阿里云视频直播服务介绍|学习笔记
快速学习阿里云视频直播服务介绍
阿里云视频直播服务介绍|学习笔记
|
JavaScript 视频直播 5G
基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能
由于5g网络的光速推广,视频业务又被推上了风口浪尖,在2019年初我们还在谈论照片,短视频等关键字,而进入2020年,我们津津乐道的就只有视频,视频,还是视频,普通人拿起手机做直播早已不是奢望。
基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能
|
编解码 移动开发 小程序
视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等
本文将通过介绍实时视频直播技术体系,包括常用的推拉流架构、传输协议等,让你对现今主流的视频直播技术有一个基本的认知。
461 1
视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等
|
弹性计算 移动开发 Ubuntu
阿里云上搭建HLS直播服务器
通过将摄像头的rtmp视频流推送到服务器,转换成HLS(HTTP Live Streaming)格式,用户可以通过H5浏览器直接打开直播视频。
795 0