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秒，浏览器不支持。
架构描述：
上代码：
<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');}
},