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

uniapp在线视频监控开发

news 来源：原创 2024/9/21 11:02:27

我这里是uniapp开发的H5项目

视频流是flv模式

用到的插件是flv.js

Flv.js

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。。由 bilibili 网站开源。

常见直播协议

RTMP: 底层基于TCP，在浏览器端依赖Flash。
HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。
WebSocket-FLV: 基于WebSocket传输FLV，依赖浏览器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket连接前还要先建立HTTP连接。
HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。
RTP: 基于UDP，延迟1秒，浏览器不支持。

架构描述：

上代码：

<template><!-- 直播 --><view class="mylive flex align_center"><view class="sp_live"><view class="video-js flex" ref="video"> </view></view></view>
</template><script>export default {data() {return {videoDeviceId: '',flvPlayer: '',VideoDeviceUrl: ''}},onLoad: function(option) {this.VideoDeviceUrl = decodeURIComponent(option.liveUrl)// #ifdef H5this.$nextTick(res => {this.videoPush()})// #endif},onUnload: function() {// #ifdef H5this.flv_destroy()// #endif},methods: {videoPush: function() {var video = document.createElement('video')video.id = 'video'video.style = 'width: 100%;'video.controls = truethis.flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,url: this.VideoDeviceUrl});this.flvPlayer.attachMediaElement(video);this.flvPlayer.load();this.flvPlayer.play();this.$refs.video.$el.appendChild(video)},//注销视频flv_destroy() {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = null;},		}}
</script>

常用方法：

isSupported()：boolean：判断当前浏览器是否支持播放
createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例
play(): void: 开始播放视频。
pause(): void: 暂停视频播放。
destroy(): void: 销毁播放器实例并释放资源。
attachMediaElement(mediaElement: HTMLVideoElement): void: 绑定HTMLVideoElement 元素并进行播放。
detachMediaElement(): void: 解绑 HTMLVideoElement 元素。
attachMSE(mse: MediaSource): void: 绑定 MediaSource 对象。
detachMSE(): void: 解绑 MediaSource 对象。
load(optional: {reset: boolean}): void: 加载当前流并准备播放，但不自动开始播放。
unload(): void: 卸载当前流。
toggle(): void: 切换播放状态。
isPlaying(): boolean: 返回播放器是否正在播放。
getDuration(): number: 返回流总播放时间。
getCurrentTime(): number: 返回当前播放时间。
setCurrentTime(time: number): void: 跳转到指定时间点进行播放。
getVolume(): number: 返回当前音量。
setVolume(volume: number): void: 设置音量。
mute(): void: 静音。
unmute(): void: 取消静音。
getPlaybackRate(): number: 返回播放速率。
setPlaybackRate(rate: number): void: 设置播放速率。

但是在我项目中遇到一个问题就是，使用这个插件的全屏的时候（这个全屏功能好像在电脑上是页面全屏，视频没有全屏），ios设备不支持全屏，并且安卓设备全屏的时候也有问题，所有我就自己设置了一个点击事件，将页面顺时针旋转90°来模拟全屏。

下面是旋转的点击事件代码：

<button v-if="showBtn" id="rotate-btn" class="rotateBtn" @click="rotates">旋转<u-icon style="margin-left: 2rpx;" name="reload"></u-icon> 
</button>rotates(){const rotateElement = document.getElementById('container');const rotateBtnElement = document.getElementById('rotate-btn');if (rotateElement.classList.contains('initial')) {rotateElement.classList.remove('initial');rotateElement.classList.add('rotated');} else {rotateElement.classList.remove('rotated');rotateElement.classList.add('initial');}
},