关于在Vue项目中 使用rtsp视频监控的方法(采用h5c).亲测可用!!!
废话不多说,一共六步........第一步:.https://linkingvision.cn/download/h5stream/ 下载最新版本的h5s第二步:解压后 修改压缩包中的文件 ../conf/h5ss.conf如下图:第三步:运行根目录下的regservice.bat文件,这个文件只要运行一次就行,以后不需要运行.第四步:运行h5ss.bat文件,运行...
废话不多说,一共六步........
第一步:.https://linkingvision.cn/download/h5stream/ 下载最新版本的h5s
第二步:解压后 修改压缩包中的文件 ../conf/h5ss.conf
如下图:
第三步:运行根目录下的regservice.bat文件,这个文件只要运行一次就行,以后不需要运行.
第四步:运行h5ss.bat文件,运行后不要关闭,浏览器输入网址http://localhost:8080/demo.html可以查看效果
第五步:在VUE项目中的使用 需要引入两个js文件 h5splayer.js,h5splayerhelper.js 并且这两个js文件必须向外暴露。完整的JS文件 请参考https://github.com/linkingvision/h5svue/tree/master/src/assets
第六步:下面是在VUE中的代码
<template>
<div class="h5videowrapper h5container" >
<video class="h5video" id='h5sVideoid' ></video>
</div>
</template>
<script>
import {H5sPlayerWS,H5sPlayerHls,H5sPlayerRTC} from '../../store/camera/h5splayer.js'
import {H5siOS,H5sPlayerCreate} from '../../store/camera/h5splayerhelper.js'
export default {
name: 'liveplayer',
props:['h5id', 'h5videoid'],
data () {
return {
videoid: this.h5videoid,
h5handler: undefined,
currtoken: undefined,
ptzshow: false,
proto: 'WS'
}
},
activated() {
console.log(this.h5id, "activated");
},
deactivated() {
console.log(this.h5id, "deactivated");
},
beforeDestroy() {
console.log(this.h5id, "beforeDestroy");
if (this.h5handler != undefined)
{
this.h5handler.disconnect();
delete this.h5handler;
this.h5handler = undefined;
}
this.currtoken = undefined;
},
destroyed() {
console.log(this.h5id, "destroyed");
},
mounted() {
this.PlayVideo('token1');
},
methods: {
PlayVideo(token)
{
if (this.h5handler != undefined)
{
this.h5handler.disconnect();
delete this.h5handler;
this.h5handler = undefined;
}
this.currtoken = token;
console.log("play ", token);
var root = process.env.API_ROOT;
var wsroot = process.env.WS_HOST_ROOT;
if (root == undefined){
root = window.location.protocol + '//' + window.location.host + window.location.pathname;
}
if (wsroot == undefined)
{
wsroot = window.location.host;
}
var conf1 = {
videoid:'h5sVideoid',
protocol: window.location.protocol, //'http:' or 'https:'
// host: window.location.host, //'localhost:8080'
host: 'localhost:8089', //'localhost:8080'
rootpath:'/', // '/' or window.location.pathname
token:token,
hlsver:'v1', //v1 is for ts, v2 is for fmp4
session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
};
this.h5handler =H5sPlayerCreate(conf1);
//this.h5handler = new H5sPlayerRTC(conf);
this.h5handler.connect();
},
CloseVideo(event)
{
var $container = $("#"+this.h5id);
var $controls = $container.children(".h5controls");
var $rtcbutton = $controls.children(".rtcbutton");
if (this.h5handler != undefined)
{
$rtcbutton.css("display", "none");
this.h5handler.disconnect();
delete this.h5handler;
this.h5handler = undefined;
this.$Notice.info({
title: "Stop successfully"
})
}
}
}
}
//fill scale-down
</script>
<style scoped>
.h5video{
width: 80%;
height: 50%;
background: black;
}
</style>
注意根据自己的情况 修改h5splayer.js,h5splayerhelper.js 的文件路径,代码中的host端口目前是写死的 这个端口需要和第2步骤h5ss.conf文件中的nHTTPPort保持一致
更多推荐
所有评论(0)