在web页面中播放rtsp直播数据流方法

孤街醉人 提交于 2020-03-25 12:27:04

3 月,跳不动了?>>>

WEB播放RTSP直播数据流方法

 

附录一些RTSP测试地址:

1、rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

一段动画片

2、rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp

拱北口岸珠海过澳门大厅

3、rtsp://218.204.223.237:554/live/1/0547424F573B085C/gsfp90ef4k0a6iap.sdp

 

rtmp://live.hkstv.hk.lxdns.com/live/hks


rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov


mms://space.hngd.gov.cn/live1


http://movie.ks.js.cn/flv/other/1_0.flv


http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8

截止于2017.4.22 19:48分,全部测试可用,便于大家开发测试!

在html技术中目前是无法直接使用现有的web技术进行播放rtsp直播数据流的,下面总结了可以是web播放rtsp直播流的方法。只是自己备用。

1,视频播放功能使用的库(WebChimera.js)

 
  1.  
    1.1,WebChimera.js
  2.  
    WebChimera.js使libVLC直接绘制到JS端的原始数组(Uint8Array)中。然后它将这个数组放入一个纹理并在一个画布元素上绘制它在node.js/io.js/Node-Webkit/NW.js/Electron中使用。可以像普通js一样的使用。
  • 1
  • 2
  • 3

官方地址
Github地址
官方讨论区(一般是作者进行解答)

 
  1.  
    1.2wcjs-player(目前项目使用的就是此)
  2.  
    wcjs-player是一个封装了WebChimera.js的播放器。一些播放器的基本的样式已经做好,不需要重新编写播放器样式。
  • 1
  • 2
  • 3

Github地址

 
  1.  
    1.3,注意点:
  2.  
    1.目前wcjs-player只在nw-0.12.3的版本上跑成功。而且在使用时由于nw-0.12.3不支持现在比较新的js语法。需要把wcjs-player依赖的部分模块中的js代码中以()=>{}格式定义函数的改为function (){}即可。可以使用以下脚本进行替换
  • 1
  • 2
  • 3

脚本地址

 
  1.  
    2.在播放页面的head中必须含有<style></style>标签。stytle中可以没有样式内容,但是使用wcjs-player时wcjs-player会查找head中的style进行插入css样式。
  2.  
    3.必须设置vlc plugins的路径。(可以把vlc的安装路径加入到path中或在WebChimera.js中加入plugins。如下图)(如果报出找不到WebChimera.js.node有可能是没有找到plugins。plugins要和WebChimera.js.node在同一个目录下面)
  3.  
    4.plugins要和WebChimera.js.node放在同一目录下。
  • 1
  • 2
  • 3
  • 4


 
  1.  
    1.4简单使用案例
  2.  
    1.使用方法
  3.  
    双击run.bat或者把整个test文件拖到nw.exe上进行运行。
  • 1
  • 2
  • 3
  • 4

案例下载地址

2,使用h5stream(不支持h265)

 
  1.  
    2.1 H5stream
  2.  
    H5S is a HTML5 streaming server, HTML5 RTSP Gateway
  • 1
  • 2
  • 3

gihub地址

 
  1.  
    2.2 H5stream使用
  2.  
    1.下载源码下来进行编译,编译出可执行文件以后执行 ./h5ss rtsp://192.168.0.1/stream1 admin admin 起服务。
  3.  
    ./h5ss RTSPURL username password (username和password可以填空)
  4.  
    2.http(https)://localhost:8801(8843) 连接此服务即可播放
  • 1
  • 2
  • 3
  • 4
  • 5

案例下载地址
也可查看官方给出的使用案例

3,使用npapi-vlc

 
  1.  
    网页使用npapi-vlc进行调用vlc的插件进行播放rtsp的数据流。注意在安装vlc是注意选择支持npai的选项。在使用时要使用低版本的nw.目前使用nw-0.12.3可以使用。注意在nw.exe同目录下创建plugins,把npapi插件放进去。
  2.  
    也可以自己编译npapi 可以参考一下的资料
  • 1
  • 2
  • 3

npapi在linux中的交叉编译

这有一个简单的使用案例可以参考使用
  • 1
  • 2

案例下载地址

以上使用在页面中播放rtsp视频流的方法。还有其的方式可以播放,本人认为这三种比较好使用。

 

 

 

 

还有一种方式:

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

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

 

找半天,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. 实时播放代码如下

复制代码

 
  1.  
    <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
  2.  
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
  3.  
    <param name='volume' value='50' />
  4.  
    <param name='autoplay' value='true' />
  5.  
    <param name='loop' value='false' />
  6.  
    <param name='fullscreen' value='false' />
  7.  
    <param name='controls' value='false' />
  8.  
    </object>

复制代码

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

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!