vue项目中的录屏插件recordrtc且带声音
一、效果图
其中窗口录屏不带声音,chrome标签和整个屏幕的录屏是带声音的
二、安装插件
npm i recordrtc
三、直接上代码
javascript
<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, browser
logicalSurface: true,
cursor: 'always', // never, always, motion
},
}
// above constraints are NOT supported YET
// that's why overridnig them
displaymediastreamconstraints = {
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 = screen
this.recorder = RecordRTC(screen, {
type: 'video',
mimeType: 'video/webm',
})
this.recorder.startRecording()
// release screen on stopRecording
this.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>
链接: https://blog.csdn.net/weixin_64141611/article/details/123873781
链接: https://blog.csdn.net/it_xushixiong/article/details/131224532