1. 首頁 > 科技 > >

vivo y33s|rtsp流瀏覽器播放方案

vivo y33s

vivo y33s|rtsp流瀏覽器播放方案

文章圖片

vivo y33s|rtsp流瀏覽器播放方案

文章圖片


rtsp流在主流瀏覽器并不支持直接播放 。 比如大華的視頻流：rtsp://admin:123456@
192.168.10.129/cam/realmonitor?channel=1&subtype=0 ， 用vlc可以直接播放 。 但在瀏覽器會報ERR_UNKNOWN_URL_SCHEME 。 那如何在瀏覽器中播放呢 。
以下列出幾種方案 。
1、安裝插件（chrome最新版基本都不支持）
類如：kurento ， vlc插件（谷歌瀏覽器版本41以下)vgx插件(不支持高版本 ， chrome72.0版本可用)等 。
2、安裝軟件（中間件 ， 基本都付費）
類如：Appemit（調用vlc插件播放rtsp） ， 可以免安裝的 ， 目前只能windows免費版會有提示 。
猿大師中間件（底層調用VLC的ActiveX控件 ， 實現在主流瀏覽器網頁中內嵌播放多路RTSP的實時視頻流） ， 中間件收費的 。
PluginOK(牛插)中間件 。 底層調用ActiveX控件VlcOcx.dll 。 （商業用途需付費使用）
3、服務器拉流轉發及協議轉換
示意圖如下所示：

推流--------------服務器轉發--------------拉流
方法一覽：
avlc軟件串流到http協議 ， 網頁顯示幾個視頻需啟動幾個vlc只適合應急場景 。
【vivo y33s|rtsp流瀏覽器播放方案】bhtml5 + websocket_rtsp_proxy 實現視頻流直播 ， 基于MSE（Media Source ExtensionsW3C） ， 擴展H5的功能 。
步驟：服務器安裝streamedian服務器 ， 客戶端通過video標簽播放 。
原型圖：

價格：

c.基于nginx的rsmp轉發
基于nginx實現rtmp轉化 ， 用flash實現播放 。 由于flash目前大多瀏覽器默認禁用 ， 不推薦此方式 。
步驟：安裝ffmpeg工具安裝nginx 。
另外nginx-rtmp-module也支持HLS協議可以搭建基于hls的直播服務器 。
d.rtsp轉hls播放通過ffmpeg轉碼
步驟：安裝ffmpeg工具 ， ffmpeg轉碼 。
形如：
ffmpeg -i \"rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1&subtype=0\" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 \"D:/hls/test.m3u8\"

缺點是直播流延時很大 ， 對實時要求比較高的不滿足要求 。
案例：基于EasyDarwin拾建轉碼服務器 。 參考地址:https://blog.csdn.net/jyt0551/article/details/84189498

通過存儲的m3u8去讀取 。
e.websocket代理推送 ， FFMPEG轉碼
此方法與a ， b類似 。 但更實用 。
以下提供兩種方案：
（1）Gin+WebSocket+FFMPEG實現rtsp轉碼參考：https://juejin.cn/post/6844904024072798216
通過FFMPEG把rstp轉成http ， ginrtsp作為轉發服務器 ， 但需要自己寫相應接口 ， 需要了解go語言 。
（2）node + ffmpeg + websocket + flv.js ， 參考：https://juejin.cn/post/6908641550046068744
步驟：在node服務中建立websocket；通過fluent-ffmpeg轉碼 ， 將RTSP 流轉為flv格式；通過flv.js連接websocket ， 并對獲取的flv格式視頻數據進行渲染播放 。
import WebSocket from 'ws'import webSocketStream from 'websocket-stream/stream'import ffmpeg from 'fluent-ffmpeg'// 建立WebSocket服務const wss = new WebSocket.Server({ port: 8888 perMessageDeflate: false )// 監聽連接wss.on('connection' handleConnection)// 連接時觸發事件function handleConnection (ws req) {// 獲取前端請求的流地址（前端websocket連接時后面帶上流地址）const url = req.url.slice(1)// 傳入連接的ws客戶端 實例化一個流const stream = webSocketStream(ws { binary: true )// 通過ffmpeg命令 對實時流進行格式轉換 輸出flv格式const ffmpegCommand = ffmpeg(url).addInputOption('-analyzeduration' '100000' '-max_delay' '1000000').on('start' function () { console.log('Stream started.') ).on('codecData' function () { console.log('Stream codecData.') ).on('error' function (err) {console.log('An error occured: ' err.message)stream.end()).on('end' function () {console.log('Stream end!')stream.end()).outputFormat('flv').videoCodec('copy').noAudio()stream.on('close' function () {ffmpegCommand.kill('SIGKILL'))try {// 執行命令 傳輸到實例流中返回給客戶端ffmpegCommand.pipe(stream)catch (error) {console.log(error)

相關經驗推薦