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');
	}
},
相关推荐
砺能1 小时前
uniapp生成的app添加操作日志
前端·uni-app
2501_915921435 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs5 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟5 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农5 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q19632884755 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家7 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow7 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app
2501_915918419 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview