第一步：下載安裝包

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};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 = screen;this.recorder = RecordRTC(screen, {type: 'video'});this.recorder.startRecording();// release screen on stopRecordingthis.recorder.screen = screen;this.videoStart = true;});},stopRecordingCallback() {this.video.src = this.video.srcObject = null;this.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 = url;a.download = new Date() + ".mp4";a.click();window.URL.revokeObjectURL(url);//以上是下載所需代碼this.recorder.screen.stop();this.recorder.destroy();this.recorder = null;this.videoStart = false;},stopRecording() {this.recorder.stopRecording(this.stopRecordingCallback);}},} </script><style scoped></style>

總結

以上是生活随笔為你收集整理的一款好用的基于vue的录屏插件recordrtc，拿走不谢的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。