vue项目中的录屏插件recordrtc且带声音

vue项目中的录屏插件recordrtc且带声音

• 一、效果图
• 二、安装插件
• 三、直接上代码

一、效果图

其中窗口录屏不带声音，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, 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