69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<div style="height: 100%;width: 100%;">
|
|
<video id="videoElement" muted="muted" style="object-fit:fill"></video>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import sysConfig from "@/config";
|
|
export default {
|
|
props: {
|
|
channelCode: {
|
|
type: String,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
flvPlayer: null,
|
|
params: {
|
|
json: {
|
|
data: {
|
|
channelId: "",
|
|
streamType: "2",
|
|
type: "flv",
|
|
},
|
|
},
|
|
code: "video_realtime",
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
const scriptInfo = document.createElement("script");
|
|
scriptInfo.setAttribute("data-callType", "callScript");
|
|
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
|
document.head.appendChild(scriptInfo);
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
that.params.json.data.channelId = that.channelCode;
|
|
that.$API.am.video.item.req(that.params).then((res) => {
|
|
that.url = res.url;
|
|
debugger;
|
|
if (flvjs.isSupported()) {
|
|
debugger;
|
|
console.log(sysConfig.VUE_APP_VIDEOHOST);
|
|
debugger;
|
|
let videoElement = document.getElementById("videoElement");
|
|
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
|
debugger;
|
|
console.log(URLS)
|
|
that.flvPlayer = flvjs.createPlayer({
|
|
type: "flv",
|
|
url: URLS,
|
|
});
|
|
that.flvPlayer.attachMediaElement(videoElement);
|
|
that.flvPlayer.load();
|
|
that.flvPlayer.play();
|
|
}
|
|
});
|
|
},
|
|
beforeUnmount(){
|
|
let that = this;
|
|
that.flvPlayer.pause();
|
|
that.flvPlayer.unload();
|
|
that.flvPlayer.detachMediaElement();
|
|
that.flvPlayer.destroy();
|
|
that.flvPlayer = null;
|
|
},
|
|
};
|
|
</script>
|