使用websocket做视频直播

简介: 使用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

目录
相关文章
|
移动开发 编解码 Linux
EasyPlayer.js直播与回放功能视频开发实战过程记录
EasyPlayer.js直播与回放功能视频开发实战过程记录
1315 0
|
算法 网络安全 数据安全/隐私保护
使用 openssl 生成证书
一、openssl 简介 openssl 是目前最流行的 SSL 密码库工具,其提供了一个通用、健壮、功能完备的工具套件,用以支持SSL/TLS 协议的实现。官网:https://www.openssl.
9081 0
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
258563 0
|
6月前
|
人工智能 Java 程序员
JManus - 面向 Java 开发者的开源通用智能体
JManus 是一个以 Java 为核心、完全开源的 OpenManus 实现,隶属于 Spring AI Alibaba 项目。它旨在让 Java 程序员更便捷地使用 AI 技术,支持多 Agent 框架、网页配置 Agent、MCP 协议和 PLAN-ACT 模式。项目在 GitHub 上已获近 3k star,可集成多个大模型如 Claude 3.5 和 Qwen3。开发者可通过 IDE 或 Maven 快速运行项目,体验智能问答与工具调用功能。欢迎参与开源共建,推动通用 AI Agent 框架发展。
9554 64
|
12月前
|
JSON 前端开发 JavaScript
Proxy + Fetch 实现类似于 axios 的基础 API
本项目通过 Proxy 和 Fetch 技术实现了一个类似 axios 的基础 API,支持请求拦截、响应处理等功能,简化了前端网络请求的开发流程,提升了代码的可维护性和扩展性。
|
供应链 安全 算法
Github 宣布在2023年底前必须使用双重验证
2FA(双因素身份验证)是一种增强在线账户安全性的方法,要求用户提供两种不同类型的验证信息才能登录。常见的验证因素包括密码、手机验证码、指纹等。启用2FA能显著提升账户安全性,防止因密码泄露导致的账户被盗。对于开发者而言,尤其是在使用如GitHub这样的平台时,启用2FA尤为重要,可有效抵御恶意攻击,保护代码和个人信息的安全。设置2FA通常通过安装TOTP应用(如Microsoft Authenticator)并按照平台指引完成相关配置。即使手机App被卸载,用户也可通过保存的恢复码登录账户。
659 3
Github 宣布在2023年底前必须使用双重验证
|
监控 安全 数据安全/隐私保护
Rootkit工作原理及其检测方法
【8月更文挑战第31天】
787 0
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
1454 5
npm install 太慢?解决方法
npm install 太慢?解决方法
11133 0
|
Go 调度 C#
Unity——协程(Coroutine)
Unity——协程(Coroutine)
671 0