HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
HTML5 播放 RTSP 视频的实例代码
HTML5 播放 RTSP 视频的实例代码目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外,几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的,因此也不能直接播放 RTSP 流。
在借助一定工具的情况下,可以实现在 Web 页面上播放 RTSP 流。本文介绍的方法可以应用于传统 Web 应用和 Electron 应用中,唯一的区别是将 Electron 应用的主进程当作传统 Web 应用的服务器。
目前已有 RTSP 播放方案的对比
既然是做直播,就需要延迟较低。当摄像头掉线时,也应当有一定的事件提示。处于这两点,对目前已有的已经实现、无需购买许可证的 RTSP 播放方案进行对比(处于原理阶段的暂时不分析)。
我对这四种方式都进行了实现,整体效果最好的还是第4种方案,占用端口少,延迟低,渲染速度快,而且离线事件易于处理。
基于 flv.js 的 RTSP 播放方案
flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放,视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输,视频格式需要为 FLV 格式。
服务器端(主进程)
服务器端采用 express + express-ws 框架进行编写,当有 HTTP 请求发送到指定的地址时,启动 ffmpeg 串流程序,直接将 RTSP 流封装成 FLV 格式的视频流,推送到指定的 WebSocket 响应流中。
import * as express from "express"; import * as expressWebSocket from "express-ws"; import ffmpeg from "fluent-ffmpeg"; import webSocketStream from "websocket-stream/stream"; import WebSocket from "websocket-stream"; import * as http from "http"; function localServer() { let app = express(); app.use(express.static(__dirname)); expressWebSocket(app, null, { perMessageDeflate: true }); app.ws("/rtsp/:id/", rtspRequestHandle) app.listen(8888); console.log("express listened") } function rtspRequestHandle(ws, req) { console.log("rtsp request handle"); const stream = webSocketStream(ws, { binary: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); let url = req.query.url; console.log("rtsp url:", url); console.log("rtsp params:", req.params); try { ffmpeg(url) .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400") // 这里可以添加一些 RTSP 优化的参数 .on("start", function () { console.log(url, "Stream started."); }) .on("codecData", function () { console.log(url, "Stream codecData.") // 摄像机在线处理 }) .on("error", function (err) { console.log(url, "An error occured: ", err.message); }) .on("end", function () { console.log(url, "Stream end!"); // 摄像机断线的处理 }) .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream); } catch (error) { console.log(error); } }
为了实现较低的加载时间,可以为 ffmpeg 添加如下参数:
- analyzeduration 可以降低解析码流所需要的时间
- max_delay 资料上写的具体作用不太记得了,效果没有 analyzeduration 明显
当然这个实现还比较粗糙。当有多个相同地址的请求时,应当增加 ffmpeg 的输出,而不是启动一个新的 ffmpeg 进程串流。
浏览器端(渲染进程)
示例使用 Vue 框架进行页面设计。
<template> <li> <video class="demo-video" ref="player"></video> </li> </template> <script> import flvjs from "flv.js"; export default { props: { rtsp: String, id: String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mounted () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ type: "flv", isLive: true, url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); try { this.player.load(); this.player.play(); } catch (error) { console.log(error); }; } } }, beforeDestroy () { this.player.destory(); } } </script> <style> .demo-video { max-width: 480px; max-height: 360px; } </style>
效果展示
用 Electron 页面展示了 7 个 Hikvison NVR 的摄像头,可以实现低延迟,低 CPU 占用,无花屏现象。由于涉及保密,这里就不放截图了。
同样的方法我播放了 9 个本地 1080p 的视频《白鹿原》,可以看一下这个效果。
播放效果非常好,完全没有卡顿和花屏,CPU 占用率也不高。
示例代码仓库: WhuRS-FGis/html5-rtsp 示例代码仓库:
总结
以上所述是小编给大家介绍的HTML5 播放 RTSP 视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- 用html5做一个音乐的播放器(HTML5自定义mp3播放器源码)
- HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
- html5怎么设置左边input(HTML5中input输入框默认提示文字向左向右移动的示例代码)
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
- html5 data属性
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- html5+css样式代码(详解HTML5中CSS外观属性)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5开发图片(HTML5开发动态音频图的实现)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5标签图片(HTML5图片层叠的实现示例)
- 用于播放视频文件的html5元素(html5自动播放mov格式视频的实例代码)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
热门推荐
- ddos防御实例(浅析云主机防ddos的基础防御)
- 免备案云服务器快吗?使用海外云服务器好不好(免备案云服务器快吗?使用海外云服务器好不好)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- python如何将xls转成xlsx(Python这样操作能存储100多万行的xlsx文件)
- mysql改root密码命令(MySQL root密码的重置方法)
- thinkphp返回json(thinkphp5框架实现数据库读取的数据转换成json格式示例)
- dedecms使用方法(Dedecms织梦CMS搜索页面调用全站最新文章的方法)
- laravel如何使用预处理(Laravel项目中timeAgo字段语言转换的改善方法示例)
- Array.ConvertAll数组间转换
- iis搭建web服务器和ftp教程(Windows实例通过IIS如何搭建多个FTP站点?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9