在浏览器中使用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

相关文章

C语言中联合体union的使用

本文编辑整理自: http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union)与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量

C++对象布局及多态实现探索之内存布局(整理的很多链接)

本文通过观察对象的内存布局,跟踪函数调用的汇编代码。分析了C++对象内存的布局情况,虚函数的执行方式,以及虚继承,等等 文章链接:http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候,你会无止境地与内存管理打交道。 文章链接:http://dev.yesky

Tolua使用笔记(上)

目录   1.准备工作 2.运行例子 01.HelloWorld:在C#中,创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile:在C#中,对一个lua文件的执行调用 03.CallLuaFunction:在C#中,对lua函数的操作 04.AccessingLuaVariables:在C#中,对lua变量的操作 05.LuaCoroutine:在Lua中,

Vim使用基础篇

本文内容大部分来自 vimtutor,自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下,然后再分别介绍正常模式,插入模式,和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式(Normal模式) 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据,优化了分类算法,支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类;一键生成危险点报告和交跨报告;还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com,资源源于网络,本介绍用于学习使用,如有侵权请您联系删除! 2.新增快速版,简洁易上手 支持快速版和专业版切换使用,快速版界面简洁,保留主

如何免费的去使用connectedpapers?

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录(也就是访客模式)4. 两次用完,关闭无痕模式(继续重复步骤 2 - 4) 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址:https://www.connectedpapers.com/ 3. 不需要登录(也就是

通过SSH隧道实现通过远程服务器上外网

搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效,查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务,隧道开机启动

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测 目录 时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测基本介绍程序设计参考资料 基本介绍 MATLAB实现LSTM时间序列未来多步预测-递归预测。LSTM是一种含有LSTM区块(blocks)或其他的一种类神经网络,文献或其他资料中LSTM区块可能被描述成智能网络单元,因为

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

android一键分享功能部分实现

为什么叫做部分实现呢,其实是我只实现一部分的分享。如新浪微博,那还有没去实现的是微信分享。还有一部分奇怪的问题:我QQ分享跟QQ空间的分享功能,我都没配置key那些都是原本集成就有的key也可以实现分享,谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的,而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤(新浪分享,以下是本人自己实现