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>
（更新中……）)
