在高版本chrome上播放实时RTSP视频流，并应用到web项目中

最新推荐文章于 2024-04-21 10:05:04 发布
最新推荐文章于 2024-04-21 10:05:04 发布
阅读量1.2w 收藏 14
点赞数 2
分类专栏： project 文章标签： h5stream web chrome rtsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32442367/article/details/100891373
版权

参考博客：
linkingvision
ShellCollector
那朵花啦
盛想飞

背景

项目需要在web上播放rtsp视频流，之前一直都是用chrome作为最终应用的浏览器，但发现常规操作下rtsp数据流需要插件，（rtsp视频流的播放依赖于多年前的NPAPI，而自2015年以后，chrome取消了对此功能的支持），并且在高版本chrome下模块显示“插件不可用”，于是进行了不同方法的尝试。

尝试

方案一

使用chrome插件IE tab
相当于在页面中增加一个tab用于模拟ie的环境，尝试后发现不仅视频显示不出来，之前在chrome上调好的前端格式也崩了。
放弃。

方案二

使用VLC插件

使用此插件可以直接下载安装VLC media player，此视频播放器可以直接打开包括但不限于rtsp的视频流，用来测试视频流是否有效很不错。

安装的时候勾选一切插件选项，说要勾选Mozilla，但结果是依然不奏效，不仅如此，就连网上博客都在说有效的firefox浏览器，也显示不出来，后续查阅资料的意思是高版本的chrome、firefox、甚至ie都不再支持npapi了（有待商榷）。

chrome在45版本以后都不再支持NPAPI了，于是想到了下载历史版本的方法，甭管啥版本，先能播放出来再说吧，于是下载了一些39、42、44、45版本的chrome_portable版以及chromium。

结果就是：≥45版本的chorme下载后可以使用但显示插件不可用；≤44版本的chrome按理来说支持插件但显示页面崩溃，任何网页都打不开。

放弃。

方案三

vxg media player插件
据说可以，但在我这里现实的就是一直在转圈圈，显示“右键点击即可运行native client”，并没有啥用。
绝望。

方案四

就是linkingvision的H5stream了
在https://linkingvision.com/download/h5stream/下载对应的包，我这里下载的是此时最新的h5s-r9.7.0903.19-win64-release.zip ，解压如图：解压后一览
同时需要安装vcredist_x64.exe，别人的都是vs2017 redistributable，我安装的vs2015 redistributable.
之后选择regservice来注册服务，这里需要用管理员权限打开，打开后如果显示无法打开nssm之类的，就把nssm.exe复制到c:/windows/system32下即可，之后就可以在电脑的服务里面看到了。
打开刚才解压后的根目录，conf里面有一个h5ss.conf文件，打开找到h5ss.conf
将url改为你要的rtsp视频源。这里一共有俩source，改第一个，第二个是示例视频，可以在https://linkingvision.com/download/h5stream/video/h5ssample.mp4下载并放到根目录中。

打开h5ss.bat 或直接执行h5ss.exe，界面如下：
cmd
打开浏览器输入localhost:8080可看到如下场景：
console
点击左边的live 选择stream即可在页面上播放。
至此就完成了第一步，即可以在网页上播放rtsp视频流了。

接下来引入web项目中，发扬ctrl+c ctrl+v精神，我们将目录下www文件夹里的demo.html里的代码复制到项目中，修改一下使其只显示一个视频框

<head>
    <title>H5STREAM VIDEO</title
