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

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

相关推荐
gnip2 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼4 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode8 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu8 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu8 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript