海门网站建设培训,台州网站怎么推广,企业网站优化推广公司,做ppt兼职的网站有哪些vue项目中的录屏插件recordrtc且带声音 一、效果图二、安装插件三、直接上代码 一、效果图 其中窗口录屏不带声音#xff0c;chrome标签和整个屏幕的录屏是带声音的
二、安装插件 npm i recordrtc 三、直接上代码
templatediv classrecord-page… vue项目中的录屏插件recordrtc且带声音 一、效果图二、安装插件三、直接上代码 一、效果图 其中窗口录屏不带声音chrome标签和整个屏幕的录屏是带声音的
二、安装插件 npm i recordrtc 三、直接上代码
templatediv classrecord-pagediv stylemargin-bottom: 15pxel-button clickstartRecording :disabledvideoStart sizesmall开始录制/el-buttonel-buttonclickstopRecording:disabled!videoStartsizesmallidbtn-stop-recording结束录制/el-button/divvideo controls autoplay playsinline refvideo width400 height300/video/div
/templatescript
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// thats 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 nonea.href urla.download new Date() .mp4a.click()window.URL.revokeObjectURL(url)//以上是下载所需代码this.recorder.screen.stop()this.recorder.destroy()this.recorder nullthis.videoStart false},stopRecording() {this.recorder.stopRecording(this.stopRecordingCallback)},},
}
/scriptstyle scoped/style
链接: https://blog.csdn.net/weixin_64141611/article/details/123873781 链接: https://blog.csdn.net/it_xushixiong/article/details/131224532
