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:12345@192.0.0.64: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
Githubhttps://github.com/appemit/appemit
Email联系 appemit(at)appemit.com