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

相关推荐
花海少爷5 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7949 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You18 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生29 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410931 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap43 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript