一、效果图

其中窗口录屏不带声音，chrome标签和整个屏幕的录屏是带声音的

二、安装插件

npm i recordrtc

三、直接上代码

<template><div class="record-page"><div style="margin-bottom: 15px"><el-button @click="startRecording" :disabled="videoStart" size="small">开始录制</el-button><el-button@click="stopRecording":disabled="!videoStart"size="small"id="btn-stop-recording">结束录制</el-button></div><video controls autoplay playsinline ref="video" width="400" height="300"></video></div>
</template><script>
import RecordRTC from 'recordrtc'
export default {name: 'screenRecord',data() {return {video: null,videoStart: false,recorder: null,}},created() {if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {let error = 'Your browser does NOT support the getDisplayMedia API.'throw new Error(error)}},mounted() {this.video = document.querySelector('video')},methods: {invokeGetDisplayMedia(success, error) {let displaymediastreamconstraints = {video: {displaySurface: 'monitor', // monitor, window, application, browserlogicalSurface: true,cursor: 'always', // never, always, motion},}// above constraints are NOT supported YET// that's why overridnig themdisplaymediastreamconstraints = {video: true,audio: true,}if (navigator.mediaDevices.getDisplayMedia) {navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error)} else {navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error)}},captureScreen(callback) {this.invokeGetDisplayMedia(screen => {this.addStreamStopListener(screen, () => {//})callback(screen)},function (error) {console.error(error)alert('Unable to capture your screen. Please check console logs.\n' + error)})},addStreamStopListener(stream, callback) {stream.addEventListener('ended',function () {callback()callback = function () {}},false)stream.addEventListener('inactive',function () {callback()callback = function () {}},false)stream.getTracks().forEach(track => {track.addEventListener('ended',() => {this.stopRecording()callback()callback = function () {}},false)track.addEventListener('inactive',function () {callback()callback = function () {}},false)})},startRecording() {this.captureScreen(screen => {this.video.srcObject = screenthis.recorder = RecordRTC(screen, {type: 'video',mimeType: 'video/webm',})this.recorder.startRecording()// release screen on stopRecordingthis.recorder.screen = screenthis.videoStart = true})},stopRecordingCallback() {this.video.src = this.video.srcObject = nullthis.video.src = URL.createObjectURL(this.recorder.getBlob())// 如果需要下载录屏文件可加上下面代码let url = URL.createObjectURL(this.recorder.getBlob())const a = document.createElement('a')document.body.appendChild(a)a.style.display = 'none'a.href = urla.download = new Date() + '.mp4'a.click()window.URL.revokeObjectURL(url)//以上是下载所需代码this.recorder.screen.stop()this.recorder.destroy()this.recorder = nullthis.videoStart = false},stopRecording() {this.recorder.stopRecording(this.stopRecordingCallback)},},
}
</script><style scoped></style>

链接: https://blog.csdn.net/weixin_64141611/article/details/123873781
链接: https://blog.csdn.net/it_xushixiong/article/details/131224532