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

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-errorthis.livePusher = new window.TXLivePusher();this.deviceManager = this.livePusher.getDeviceManager(); //获取当前流的设备信息。this.ObserveTitle = '正在录制中'}init(safeUrl) {//静态函数，检查浏览器支持性。//@ts-expect-errorwindow.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>