浏览器使用VLC插件播放rtsp

最新推荐文章于 2024-02-23 10:42:33 发布

阿彤木11

最新推荐文章于 2024-02-23 10:42:33 发布

阅读量7.6k

点赞数

文章标签： rtsp vlc 监控 web视频

本文链接：https://blog.csdn.net/weixin_43607664/article/details/103466578

版权

我们项目里用到了华为的摄像机,在实况浏览的时候爬了好几天的坑,终于东拼西凑,自己弄好了一份html的demo,可以播放视频记录一下.

1.我们是从华为轻量云上获取的摄像机的参数和视频信息轻量云包括VCM(分析平台,网页端可以登录) ,VCN(监控平台需要下载客户端才能登录)

2.我是调用vcn上的接口拿到相应摄像机的rtsp地址,下面我就直接上代码了

注意要先在电脑安装VLC插件,才能在浏览器调用,下载地址: https://www.videolan.org/ 注意32和64位,我使用的32位.
vlc web开发文档地址 : https://wiki.videolan.org/Documentation:WebPlugin/ 里面有详细介绍
这是一个基本的html页面 ,将rtsp地址替换下面的地址即可,只支持IE,和360(因为有ie内核),Chrome当前版本是不支持的,网上说45版本以下的支持,但是我试了还是不行,可能是不会配置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True' width="800" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
    <param name='mrl' value='rtsp://player.daniulive.com:554/live68906.sdp' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='true' />
</object>
</body>
</html>

在这里插入图片描述

很不幸,我这样弄完,本地的直连摄像头有画面了,但是通过vcn获取的rtsp地址还是没有视频画面,但是很奇怪获取到的rtsp在vlc客户端程序里是有画面的.发现是客户端程序里有一个这样的配置:

在"工具"=>偏好设置>输入/编解码器里面有个设置流协议的,猜测客户端是因为有这个设置才能播放画面的,我的demo没有这项设置

在这里插入图片描述

然后在开发文档里找了下,我把这个加上就可以了…

在这里插入图片描述

下面是修改后的demo,是可以播放从vcn拿到的rtsp的视频的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True' width="800" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='true' />
</object>
<script>
    var vlc=document.getElementById('vlc');
    var options = new Array("rtsp-tcp")
    var id = vlc.playlist.add('rtsp://192.168.0.23:554/06707147186818720101?DstCode=01&',"fancy name",options);
    vlc.playlist.playItem(id);
</script>
</body>
</html>

在这里插入图片描述

另外华为的rtsp地址只有30秒有效期,查过30秒没被使用就作废了,使用过一次也作废了,播放上以后就可以一直播放了.

过程中还发现了一个测试用的软件 WindowsPusher&Playe 它可以将本地屏幕画面做成rtsp源,这样测试的时候就可以先在本地测试,通过了再连摄像头测试.下面是软件的下载地址: https://github.com/daniulive/SmarterStreaming

过程中找了好多方案 vlc当前似乎只支持ie内核的浏览器,新版的Edge也不支持吧,另外还发现 H5Stream 感觉还不错但是比较复杂,你们如果有兼容性更好的demo欢迎给我留言啊.最好能支持Chrome

阿彤木11

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
浏览器使用VLC插件播放rtsp

我们项目里用到了华为的摄像机,在实况浏览的时候爬了好几天的坑,终于东拼西凑,自己弄好了一份html的demo,可以播放视频记录一下.1.我们是从华为轻量云上获取的摄像机的参数和视频信息轻量云包括VCM(分析平台,网页端可以登录) ,VCN(监控平台需要下载客户端才能登录)2.我是调用vcn上的接口拿到相应摄像机的rtsp地址,下面我就直接上代码了注意要先在电脑安装VLC插件,才能在浏览器...
复制链接

扫一扫