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

WEB播放RTSP直播数据流方法

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

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

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

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

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

Github地址

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

脚本地址

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


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

案例下载地址

2,使用h5stream(不支持h265)

2.1 H5stream
	H5S is a HTML5 streaming server, HTML5 RTSP Gateway

gihub地址

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

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

3,使用npapi-vlc

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

npapi在linux中的交叉编译

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

案例下载地址

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值