vue视频录制 限制大小，限制时长

<template><div style="height: 100vh;background: #000;"><span style="color: #fff;font-size: 18px;">切换数量：{{ devices.length }}</span><video ref="video" autoplay muted playsinline></video><div class="video_btn"><van-button round @click="start" type="info">{{ isRecording ? `${timernum}秒后停止录制` : '开始录制' }}</van-button><van-button round @click="switchCamera" :disabled="isRecording">切换摄像头</van-button></div><video v-if="recordedVideoUrl" :src="recordedVideoUrl" controls></video></div>
</template><script>
export default {data() {return {mediaStream: null, // 摄像头视频流mediaRecorder: null, // 媒体录制器recordedChunks: [], // 录制的数据块recordedVideoUrl: null, // 录制后的视频 URLisRecording: false, // 是否正在录制currentDeviceId: null, // 当前摄像头设备 IDcurrentText: true, // true前 false后devices: [], // 设备列表timer: null, // 计时器，用于限制录制时间timernum: 30, // 计时器，用于限制录制时间maxFileSize: 100 * 1024 * 1024, // 100MB}},mounted() {this.startCamera()},methods: {async startCamera() {try {// 获取设备列表const devices = await navigator.mediaDevices.enumerateDevices()this.devices = devices.filter(device => device.kind === "videoinput")if (this.devices.length === 0) {throw new Error("没有找到摄像头设备")}// 默认选择第一个设备 首次前置this.currentDeviceId = this.devices[0].deviceId// 获取视频流并绑定this.mediaStream = await navigator.mediaDevices.getUserMedia({video: { deviceId: this.currentDeviceId }})const videoElement = this.$refs.videovideoElement.srcObject = this.mediaStream} catch (error) {console.error("无法访问摄像头:", error)}},// 开始录制或停止录制start() {if (this.isRecording) {this.stopRecording()} else {this.startRecording()}},startRecording() {if (this.mediaStream) {this.mediaRecorder = new MediaRecorder(this.mediaStream)this.recordedChunks = []this.mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {this.recordedChunks.push(event.data)// 检查文件大小是否超过 95MBconst totalSize = this.recordedChunks.reduce((acc, chunk) => acc + chunk.size, 0)if (totalSize > this.maxFileSize) {this.stopRecording()}}}this.mediaRecorder.onstop = () => {const blob = new Blob(this.recordedChunks, { type: "video/webm" })this.recordedVideoUrl = URL.createObjectURL(blob)}this.timer = setInterval(() => {this.settime()}, 1000) // 60秒后停止录制this.mediaRecorder.start()this.isRecording = true}},settime() {if (this.timernum < 1) {this.stopRecording()clearInterval(this.timer)return} else {this.timernum--}},stopRecording() {if (this.mediaRecorder) {this.mediaRecorder.stop()clearInterval(this.timer) // 停止定时器this.isRecording = false}this.timernum = 30},async switchCamera() {// if (this.currentText) {//   this.$toast('数值：' + this.currentText)//   this.currentText = false// } else {//   this.$toast('数值：' + this.currentText)//   this.currentText = true// }// returntry {// 停止当前的媒体流this.stopStream()// 切换到下一个摄像头设备（循环切换）const devices = await navigator.mediaDevices.enumerateDevices()this.devices = devices.filter(device => device.kind === "videoinput")let currentIndex = 0if (this.devices.length == 2) {currentIndex = this.devices.findIndex(device => device.deviceId === this.currentDeviceId)const nextIndex = (currentIndex + 1) % this.devices.lengththis.currentDeviceId = this.devices[nextIndex].deviceId} else if (this.devices.length > 2) {if (this.currentText) {this.currentDeviceId = this.devices[1].deviceIdthis.currentText = false} else {this.currentDeviceId = this.devices[0].deviceIdthis.currentText = true}}// 获取新的摄像头流this.mediaStream = await navigator.mediaDevices.getUserMedia({video: { deviceId: this.currentDeviceId }})const videoElement = this.$refs.videovideoElement.srcObject = this.mediaStream} catch (error) {this.$toast('无法切换摄像头' + error)}},stopStream() {if (this.mediaStream) {const tracks = this.mediaStream.getTracks()tracks.forEach(track => track.stop())}}}
}
</script><style>
.video_btn {position: fixed;bottom: 30px;z-index: 99;display: flex;justify-content: space-around;align-items: center;width: 100%;max-width: 640px;margin: 0 auto;
}video {width: 100%;height: 80vh;max-width: 640px;margin: 0 auto;
}
</style>