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>
