fe-qbee-video-compoennt

v0.2.34

Published

2 years ago

数据集成-音视频播放组件

0High
0Medium
0Low

liu_liu

fe-qbee-video-compoennt

简介

数据集成-音视频播放组件

仓库地址

https://git.cisdigital.cn/qt/qbee/fe/fe-qbee/fe-qbee-video-compoennt

快速开始

1.安装

npm i fe-qbee-video-compoennt -S

2.1 引入直播播放器

将 public文件夹中的 -jessibuca-pro.js -decoder-pro.js -decoder-pro.wasm -decoder-pro-simd.js -decoder-pro-simd.wasm -decoder-pro-hard.js 都复制出来放在自己项目里的 public 文件中，其中jessibuca-pro.js 需要在 index.html 中引入

<script src="<%= BASE_URL %>jessibuca-pro.js"></script>

import { CandeaComponent } from 'fe-qbee-video-compoennt';

<CandeaComponent 
    :showOperateBtns="true" 
    :debug="false" 
    :src="url" 
    :decodeFilePath="./decoder-pro.js"
    :getUrlFn="getUrlFn" 
    @changePlayState="changePlayState" 
    @error="getError">
</CandeaComponent>

参数解释： src: 视频播放地址 showOperateBtns：是否展示操作栏 debug: 是否产生日志，生产环境建议设置为false getUrlFn：重连函数 changePlayState：播放器状态 error：播放异常

2.1 引入H5录像回放播放器

<script src="<%= BASE_URL %>jessibuca-pro.js"></script>

import CandeaCloudPlaybackComponentH5 from '../components/playback-player/PlaybackPlayer';

 <CandeaCloudPlaybackComponentH5    ref="video"
                                    :videoData="videoData"
                                    :showOperateBtns="true"
                                    :appKey="appKey"</CandeaCloudPlaybackComponentH5>

参数解释： showOperateBtns：是否展示操作栏 videoData： { deviceCode: '11010122001321001095', //设备编码 recordType: 'TIME', //回放类型 startTime: 1694081875627, //开始时间 endTime: 1694081887894 //结束时间 } appKey: app应用的key值

本地调试配置代理

proxy: { '/candea-app/api': { target: '后端服务地址', progress: false, pathRewrite: { '^/candea-app/api': '/' } } }

------------ 下面不再维护 ------------ # fe-qbee-video-compoennt ## 简介数据集成-音视频播放组件，包括了srs播放器(h264-pc端)，zlm播放器（h264-pc端），ws-flv(h265-pc端/移动端)，hls(pc端), httpflv播放器(pc/移动端)。

## 仓库地址
https://git.cisdigital.cn/qt/qbee/fe/fe-qbee/fe-qbee-video-compoennt

## 快速开始
### 1.安装
```shell script
npm i fe-qbee-video-compoennt -S
```

### 2.其他配置

**2.1 引入样式文件**
```
import 'fe-qbee-video-compoennt/dist/VideoComponent.css';
```

2.1 引入 srs播放器

将 public 中的 webrtc-client.js 都复制出来放在自己项目里的 public 文件中， webrtc-client.js 需要在 index.html 中引入

<script src="<%= BASE_URL %>webrtc-client.js"></script>

import { H264VideoComponent } from 'fe-qbee-video-compoennt';

<H264VideoComponent ref="video" :src="currStream.url" :getUrlFn="getUrlFn" @changePlayState="changePlayState" @error="getError"></H264VideoComponent>

参数解释： src: 视频播放地址 getUrlFn：重连函数 changePlayState：播放器状态 error：播放异常

2.3 引入 H265

将 public 中的 jessibuca.js decoder.wasm decoder.js 都复制出来放在自己项目里的 public 文件中， jessibuca.js 需要在 index.html 中引入

<script src="<%= BASE_URL %>jessibuca.js"></script>

import { H265VideoComponent } from 'fe-qbee-video-compoennt'; <H265VideoComponent ref="video" :src="currStream.url" :getUrlFn="getUrlFn" decodeFilePath="./decoder.js" @changePlayState="changePlayState" @error="getError">

2.4 引入 httpflv

import { FLVVideoComponent } from 'fe-qbee-video-compoennt';

<FLVVideoComponent :src="src" ref="video" :getUrlFn="getUrlFn" @changePlayState="changePlayState" @error="getError"></FLVVideoComponent>

参数解释: src: 视频播放地址 getUrlFn：重连函数 changePlayState：播放器状态 error：播放异常

2.5 引入云平台播放器

import { HLSComponent } from 'fe-qbee-video-compoennt';

<HLSComponent:src="src"></HLSComponent>

2.6 引入 zlm播放器

将 public 中的 ZLMRTCClient.js 都复制出来放在自己项目里的 public 文件中， ZLMRTCClient.js 需要在 index.html 中引入

<script src="<%= BASE_URL %>ZLMRTCClient.js"></script>

import { ZLVideoComponent } from 'fe-qbee-video-compoennt';

<ZLVideoComponent ref="video" :src="currStream.url" :getUrlFn="getUrlFn" @changePlayState="changePlayState" @error="getError"></ZLVideoComponent>

参数解释： src: 视频播放地址 getUrlFn：重连函数 changePlayState：播放器状态 error：播放异常 timeout: 超时时间，默认10s

demo参考

<template>
    <div class="test">
        <H265VideoComponent v-if="videoType === 'H265'"
                            :src="src"
                            ref="video"
                            :getUrlFn="getUrlFn"
                            @error="showErrorImg"
                            @changePlayState="changeplayState"></H265VideoComponent>
        <ZLComponent v-if="videoType === 'H264'"
                     :src="src"
                     ref="video"
                     :getUrlFn="getUrlFn"
                     @error="showErrorImg"
                     @changePlayState="changeplayState"></ZLComponent>
        <HttpFlvVideoComponent v-if="videoType === 'FLV'"
                               :src="src"
                               ref="video"
                               :getUrlFn="getUrlFn"></HttpFlvVideoComponent>
        <CloudComponent v-if="videoType === 'Cloud'"
                        :src="src"></CloudComponent>

        <el-input v-model="src"></el-input>
        <el-button @click="aa">点击</el-button>
    </div>
</template>

<script>
// import { H265VideoComponent, H264VideoComponent } from '../../dist/VideoComponent.umd.js';

import H265VideoComponent from '../components/H265/H265Player.vue';
import SRSVideoComponent from '../components/H264/H264Player.vue';
import HttpFlvVideoComponent from '../components/httpflv/HttpFlvPlayer.vue';
import CloudComponent from '../components/cloud-device/Index.vue';
import ZLComponent from '../components/zl-player/ZLPlayer.vue';
export default {
    components: {
        H265VideoComponent,
        SRSVideoComponent,
        CloudComponent,
        HttpFlvVideoComponent,
        ZLComponent
    },
    data() {
        return {
            videoType: '',
            src: '',
            loading: false,
            isError: false,
            tipWord: ''
        };
    },
    async mounted() {
        await this.getUrlFn();
    },
    watch: {
        src: {
            immediate: true,
            handler(val) {
                this.tipWord = !val ? '无连接地址' : '';
            }
        }
    },
    methods: {
        snap() {
            this.$refs.h265Player.screenshot();
        },
        // 判断是H265还是H264 拿到视频url
        getUrlFn() {
            console.log('getUrlFn');
            return new Promise(resolve => {
                setTimeout(() => {
                    this.src = 'webrtc://10.77.24.16:8092/live/SYDez2fx2ruDXxWh';
                    this.videoType = 'H264';
                    resolve();
                }, 1000);
            });
        },
        changeplayState(val) {
            console.log('changeplayState', val);
        },
        showErrorImg(val) {
            this.isError = val;
            this.tipWord = '视频无信号';
        },
        aa() {
            this.$refs.video.play();
        }
    }
};
</script>

<style scoped>
.test {
    width: 50%;
    color: white;
    height: 300px;
}

.test .no-src {
    width: 100%;
    background-color: black;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.no-video {
    width: 100%;
    background-color: black;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
}
</style>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

fe-qbee-video-compoennt

简介

仓库地址

快速开始

1.安装

本地调试配置代理