uniapp在线视频监控开发

我这里是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秒，浏览器不支持。

架构描述：

上代码：

javascript 复制代码

<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 H5
			this.$nextTick(res => {
				this.videoPush()
			})
			// #endif
		},
		onUnload: function() {
			// #ifdef H5
			this.flv_destroy()
			// #endif
		},
		methods: {
			videoPush: function() {
				var video = document.createElement('video')
				video.id = 'video'
				video.style = 'width: 100%;'
				video.controls = true
				this.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°来模拟全屏。

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

javascript 复制代码

<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');
	}
},