appemit支持chrome edge等浏览器使用VLC 播放rtsp rtmp 解决方案

appemit支持chrome edge等浏览器使用VLC 播放rtsp rtmp 解决方案

项目需要实时播放摄像头rtsp视频流,浏览器不能直接播放,只有通过插件或者转码来实现这个需求。

要实现这个目的,可以采用的方案非常得多, 

转码
html5 + websocket_rtsp_proxy  转码,实现视频流直播,免费版本两年未更新。
ffmpeg + ngnix + video,rtsp转rtmp播放, 经过测试延时普遍在1-3秒
ffmpeg + video,rtsp转hls播放,延迟略长(2-6秒),这种方式的理论最小延时为一个ts文件的时长 ,一般为2-3个ts文件的时长
VLC插件播放 ,可以直接播放RTSP,基于NPAPI,不被最新的 Chrome 和 Firefox 支持
WebRTC,转码,RTSP 转换为 WebRTC 流,供 web 端显示
 
 因此,AppEmit提供的本地客户端的浏览器播放RTSP的方案是:
 1 使用webkit内核支持VLC的NPAPI,原有的js代码直接使用,几乎没有延迟
 2 使用vlc的libvlc的API播放,支持多开,几乎没有延迟
 3 使用vlc转码为ogg ,浏览器video标签直接播放,延迟约1秒
 4 rtsp转换为WebRTC播放,浏览器直接播放,延迟800ms

 

appemit支持chrome等浏览器使用VLC 播放rtsp rtmp 

方法1 使用NPAPI播放vlc的网页插件

HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式,谷歌、FF)实现播放RTSP视频流,那真是极好的~~ 废话不多说了附上参考文档和案例,大家自己看吧。

视频是用的海康网络摄像头(支持RTSP,标准H.264 RTP封装的设备),可以通过 rtsp://admin:[email protected]:81/h264/ch1/main/av_stream  对摄像头进行读取RSTP流。在谷歌浏览器下实现web显示实时监控画面步骤:

1. 下载vlc -  http://www.videolan.org/vlc/  开源的好东西,并安装(本人测试系统为WIN8.1 64bit 下载32bit的就可以,XP也没问题);

2. 安装,并勾选Mozila支持;

3. 实时播放代码如下

 

代码中的具体参数含义,大家可以移步这里:

https://wiki.videolan.org/Documentation:WebPlugin/

说明文档很详细,可以使用js进行各种操作,修改视频地址、建立播放列表、暂停、播放、音量控制等。

但是最新版本的chrome firefox已经不支持NPAPI。

Appemit可以解决此问题,支持最新版本的chrome  360 IE  edge  firefox QQ 等浏览器打开vlc插件,播放rtsp rtmp.

使用 webkit 网页的 vlc 插件直接打开 Rtsp 流,可以使用 npvlc.dll 即 NPAPI 技术 或者 axvlc.dll 见案例 demo\htmlDemo\rtsp.html,  {"emit":"open","Obj":"media","AppType":1,"pos":1,"AppId":1, -45- "par":{ "mrl":"rtsp://wowzaec2demo.st reamlock.net/vod/mp4:BigBuckBunny_115k.mov","htmlStr":null,"kernel":2},"pa r0":{"fullscreen":true,"volume":70,"autoplay":true,"controls":true }}

 

方法2 使用libvlc的插件直接播放

Appemit支持多开,截图等功能

支持多开, 见案例 demo\htmlDemo\rtsp.html

{"emit":"open","Obj":"libvlc","AppType":1,"pos":1,"AppId":1,"par":{ "mrl":"rtsp://wowzaec2demo.st reamlock.net/vod/mp4:BigBuckBunny_115k.mov","localFile":0},"par0":{"fullscreen":1,"volume":70, "autoplay":1,"controls":0 }}

 

方法3 使用vlc转码为ogg ,浏览器video标签直接播放,延迟约1秒

使用 Vlc 提供服务,转化编码,有延迟,适用精度要求不高的场所,这样只是使用了后台服 务而没有插件。 见案例 demo\htmlDemo\rtsp_ogg.html

举例:将 mp4 转化为 rtsp(如果有 rtsp 直接使用),再将 rtsp 转化为 ogg,在 html5 的播放 器播放

{"emit":"open","Obj":"media","AppType":1,"AppId":"AppId_lvcSvr1","AppShow":0,"p ar":{"gui":0,"cmds":["-vvv \"file:///${dir_Cur}/demo/htmlDemo/file/h1.mp4\" --loop --sout \"#transcode{vcodec=h264,acodec=mpga,ab=128,channels=2,samplerate=44100}:rtp{sdp=r tsp://:8554/vlc}\" ","-vvv \"rtsp://:8554/vlc\" --loop :sout=#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplera te=44100}:http{mux=ogg,dst=:8080/stream} :sout-all :sout-keep\" "]}}


方法4 rtsp转换为WebRTC播放,浏览器直接播放,延迟800ms

只能开播放一个 RTSP,能切换。 将 RTSP 转为 webRTC,,适用延迟精度要求较高的场所,这样只是使用了 webRTC 后台服务 而没有浏览器插件。 见案例 demo\htmlDemo\rtsp2WebRTC.html

Var ReqPar= {"emit":"open","Obj":"rtsp2webRTC","AppShow":0,"AppFollow":0,"AppRuntime":1,"par": {"webRTC_cfg":webRTC_cfg,"pid":pid,"webRTC_dos":0,"AuthKey":pidAuthKey},"par0":{"f orce":1}}; AE_OpenApp(ReqPar );

 

 

程序下载 

程序名称   AppEmit.exe

网址   http://www.appemit.com

Github  https://github.com/appemit/appemit

Email联系 appemit(at)appemit.com  

 内容分发下载地址    github下载地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章