在浏览器中使用VLC插件实现播放RTSP流视频
在浏览器中使用VLC插件实现播放RTSP流视频
- 一、安装VLC插件
- 二、编写测试html文件
- 三、生成一个测试用RTSP流视频
- 四、在浏览器中播放RTSP流视频
- 五、VLC插件知识扩展
- 1、VLC插件就是axvlc.dll
- 2、如何手动安装VLC插件
- 3、如何在html中通过JS调用VLC插件
VLC播放器可以将视频文件进行推流,也可以播放流。并且VLC插件还可以嵌入浏览器,在浏览器中播放流视频。
在浏览器中,使用VLC插件,播放RTSP视频,效果如下所示:
下面,详细说一下过程,带大家体验一把。
一、安装VLC插件
在网上搜到的很多,要么浏览器不支持,要么就是播放不起,显示一片空白。实际是VLC版本的问题,高版本就会有问题,不知道为啥,所以只要VLC版本搞对了,就成功了一半。
我这里使用的测试环境:
- Win10,64位;
- 搜狗浏览器11.0.0.33862,必须使用兼容模式;
- vlc-1.0.5-win32,下载地址:http://download.videolan.org/pub/videolan/vlc/1.0.5/win32/vlc-1.0.5-win32.exe
我们下载vlc-1.0.5-win32.exe,按默认安装好。此时浏览器插件就自动装好了。
二、编写测试html文件
编写测试html文件,VLCPluginTest.html,内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Video Test</title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True'classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="720" height="540"><param name='mrl' value='rtsp://127.0.0.1:8554/' /><param name='volume' value='50' /><param name='autoplay' value='true' /><param name='loop' value='false' /><param name='fullscreen' value='false' />
</object>
</body>
</html>
这里默认RTSP地址为本机rtsp://127.0.0.1:8554/
,可以根据实际地址,进行修改。大家在测试时,一般只需要修改这个地址就行了,当然如果和我一样的地址,那就不用修改了。
以上html内容,就是当我们用浏览器,打开该html页面时,自动在页面中,播放该RTSP地址的流视频。
三、生成一个测试用RTSP流视频
这里我们还是用VLC播放器来推流视频,但是我这里用的是2.2.4版本的,用其他版本也是可以的,不影响。
下载地址:http://download.videolan.org/vlc/2.2.4/win64/vlc-2.2.4-win64.7z
然后,参考《设置VLC播放器进行RTSP推流视频》文章中,第二节内容,设置推流端,启动一个视频推流。
四、在浏览器中播放RTSP流视频
使用浏览器打开VLCPluginTest.html,并切换为兼容模式,如下:
大约缓冲个几秒,就会出现视频画面,如下:
如果没有,可以在“兼容模式”和“高速模式”间切换下,或者刷新下试试。
五、VLC插件知识扩展
我们先思考,如下几个问题,稍后一一解答。
- 为什么我们安装VLC播放器,VLC插件就自动装好了?
- 在浏览器中如何操作VLC插件,也就是在html中如何编写JS调用VLC插件的API?
1、VLC插件就是axvlc.dll
在安装好VLC播放器后,在其安装路径C:\Program Files (x86)\VideoLAN\VLC下的,axvlc.dll就是VLC的浏览器插件,是一个ActiveX控件,它运行时还依赖于同目录下的libvlc.dll、libvlccore.dll和plugins。
2、如何手动安装VLC插件
我们知道了axvlc.dll就是插件。所以想要安装VLC插件,除了直接安装VLC播放器外,我们还可以通过手动方式来安装,请看如下步骤。
注册插件
将axvlc.dll、libvlc.dll、libvlccore.dll和plugins文件夹,拷贝至任意目录下,再使用管理员权限运行cmd,输入regsvr32 axvlc.dll
,对插件进行注册。
添加注册表项
在“运行”中输入regedit
打开注册表编辑器,在路径[HKEY_LOCAL_MACHINE\Software\WOW6432Node\VideoLAN\VLC]
下,添加注册表项InstallDir="D:\VLCPlugin"
,这里我的插件放在D:\VLCPlugin路径下的,根据你自己的实际路径填写。
我这里在64位系统上使用32位VLC插件,所以注册表路径需要在WOW6432Node下;如果在64位系统上使用64位VLC插件的话,注册表路径应该为
[HKEY_LOCAL_MACHINE\Software\VideoLAN\VLC]
。
完成注册插件、添加注册表项后,就可以在浏览器中使用该插件,与直接安装播放器效果一样,均可以播放视频了。
以上2个步骤,如果需要编写脚本自动完成,可以参考《vlc的应用之二:vlc的ActiveX及cab》,该文章有介绍。
3、如何在html中通过JS调用VLC插件
VLC除了安装版,还有免安装版,下载地址:
http://download.videolan.org/pub/videolan/vlc/1.0.5/win32/vlc-1.0.5-win32.7z
解压后,在vlc-1.0.5-win32\vlc-1.0.5\activex目录下,README.TXT文件,对VLC插件的编译、调试、安装、编程API等进行了说明。同时,还提供了一个测试用test.html。
最后,我们对test.html进行一个测试,利用我们前面生成的RTSP流地址:rtsp://127.0.0.1:8554/
,在test.html中看能否播放该视频。
经测试,发现播放不了,原因是JS传递的参数options,指定的协议有问题。我们的RTSP实际是基于UDP来的,所以需要修改一下。我们将test.html中,第496行改为var options = [":rtsp-udp"];
。
然后,在浏览器(兼容模式)中打开test.html,输入MRL,如下所示:
然后点击“Go”,缓冲一两秒,正常播放,如下:
参考链接:
《VLC的ACtiveX插件使用方法》
《vlc的应用之二:vlc的ActiveX及cab》
若对你有帮助,欢迎点赞、收藏、评论,你的支持就是我的最大动力!!!
同时,阿超为大家准备了丰富的学习资料,欢迎关注公众号“超哥学编程”,即可领取。
在浏览器中使用VLC插件实现播放RTSP流视频相关推荐
- H5Stream播放RTSP流视频
H5Stream入门级应用,播放RTSP流视频 看到网上关于的H5Stream的资料比较少,故本文介绍了H5Stream的入门级使用教程,播放摄像头的RTSP视频流和和本地测试视频.包括H5Strea ...
- 实现h5端播放rtsp流视频--通过ffmpeg转流实现
实现h5端播放rtsp流视频–通过ffmpeg转流实现 安装包可通过官网下载,也可以评论邮箱发给你 #1. 安装 ffmpeg 解压 ffmpeg.zip 添加系统环境变量 cmd 输入 ffmpeg ...
- 在浏览器中使用VLC插件播放在线影片
写本文之前,说明几点问题, VLC是一个视频播放软件. VLC支持rtsp协议来传输视频文件流. 使用VLC插件在浏览器中播放视频. 在浏览器中,加入如下代码,可以实现调用VLC插件来播放视频. 代码 ...
- VLC插件在浏览器下(IE11)实现播放rtsp视频直播流
VLC插件 最近项目用到需要在浏览器上播放视频流,尝试了很多种方式去解决,包括使用ffmpeg转码成rtmp播放,websocket结合webrtc等方式,但是效果都不是很好,而且存在一定的丢包和搭设 ...
- HTML中使用vlc插件
HTML中使用vlc插件 前两天时间在做一个web项目这个项目需要播放rtsp流视频第一次要在网页上播rtsp流,于是网上找资料,但是网上资料找教程全不管用于是摸索两天才发现插件用错了,特发一文帮大家 ...
- js调用vlc_web网页中使用vlc插件播放相机rtsp流视频
可参考: vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放器或web网页播放器. 下面代码是web网页中使用vlc插件播放相机rtsp流视频: 注意: 需提前在打开 ...
- 如何在浏览器中显示本地文件系统_如何完全卸载浏览器中的Flash插件
Flash插件作为浏览器中常用的插件,经常会出现各种问题,需要重新安装,这里就讲一下如何真正卸载浏览器中的Flash插件. 如何下载网页中的swf文件-百度经验jingyan.baidu.com 适 ...
- 记浏览器使用webrtc-streamer 播放rtsp 流
web播放rtsp流 我的效果 在vue中使用webrtc-streamer 录屏.截图 近期公司某项目要实现监控播放功能包含录屏.截图功能,因了解到现在主流浏览器已不支持直接播放rtsp流,目前了解 ...
- 如果摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
问: 我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,猿大师播放器还可以在网页中播放RTSP流 ...
最新文章
- Linux必学的网络操作命令
- 腾讯SNG举办TSAIC大会,学术和工业界共话AI前沿趋势
- 一次“炼狱”般的电脑维护
- C语言中static详细分析
- Oracle 启动监听命令
- 为什么在使用get时,Properties对象总是忽略默认值?
- mysql 关闭锁_mysql数据库取消锁
- Opserver开源的服务器监控系统(ASP.NET)
- SecurtCRT连接服务器自动断开
- MobaXterm_Personal_20.1最简单方式链接阿里云服务器
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 27丨列出指定时间段内所有的下单产品【难度简单】​
- python制动化之路
- Spring MVC 的配置安装
- android控件触摸事件传递,Android事件传递处理
- kali linux 黑别人电脑,如何使用 Kali Linux 黑掉 Windows
- mysql触发器新增或修改_mysql触发器实例 插入数据前更改数据值
- Apple Pay 接入
- 如何打开PDF文档?必看的5种方法
- 126邮箱手机登录服务器密码怎么办,魅族手机登录网易126邮箱提示账号密码或协议设置不正确解决办法...
- 计算机上的无线网络开关怎么打开,联想笔记本无线网络开关怎么打开
热门文章
- java 方法 掌握,共享手册|一定要掌握这几个Java必备的学习方法,事半功倍!
- mysql 条件查询 导出数据_mysql按查询条件导出指定数据方法
- MySQL条件查询语句(一)
- maven学习之路(三)仓库
- 弘博创新2023读书会|“读”赢成长,“书”立未来
- 图片查看器 PhotoView
- 04 非父子组件传值
- matplotlib-21 stackplot堆积折线图
- 助你提高效率的几个Vue指令
- XDOJ1145--组合数学四之Carnival Phantasm