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

参考博客:
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 ,解压如图:在高版本chrome上播放实时RTSP视频流,并应用到web项目中_第1张图片
同时需要安装vcredist_x64.exe,别人的都是vs2017 redistributable,我安装的vs2015 redistributable.
之后选择regservice来注册服务,这里需要用管理员权限打开,打开后如果显示无法打开nssm之类的,就把nssm.exe复制到c:/windows/system32下即可,之后就可以在电脑的服务里面看到了。
打开刚才解压后的根目录,conf里面有一个h5ss.conf文件,打开找到在高版本chrome上播放实时RTSP视频流,并应用到web项目中_第2张图片
将url改为你要的rtsp视频源。这里一共有俩source,改第一个,第二个是示例视频,可以在https://linkingvision.com/download/h5stream/video/h5ssample.mp4下载并放到根目录中。

打开h5ss.bat 或直接执行h5ss.exe,界面如下:
在高版本chrome上播放实时RTSP视频流,并应用到web项目中_第3张图片
打开浏览器输入localhost:8080可看到如下场景:
在高版本chrome上播放实时RTSP视频流,并应用到web项目中_第4张图片
点击左边的live 选择stream即可在页面上播放。
至此就完成了第一步,即可以在网页上播放rtsp视频流了。

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

<head>
    <title>H5STREAM VIDEOtitle>
    <script src="~/Scripts/jquery-3.1.1.js">script>
    <script src="~/Scripts/bootstrap.js">script>
    <script src="~/Scripts/adapter.js">script>
    <script src="~/Scripts/platform.js">script>
    <script src="~/Scripts/h5splayer.js">script>
    <script src="~/Scripts/h5splayerhelper.js">script>

    <link rel="stylesheet" type="text/css" href="css/h5splayer.css" />

head>

<div class="row">
    
    <div class="h5videodiv">
        <video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline style="width:1000px">video>
        <div class="playpause" id="playpause1">div>

    div>
    
div>

<script>

if (H5siOS() === true
	|| H5sSafariBrowser() === true)
{
	$('#h5sVideo1').prop("controls", true);
}

var conf1 = {
	videoid:'h5sVideo1',
	protocol: window.location.protocol, //'http:' or 'https:'
	host: "localhost:8080", //'localhost:8080'
	rootpath:'/', // '/' or window.location.pathname
	token:'token1',
	hlsver:'v1', //v1 is for ts, v2 is for fmp4
	session: 'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
    
};


var v1 = H5sPlayerCreate(conf1);



$('#h5sVideo1').parent().click(function () {
    if($(this).children(".h5video").get(0).paused){
		if(v1 != null)
		{
			v1.disconnect();
			delete v1;
			v1 = null;
		}

		v1 = H5sPlayerCreate(conf1);

		console.log(v1);
        v1.connect();

        $(this).children(".playpause").fadeOut();
    }else{
		v1.disconnect();
		delete v1;
		v1 = null;
		$(this).children(".h5video").get(0).pause();
		$(this).children(".playpause").fadeIn();
    }
});



script>

在项目中引入/www/js里的js文件,将代码中的var conf1的host改为localhost:8080。

双击打开h5ss.exe,运行你的web项目,即可。

你可能感兴趣的:(project)