vue3关于在线考试实现监考功能推流拉流

最新推荐文章于 2024-07-31 12:41:08 发布

最新推荐文章于 2024-07-31 12:41:08 发布

阅读量927

点赞数 21

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/vue1024/article/details/140263640

版权

vue3 关于在线考试实现监考功能，

pc端考试本质是直播推流的功能

使用腾讯云直播: 在线文档

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<link rel="icon" href="/favicon.ico">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>xxx/title>
</head>
<style>
</style>

<body>
	<div id="app"></div>
	<script type="module" src="/src/main.ts"></script>
	<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.1.min.js" charset="utf-8"></script>
</body>
<script type="text/javascript">
	window.TXLivePusher = TXLivePusher
</script>

</html>

TXLivePusher.js

class TXLivePusher {
	static onWarningCode(code) {
		const msg = {
			'-1001': '打开摄像头失败。',
			'-1005': '摄像头被中断（设备被拔出或者权限被用户取消）',
			'-1007': '屏幕分享被中断（ Chrome 浏览器点击自带的停止共享按钮）。',
		}
		alert(msg[code + ''])
	}
	constructor(id) {
		this.id = id;
		this.CameraStatus = true;
		this.MicrophoneStatus = true;
		//@ts-expect-error
		this.livePusher = new window.TXLivePusher();
		this.deviceManager = this.livePusher.getDeviceManager(); //获取当前流的设备信息。
		this.ObserveTitle = '正在录制中'
	}
	init(safeUrl) {
		//静态函数，检查浏览器支持性。
		//@ts-expect-error
		window.TXLivePusher.checkSupport().then((data) => {
			// 是否支持WebRTC  
			if (data.isWebRTCSupported) {
				this.livePusher.setRenderView(this.id)
				// 设置视频质量
				this.livePusher.setVideoQuality('720p');
				// 设置音频质量
				this.livePusher.setAudioQuality('standard')
				// 自定义设置帧率
				this.livePusher.setProperty('setVideoFPS', 25);
				// 打开摄像头
				this.livePusher.startCamera();
				// 打开麦克风
				// this.livePusher.startMicrophone();
				//设置推流事件回调通知
				//设置推流事件回调通知
				this.livePusher.setObserver({
					//首帧视频采集完成的回调通知。
					onCaptureFirstVideoFrame: () => {
						if (safeUrl) {
							this.livePusher.startPush(`${safeUrl}`);
						}
					},
					onError: (status, msg) => {
						this.ObserveTitle = '录制失败'
						console.log(status, msg);
					},
					// 推流警告信息
					onWarning: (code, msg) => {
						console.log(code, msg);
						this.ObserveTitle = '录制失败'
						TXLivePusher.onWarningCode(code)
					},
					// 推流连接状态
					onPushStatusUpdate: (status, msg) => {
						console.log('推流连接状态', status, msg);
						// if (status === 0) this.ChangeCamera(false);
						// if (status === 2) this.ChangeCamera(true);
					},
					// 推流统计数据
					onStatisticsUpdate: (data) => {
						// console.log('video fps is ' + data.video.framesPerSecond);
					}
				});
			} else {
				this.ObserveTitle = '录制失败'
				alert('浏览器不支持');
			}
		});
	}
	// 获取摄像头设备
	getDevicesList() {
		return new Promise((resolve) => {
			// 获取设备列表
			this.deviceManager.getDevicesList('video').then(function (data) {
				resolve(data)
			});
		})
	}
	//切换摄像头设备
	switchCamera(cameraDeviceId) {
		this.deviceManager.switchCamera(cameraDeviceId);
	}
	//打开摄像头设备
	startCamera(cameraDeviceId) {
		this.livePusher.startCamera(cameraDeviceId);
	}

	closeClick() {
		//停止推流
		this.livePusher.stopPush();

		//需要停一段时间再关闭麦克风
		// 关闭摄像头
		this.livePusher.stopCamera();
		// 关闭麦克风
		this.livePusher.stopMicrophone();
		// 清理 SDK 实例
		this.livePusher.destroy()
	}
	// 查询是否推流中
	isPushing() {
		return this.livePusher.isPushing();
	}
}
export default TXLivePusher;

index.vue

<template>
	<div id="id_local_video" class="lacal_videl"></div>
</template>

<script setup lang="ts">
import TXLivePusher from './TXLivePusher'
const TXLivePusherObj = ref<any>({})
const getDomainPushUrl = async () => {
//替换自己项目的推流接口 
	const res = await bank.GetDomainPushUrl_API({})
	if (res.code === 200) {
		TXLivePusherObj.value = new TXLivePusher('id_local_video');
		TXLivePusherObj.value.init(res.data)
	}
}

onMounted(() => {
	getDomainPushUrl()
})

onBeforeUnmount(() => {
	TXLivePusherObj.value.closeClick()
})
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述
后台巡考观看实现拉流功能

使用腾讯云直播: 在线文档
index.html
Web 播放器 SDK （TCPlayer）

	<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet" />
	<!--播放器脚本文件-->
	<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>

index.vue

<video id="playerVideo" width="240" height="180" preload="auto" playsinline
webkit-playsinline></video>
<script>
//请求后端拉流接口
const player = TCPlayer('playerVideo' + props.item.sourceId, {
			autoplay: true,
			controls: false,
			webrtcConfig: {
				connectRetryCount: 1,
				receiveAudio: false,
			}
		});
		player.src('xxxxx');
</script>