mkl_power_box/js/mkl-hik-h5-3.js

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()
                            }
                        })
                    })
                }

            }
        }
    }
})