在浏览器中使用VLC插件实现播放RTSP流视频

2024-06-18 05:18

本文主要是介绍在浏览器中使用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流视频的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071397

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker