fe-qbee-video-compoennt v0.2.34
fe-qbee-video-compoennt
简介
数据集成-音视频播放组件
仓库地址
https://git.cisdigital.cn/qt/qbee/fe/fe-qbee/fe-qbee-video-compoennt
快速开始
1.安装
npm i fe-qbee-video-compoennt -S2.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录像回放播放器
将 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 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.安装
```bash 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>7 months ago