net(net::ERR_UNKNOWN_URL_SCHEME)居然可以这样

Mark wiens

发布时间:2024-01-12

rtsp流在主流浏览器并不支持直接播放。比如大华的视频流:rtsp://admin:123456@192.168.10.129/cam/real

net(net::ERR_UNKNOWN_URL_SCHEME)居然可以这样

 

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、服务器拉流转发及协议转换示意图如下所示:

推流--------------服务器转发--------------拉流方法一览:a,vlc软件串流到http协议,网页显示几个视频需启动几个vlc,只适合应急场景b,html5 + websocket_rtsp_proxy 实现视频流直播。

,基于MSE(Media Source Extensions,W3C),扩展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拾建转码服务器。

通过存储的m3u8去读取e.websocket代理推送,FFMPEG转码此方法与a,b类似但更实用以下提供两种方案:(1)Gin+WebSocket+FFMPEG实现rtsp转码通过FFMPEG把rstp转成http,ginrtsp作为转发服务器,但需要自己写相应接口,需要了解go语言。

(2)node + ffmpeg + websocket + flv.js步骤:在node服务中建立websocket;通过fluent-ffmpeg转码,将RTSP 流转为flv格式;通过flv.js连接websocket,并对获取的flv格式视频数据进行渲染播放。

import WebSocket fromwsimport webSocketStream fromwebsocket-stream/streamimport ffmpeg fromfluent-ffmpeg

// 建立WebSocket服务const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false }) // 监听连接 wss.on(

connection, handleConnection) // 连接时触发事件functionhandleConnection (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) } }

优点全部基于js。前端即可搞定。

免责声明:本站所有信息均搜集自互联网,并不代表本站观点,本站不对其真实合法性负责。如有信息侵犯了您的权益,请告知,本站将立刻处理。联系QQ:1640731186