当前位置：首页 > article >正文

vue项目中播放ws（Websocket协议）视频流

article 2025/3/29 16:37:03

一、海康开放平台H5视频播放器开发包下载
https://open.hikvision.com/download/5c67f1e2f05948198c909700
在这里插入图片描述

二、vue项目引入
1、解压h5player_2.5.1压缩包，将playctrl3文件夹、h5player.min.js文件赋值到vue项目public文件夹下，并在项目入口文件index.html中引入h5player.min.js文件。
在这里插入图片描述

<script src="js/h5player.min.js"></script>

三、vue页面使用

<template>
    <div id="player" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {
    data () {
        return {
            player: null
        }
    },
    mounted () {
        // 例如一屏播放4个视频，写法如下
        this.initPlayer(2);
        let arr = ['ws://...', 'ws://...', 'ws://...', 'ws://...'];
        arr.forEach((url, index) => {
            this.realplay(url, index);
        })
    },
    methods: {
        // 初始化
        initPlayer (num = 1) { // 设置分屏：1*1、2*2、3*3、4*4
            this.player = new JSPlugin({
                szId: 'player', // 父窗口id，需要英文字母开头 必填
                szBasePath: "js/", // 必填,与h5player.min.js的引用路径一致
                iMaxSplit: 4, // 分屏播放，默认最大分屏4*4
                openDebug: true,
                mseWorkerEnable: false,//是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
                bSupporDoubleClickFull: true,//是否支持双击全屏，true-双击是全屏；false-双击无响应
                oStyle: {
                    borderSelect: '#343434', // 选中视频的边框颜色，默认选择第一个，颜色为#fc0
                }
            })
            this.player.JS_ArrangeWindow(num).then(
                () => { console.log(`arrangeWindow to ${num}x${num} success`) },
                e => { console.error(e) }
            )
        },
        // 预览
        realplay (playURL = '', index = 0) { // 设置第index（从0开始）个窗口的视频地址
            this.player.JS_SetTraceId(index, true);
            this.player.JS_Play(playURL, { playURL, mode: 0, keepDecoder: 0, token: '' }, index).then(
                () => {
                    console.log('realplay success');
                    this.player.JS_GetTraceId(index).then((id) => { console.log("traceid:", id) })
                },
                e => { console.error(e) }
            )  
        },
    }
}
</script>
<style scoped lang="less">
    /* 由于我的视频没有撑满整个容器，所以加了下面的样式，如果没遇到这种情况可以忽略。*/
    // 设置2*2分屏时
    /deep/#player {
        & > div, & > div > div > video {
            width: 100% !important;
            height: 100% !important;
        }
        & > div > div {
            width: 50% !important;
            height: 50% !important;
        }
    }
    /*
    // 设置1*1分屏时
    /deep/#player {
        & > div,
        & > div > div,
        & > div > div > video {
            width: 100% !important;
            height: 100% !important;
        }
    }
    */
</style>

注：由于我的功能比较简单，所以用到的方法不多，有更多需求可以查看压缩包里面doc文件夹下的H5player2.5.1开发指南.html文档进行学习，也可以预览demo文件夹下的demo.html文件并查看源代码进行参考。
在这里插入图片描述
这篇文章介绍了rtsp视频流播放方法，有需要可以看看：
https://blog.csdn.net/Dalin0929/article/details/142856685?spm=1001.2014.3001.5501