web端播放rtsp,html5播放rtmp
目前，大多数网络摄像头通过RTSP协议传输视频流，但HTML不支持RTSP流作为标准。除了火狐浏览器可以直接播放RTSP流，几乎没有其他浏览器可以直接播放RTSP流。电子应用是基于Chromium内核的，所以不能直接播放RTSP流。
借助某些工具，RTSP流可以在网页上播放。本文介绍的方法可以应用于传统的Web应用程序和电子应用程序，唯一不同的是电子应用程序的主进程被视为传统Web应用程序的服务器。
目前已有 RTSP 播放方案的对比
既然是直播，就需要更低的延迟。当摄像头断开时，也应该有一定的事件提示。在这两点上，本文比较了现有的已经实现的不需要购买许可证的RTSP广播方案(在原理阶段暂不分析)。
四种方法我都实现了，整体效果最好的是第四种，占用端口少，延迟低，渲染速度快，易于处理离线事件。
基于 flv.js 的 RTSP 播放方案
Flv.js是哔哩哔哩的开源HTML5浏览器。视频播放取决于媒体源扩展。视频通过HTTP-FLV或WebSocket-FLV协议传输，视频格式需要为FLV格式。
服务器端（主进程）
服务器使用express express-ws框架编写。当一个HTTP请求发送到指定地址时，它启动ffmpeg流程序，直接将RTSP流封装成FLV格式的视频流，推送到指定的WebSocket响应流。
import * as express from‘express’；从“express-ws”导入*作为expressWebSocket从“fluent-ffmpeg”导入ffmpeg；从“websocket-stream/stream”导入webSocketStream从“websocket-stream”导入web socket；从“http”导入*作为http；函数local server(){ 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 )}函数rtspRequestHandle(ws，req) { console.log(rtsp请求句柄)；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)；尝试{ffmpeg (URL)。addinputoption (-RTSP _传输， TCP ，-缓冲区_大小， 102400 )//这里可以添加一些RTSP优化的参数。On (start ，function () {console.log (URL， streamstart })。on(编解码器数据，function () {console.log (URL，流编解码器数据。))//摄像头在线处理})。on (error ，function (err) {console.log (URL，出现错误：，err . message)；}) .on(end ，function () { console.log(url， Stream end！);//摄像头断线的处理})。输出格式(“flv”)。视频编解码器(“复制”)。Noaudio()。管道(流)；} catch(error){ console . log(error)；}}为了缩短加载时间，可以将以下参数添加到ffmpeg中：
Analyzeduration可以减少分析代码流所需的时间。max_delay数据上写的具体函数我不记得了，但是效果没有analyzeduration那么明显。当然这个实现还是比较粗糙的。当存在具有相同地址的多个请求时，应该增加ffmpeg的输出，而不是开始新的ffmpeg处理流。
浏览器端（渲染进程）
使用示例Vue框架进行页面设计。
template div video class= demo-video ref= player /video/div/template script从 flv.js 导入flv js；导出默认{ props: { rtsp: String，id: String }，/* * * * @返回{{player: flvjs。player } } */data(){ return { player:null } }，mounted(){ if(flv js . issupported()){ let video=this。$ refs.playerif(video){ this . player=flvjs . create player({ type: flv ，isLive: true，URL:` ws://localhost:8888/RTSP/$ { this . id }/？URL=$ { this . RTSP } `})；this.player.attachMediaElement(视频)；试试{ this . player . load()；this . player . play()；} catch(error){ console . log(error)；};} } }，before destroy(){ this . player . destory()；}}/scriptstyle。演示视频{ max-width:480 px；max-height:360 px；}/style效果展示
海康威视NVR的七个摄像头显示在电子页面上，可以做到低延迟、低CPU使用率、无花屏现象。因为涉及到保密，这里就不截图了。
同样的，我玩了9个本地1080p视频《白鹿原》。你可以看看这个效果。
播放效果很好，完全没有卡顿和花屏，CPU占用率也不高。
示例代码库：WhuRS-FGis/html5-rtsp示例代码库：
总结
以上是边肖介绍的HTML5播放RTSP视频的示例代码。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。