328 lines
12 KiB
JavaScript
328 lines
12 KiB
JavaScript
const { LocaleProvider, locales } = window.antd
|
||
moment.locale('/js/video/zh-cn.js')
|
||
const IS_MOVE_DEVICE = true;//document.body.clientWidth < 992 // 是否移动设备
|
||
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||
|
||
Vue.component("hk-play",{
|
||
template: `
|
||
<div style="position: relative">
|
||
<!--播放组件-->
|
||
<div v-if="playshow">
|
||
<a-locale-provider :locale="zh_CN">
|
||
<div :id="playerID" class="video-style" :style="{'height': height+'px'}"></div>
|
||
</a-locale-provider>
|
||
</div>
|
||
|
||
|
||
<!--抽帧图片-->
|
||
<div v-if="!playshow">
|
||
<img :src="imgsrc==''?'http://fileimg.makalu.cc/WEB_AFA383A2D8034131B84427B8F889508E.png':imgsrc" @click="playVideo" class="video-style " :style="{'height': height+'px'}">
|
||
</div>
|
||
|
||
<!--全屏按钮-->
|
||
<div class="full-screen" style="position: absolute;width: 2.5rem;height: 2.5rem;background: url('https://fileimg.makalu.cc/WEB_730EEFB0BB7E4722A5870D39DA25E140.png') no-repeat center/1rem 1rem;right: 0px;bottom: 0px;" v-show="fullState == 1" @click="wholeFullScreen"></div>
|
||
|
||
<!--播放按钮-->
|
||
<div class="video-style video-style-active" @click="playVideo" v-if="playimgState != 1 && playstate != 1" :style="{'height': height+'px'}">
|
||
<div class="video-active">
|
||
<img src="https://fileimg.makalu.cc/WEB_184D8D2DDDBB4FE7B6627DC5FB64D943.png">
|
||
</div>
|
||
</div>
|
||
<!--摄像头名称-->
|
||
<div v-show="videoname != ''" style="height: 30px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
|
||
<span v-html="videoname"></span>
|
||
</div>
|
||
</div>
|
||
`,
|
||
props:{
|
||
token:{
|
||
type:String,
|
||
default(){
|
||
return ""
|
||
}
|
||
},
|
||
//在线状态（0 在线，1 离线）
|
||
playstate:{
|
||
type:Number,
|
||
default(){
|
||
return 0
|
||
}
|
||
},
|
||
//全屏按钮状态（0 不显示，1 显示）
|
||
fullState:{
|
||
type:Number,
|
||
default(){
|
||
return 0
|
||
}
|
||
},
|
||
//播放按钮状态（0 不显示，1 显示）
|
||
playimgState:{
|
||
type:Number,
|
||
default(){
|
||
return 0
|
||
}
|
||
},
|
||
playtype:{
|
||
type:Number,
|
||
default(){
|
||
return ""
|
||
}
|
||
},
|
||
//视频名称
|
||
videoname:{
|
||
type:String,
|
||
default(){
|
||
return ""
|
||
}
|
||
},
|
||
height:{
|
||
type:Number,
|
||
default(){
|
||
return 0
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
zh_CN: locales.zh_CN,
|
||
player: null,
|
||
mseSupport: MSE_IS_SUPPORT,
|
||
tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
||
labelCol: { span: 5 },
|
||
wrapperCol: { span: 18 },
|
||
urls: {
|
||
realplay: ""
|
||
},
|
||
playerID: "",
|
||
imgsrc:"",
|
||
playshow:true,
|
||
playType:0
|
||
}
|
||
},
|
||
computed: {
|
||
mode: function() {
|
||
return this.tabActive === 'mse' ? 0 : 1
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
// 设置播放容器的宽高并监听窗口大小变化
|
||
window.addEventListener('resize', () => {
|
||
this.player.JS_Resize()
|
||
})
|
||
},
|
||
createPlayer() {
|
||
console.log("playerID==============="+this.playerID)
|
||
this.player = new window.JSPlugin({
|
||
szId: this.playerID,
|
||
szBasePath: "/",
|
||
iMaxSplit: 4,
|
||
openDebug: false,
|
||
})
|
||
|
||
// 事件回调绑定
|
||
this.player.JS_SetWindowControlCallback({
|
||
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
|
||
console.log('windowSelect callback: ', iWndIndex);
|
||
},
|
||
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
|
||
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
|
||
},
|
||
windowEventOver: function (iWndIndex) { //鼠标移过回调
|
||
//console.log(iWndIndex);
|
||
},
|
||
windowEventOut: function (iWndIndex) { //鼠标移出回调
|
||
//console.log(iWndIndex);
|
||
},
|
||
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
|
||
//console.log(iWndIndex);
|
||
},
|
||
windowFullCcreenChange: function (bFull) { //全屏切换回调
|
||
console.log('fullScreen callback: ', bFull);
|
||
},
|
||
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
|
||
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
|
||
},
|
||
performanceLack: function () { //性能不足回调
|
||
console.log('performanceLack callback: ');
|
||
}
|
||
});
|
||
},
|
||
/* 预览&对讲 */
|
||
realplay() {
|
||
let { player, mode, urls } = this,
|
||
index = player.currentWindowIndex,
|
||
playURL = urls.realplay
|
||
|
||
player.JS_Play(playURL, { playURL, mode }, index).then(
|
||
() => {
|
||
console.log('realplay success>>>>>>>>>',this.playType,this.token)
|
||
if(this.playType == 0){
|
||
this.capture()
|
||
this.playshow = false;
|
||
}
|
||
},
|
||
e => { console.error(e) }
|
||
)
|
||
},
|
||
stopPlay() {
|
||
this.player.JS_Stop().then(
|
||
() => { console.log('stop realplay success') },
|
||
e => { console.error(e) }
|
||
)
|
||
},
|
||
stopAllPlay() {
|
||
this.player.JS_StopRealPlayAll().then(
|
||
() => { console.log('stopAllPlay success') },
|
||
e => { console.error(e) }
|
||
)
|
||
},
|
||
frameForward() {
|
||
this.player.JS_FrameForward(this.player.currentWindowIndex).then(
|
||
() => { console.log('frameForward success') },
|
||
e => { console.error(e) }
|
||
)
|
||
},
|
||
wholeFullScreen() {
|
||
this.player.JS_FullScreenDisplay(true).then(
|
||
() => { console.log(`wholeFullScreen success`) },
|
||
e => { console.error(e) }
|
||
)
|
||
},
|
||
capture() {
|
||
let fileName = 'img';
|
||
let fileType = 'JPEG';
|
||
let player = this.player,
|
||
index = player.currentWindowIndex
|
||
|
||
player.JS_CapturePicture(index, fileName, fileType, imageData => {
|
||
console.info('JS_CapturePicture success'); //2.1.0开始全是base64，之前的版本存在blob或者是base64
|
||
this.imgsrc = imageData;
|
||
this.stopPlay()
|
||
},error => {
|
||
console.error(error)
|
||
})
|
||
},
|
||
guid(){
|
||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||
let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
|
||
return v.toString(16);
|
||
});
|
||
},
|
||
playVideo(){
|
||
if(this.playstate == 0){
|
||
this.$emit('init-img-state', this.token)
|
||
var newToken = this.token;
|
||
let _this = this
|
||
this.playerID = newToken;
|
||
this.playType = 1;
|
||
this.playshow = true;
|
||
axios.post("https://video.makalu.cc/mkl/api/getPlay", {
|
||
protocol: "wss",
|
||
playAdder: newToken
|
||
}).then(res => {
|
||
if(res.data.code != "400"){
|
||
this.playshow = true;
|
||
let data = eval("(" + res.data.data + ")")
|
||
_this.urls = {
|
||
realplay: data.url
|
||
}
|
||
_this.init()
|
||
_this.createPlayer()
|
||
_this.realplay()
|
||
}else{
|
||
this.playshow = false;
|
||
this.imgsrc = "https://fileimg.makalu.cc/WEB_4F94763168A84B118CAEDF5C562D6E0A.png";
|
||
}
|
||
})
|
||
}else{
|
||
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
let _this = this
|
||
this.playerID = this.token
|
||
this.playType = this.playtype;
|
||
if(this.token){
|
||
if(this.playstate == 0){
|
||
this.$nextTick(function () {
|
||
axios.post("https://video.makalu.cc/mkl/api/getPlay", {
|
||
protocol: "wss",
|
||
playAdder: _this.token
|
||
}).then(res => {
|
||
if(res.data.code != "400"){
|
||
let data = eval("(" + res.data.data + ")")
|
||
_this.urls = {
|
||
realplay: data.url
|
||
}
|
||
_this.createPlayer()
|
||
_this.realplay()
|
||
}else{
|
||
this.playshow = false;
|
||
this.imgsrc = "https://fileimg.makalu.cc/WEB_4F94763168A84B118CAEDF5C562D6E0A.png";
|
||
}
|
||
})
|
||
})
|
||
}else{
|
||
this.playshow = false;
|
||
this.imgsrc = "https://fileimg.makalu.cc/WEB_4F94763168A84B118CAEDF5C562D6E0A.png";
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
token: function (n,o) {
|
||
let _this = this
|
||
this.playerID = _this.token
|
||
if(this.token && this.playstate == 0){
|
||
this.$nextTick(function () {
|
||
axios.post("https://video.makalu.cc/mkl/api/getPlay", {
|
||
protocol: "wss",
|
||
playAdder: _this.token
|
||
}).then(res => {
|
||
console.log("_this"+_this.token)
|
||
if(res.data.code != "400"){
|
||
let data = eval("(" + res.data.data + ")")
|
||
_this.urls = {
|
||
realplay: data.url
|
||
}
|
||
_this.playshow = true;
|
||
_this.realplay()
|
||
}
|
||
})
|
||
})
|
||
}else{
|
||
this.playshow = false;
|
||
this.imgsrc = "https://fileimg.makalu.cc/WEB_4F94763168A84B118CAEDF5C562D6E0A.png";
|
||
}
|
||
},
|
||
playtype:function (n,o){
|
||
console.log(o+"-----------"+n)
|
||
if(n===0){
|
||
let _this = this
|
||
this.playType = n;
|
||
this.playerID = _this.token
|
||
if(this.token && this.playstate == 0){
|
||
this.$nextTick(function () {
|
||
axios.post("https://video.makalu.cc/mkl/api/getPlay", {
|
||
protocol: "wss",
|
||
playAdder: _this.token
|
||
}).then(res => {
|
||
console.log("_this"+_this.token)
|
||
if(res.data.code != "400"){
|
||
let data = eval("(" + res.data.data + ")")
|
||
_this.urls = {
|
||
realplay: data.url
|
||
}
|
||
_this.playshow = false;
|
||
_this.stopPlay()
|
||
_this.capture()
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}) |