使用H5Stream实现rtsp流播放，并整合到web项目中

前端老实人灬

已于 2022-03-14 09:45:15 修改

阅读量521

点赞数

分类专栏：笔记文章标签： javascript html vue.js

于 2021-12-01 08:49:33 首次发布

原文链接：https://blog.csdn.net/yanmuchen/article/details/98207002#comments_13039506

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

参考链接: https://blog.csdn.net/yanmuchen/article/details/98207002#comments_13039506.
h5stream
官网：
链接: https://www.linkingvision.cn/.
下载h5s-r9.0.0605-win64-release.zip
链接: https://www.linkingvision.cn/download/h5stream/.
Windows vs2017 运行支持包vc_redist.x64.exe
链接: https://linkingvision.cn/download/h5stream/win/VisualC%2B%2BRedistributable/.

百度网盘打包下载
链接: https://pan.baidu.com/s/1UVq8zRvhhOVfmoFNzZ5oeg#list/path=%2F.

开始：
（1)双击vcredist_x64.exe进行安装，安装后需重启，这个安装包也保存着吧，如果已经安装成功的双击会显示修复和卸载
在这里插入图片描述
（2）解压产品包h5s-r9.0.0605-win64-release.zip，解压路径随意

（3）双击根目录中的regservice.bat自动注册
在这里插入图片描述
（4）修改\h5s-r8.7.0718.19-win64-release\conf目录下的h5ss.conf配置文件，将strUrl的流地址修改为你自己的

      这里提供一个流地址：rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

      tip:你可以使用VLC播放器测试一下流地址是否正常，如果无法播放，请更换为其他的

在这里插入图片描述

（5）双击根目录下的h5ss.bat启动服务，切记不能关闭哦！
在这里插入图片描述

注意：如果无法运行，出现如下报错：那可能是vcredist_x64.exe安装出了问题，这里提供微软下载，重新安装下！
在这里插入图片描述

（6）打开网页，浏览器输入localhost:8080 ，看到如下界面代表成功
账号和密码 admin 12345

在这里插入图片描述

（7）你也可以直接浏览器输入localhost:8080/demo.html
在这里插入图片描述

那如何引入到自己的web项目中呢？？？

其实很简单，在h5s-r8.7.0718.19-win64-release\www目录下有个demo.html文件，复制到你的项目中去，然后引入相应的js文件，注意！！host 的 window.location.host 改为 localhost:8080，因为H5Stream默认端口为8080，所以为了避免冲突，将你web项目的端口号修改为8081，否则你启动H5Stream服务的时候，就无法启动项目了！
在这里插入图片描述

<!DOCTYPE HTML>  
<html>  
<head>
<title>H5STREAM VIDEO</title>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
<script src="js/platform.js"></script>
<script src="js/h5splayer.js"></script>
<script src="js/h5splayerhelper.js"></script>
 
<link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />
 
</head>
 
<body> 
 
<div class="h5videodiv">
    <video class="h5video" id="h5sVideo1"  autoplay webkit-playsinline playsinline>
 
    </video>
    <div class="playpause" id="playpause1" ></div>
</div>
 
 
</body>
 
<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>
 
</html>

重新启动h5ss.bat

然后运行web项目，就可以看到视频了。

我是将视频嵌套在我已有的html中，效果如下
在这里插入图片描述