最低0.47元/天 解锁文章
波导基德
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
谷歌浏览器Chrome播放rtsp视频流解决方案easyPlayerRTSP
appemit
01-03 5220
A 方案 VLC播放RTSP B 方案mplayer播放RTSP C方案 mpvPlayer播放RTSP D‘方案 easyPlayerRTSP调用ffmpeg库播放RTSP // 方案4 使用 easyPlayer RTSP 模块 调用 FFmpeg 来播放RTSP流 1 方法一，使用IE内核来打开 ,参考 plugins\thirdparty\ffmpeg\easyPlayerRTSP ocx_test.html 2 方法二，使用dll方式加载 ocx ...
Chrome.RTSP.Player:Chrome RTSP播放器
05-06
Chrome操作系统RTSP播放器 了解有关更多信息 VXG流媒体解决方案的主要功能： 支持的流类型：RTSP，RTMP，MMS，HLS，UDP等。 支持的视频格式：H.264，MPEG-4，MPEG-2等。 支持的音频格式：AAC，PCM，G711，MP3等。 硬件加速的解码和渲染。 标准播放功能：播放/暂停/停止，音频控制，全屏，宽高比。 先进的播放功能：延迟控制，自动重新连接，下溢/上溢通知。 HTTPS支持。 双向音频。 视频录制到MP4文件。 静止图像捕获为JPEG文件。 建造 $ npm install $ npm run build
谷歌浏览器Chrome播放rtsp实时视频，并抓图、录像、回放、倍速等
猿大师播放器—网页低延迟播放RTSP视频流专家
02-13 4599
因为项目上需要把海康威视摄像头集成到WEB网页中播放，于是开始了对WEB播放摄像头方案的各种折腾。 2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放，延迟比较低，效果也还不错。可惜好景不长，从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持，海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。 有朋友推荐的猿大师VLC播放程序，据说是底层调用VLC播放控件然后嵌入到网页中直接播放RTSP视频流的，延迟非常低（实测300毫秒左右
使用RTSP Chrome Demo：打破Web浏览器与实时流媒体的界限
gitblog_00090的博客
04-21 254
使用RTSP Chrome Demo：打破Web浏览器与实时流媒体的界限 项目地址:https://gitcode.com/aitexiaoy/rtsp_chrome_demo RTSP Chrome Demo 是一个开源项目，旨在让Web浏览器支持Real Time Streaming Protocol (RTSP)，以实现高质量、低延迟的视频流媒体播放。该项目由GitHub用户aitexiao...
支持高版本谷歌播放rtsp的插件vxg media player
12-29
支持高版本谷歌播放rtsp的插件--VXG Media Player。该插件支持高版本的谷歌浏览器播放rtsp流视频，也不必转码为rtmp再播放，直接将Chromefor的东西添加到谷歌浏览器扩展程序里，重启浏览器就可以正常使用插件，获取播放视频流速度超快。
前端谷歌浏览器显示海康rtsp视频
qq_42129143的博客
11-19 1895
第一步：安装合适的谷歌浏览器 下载地址：72版本浏览器 提取码：8bha 这里安装低版本浏览器需要注意的是要设置一下不允许自动更新，否则安装成功后浏览器自动会更新为最新版本 第二步：安装VXG Media Player插件 下载地址：VXG Media Player插件地址 提取码：dc4h 将其解压到任意目录 在浏览器的右上角选择扩展程序 点击加载已解压的扩展程序（就是一步解压的文件目录） 第三步下载vxgPlayer插件 现在我们需要下载一个vxgPlayer....
在谷歌Chrome网页中播放海康威视RTSP视频流在播放窗口内叠加网页元素？
猿大师播放器—网页低延迟播放RTSP视频流专家
02-21 1288
我们有需求在谷歌Chrome网页不仅低延迟播放海康威视RTSP视频流，并且在播放窗口内叠加我们的网页 元素，比如红框、文字等，请问猿大师播放器如何做到？猿大师播放器最新版（网络版2.2.9.2/单机版1.5.9.2）已经支持在网页播放窗口内叠加网页内容了。请先升级为最新版后体验。操作系统与VLC播放器对应，即：32位操作系统下载32位VLC，64位操作系统下载64位VLC。先选择一个公网RTSP流播放，然后输入叠加内网网址，点击叠加显示即可。播放窗口内叠加元素目前仅支持Windows8及以上版本系统。
网页播放海康rtsp视频，亲测可用
08-13
网页播放海康RTSP视频是将海康威视（Hikvision）的网络摄像机实时流媒体协议（Real-Time Streaming Protocol, RTSP）视频源在Web浏览器中展示的技术。海康威视作为知名的安防监控设备供应商，其产品广泛应用于各种...
rtsp流在页面上内嵌播放
03-11
RTSP（Real Time Streaming Protocol，实时流传输协议）是一种用于控制多媒体数据流的协议，它允许客户端请求服务器上的媒体资源并进行实时播放。在网页上内嵌RTSP流播放，通常需要借助第三方插件或者解决方案，因为...
大华摄像头播放插件，适用于chrome最新版，支持rtsp格式播放
05-05
在IT领域，尤其是在网络视频监控系统中，"大华摄像头播放插件"是一个重要的工具，它解决了在Chrome浏览器上直接播放RTSP格式视频流的问题。RTSP（Real Time Streaming Protocol）是一种广泛用于视频流传输的协议，...
vue2前端如何播放rtsp 视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264 如何播放
最新发布
05-27
在Vue2前端开发中，播放RTSP视频流是一项常见的需求，尤其在监控系统或视频会议应用中。RTSP（Real-Time Streaming Protocol）是一种用于控制实时流传输的协议，通常用于传输如海康等安防设备的H264编码的视频流。在...
VXG视频框架下RTSP,RTMP视频流滑屏切换播放Demo(Eclipse版)
07-13
VXG视频框架下RTSP,RTMP视频流滑屏切换播放Demo(Eclipse版),用于Android手机摄像头视频流的直播
Chrome浏览器播放rtsp_支持H.265,所需资源
10-08
Chrome浏览器播放rtsp_支持H.265,所需资源 ffmpeg-20200527-8b5ffae-win64-static    oflaDemo  setup-Red5-1.0.5 详见：https://blog.csdn.net/zjy660358/article/details/108959372
基于VLC的ActiveX视频实时流播放控件
10-31
综上所述，基于VLC的ActiveX视频实时流播放控件是Web开发中实现rtsp视频流播放的一种技术手段，涉及Web控件、实时流协议、浏览器兼容性等多个方面，需要开发者具备多方面的技术知识和实践经验。
Chrome 实现音频/视频 自动播放
H18394173217的博客
11-23 3629
Chrome 实现音频/视频 自动播放 //home.html 用a标签跳转到播放页 <a href="test_video.html">跳转到视频/音频播放页</a> //play.html 自动播放音频/视频 <audio autoplay="autoplay" loop="loop" src="audio.mp3"></audio> <video autoplay="autoplay" src="video.mp4"></video&
chrome播放rtsp视频使用vgx插件
yanglei_95的博客
05-09 1824
文章转载出处 https://blog.csdn.net/qq_34817440/article/details/105644393 补充说明：谷歌版本查看方式 高版本不支持的原因目前认为是PNaCl 高版本不支持
如何在高版本谷歌Chrome浏览器中用VLC播放海康、大华RTSP实时视频？
qq_43842093的博客
10-05 3058
一个好的技术实施方案，首先是要满足客户的刚性需求，其次是尽量降低采购、开发、实施及维护的总成本，再次是需要有良好的兼容性和稳定性，最后需尽量确保技术方案不能因为浏览器的升级而失效，能够实现公司自主可控的要求就更好了。猿大师的VLC网页播放程序提供了这样一个稳定可靠、兼容性好、低延迟又可同时稳定播放多路RTSP的低成本半开源技术方案，无疑是当前安防行业在网页端播放RTSP流的最佳选择。
怎么实现在web页面中直接播放rtsp视频流
07-08
要在 web 页面中直接播放 RTSP 视频流，可以使用一些技术和库来实现： 1. 使用 HTML5 的 video 标签：在 HTML 页面中，可以使用 `<video>` 标签来嵌入视频。然而，HTML5 的 video 标签默认只支持常见的视频格式，如 MP4、WebM 和 Ogg。要播放 RTSP 流，需要将 RTSP 流转换为支持的视频格式，如 RTMP 或 HLS。 2. 使用流媒体服务器：可以使用流媒体服务器来转码和分发 RTSP 流。常见的流媒体服务器有 Wowza、nginx-rtmp-module、ffmpeg 等。这些服务器可以将 RTSP 流转换为支持的视频流格式（如 RTMP 或 HLS），然后通过 HTTP 协议在 web 页面中进行播放。 3. 使用 JavaScript 库：还可以使用一些 JavaScript 库来实现在 web 页面中播放 RTSP 流。例如，`jwplayer`、`video.js`、`hls.js` 等库都提供了播放视频流的功能，并支持 RTSP 流的播放。 需要注意的是，由于浏览器对于不同视频格式和协议的支持有限，因此需要根据具体的需求和环境选择合适的技术和库来实现在 web 页面中播放 RTSP 视频流。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值