vue/uniapp实现浏览器录屏功能（视频+音频）

RecordRTC使用

安装

npm install recordrtc -S

import RecordRTC from 'recordrtc';

代码：

<template>
    <view>
        
    </view>
</template>

<script>
    import RecordRTC from 'recordrtc';
    export default {
        data() {
            return {
                videoStart: false,
                recorder: null,
            }
        },
        props:{
            fileName:{
                type:String,
                default:new Date().getTime()
            }
        },
        onLoad() {
            
        },
        methods:{
            
            /**
             * 开始录制
             */
            startRecording(callback){
                this.captureScreen((screenStream)=>{
                    this.addStreamStopListener(screenStream,()=>{
                        console.log("流停止监听");
                        this.$emit("streamStop",{})
                        // this.stopRecording();
                    });
                    var options = {
                        type: 'video',
                        mimeType: 'video/webm',
                        disableLogs: false,
                        getNativeBlob: false, // enable it for longer recordings
                        ignoreMutedMedia:false
                    };
                    // this.video.srcObject = screenStream;
                    this.recorder = RecordRTC(screenStream, options);
                    this.recorder.startRecording();
                    this.recorder.screen = screenStream;
                    this.videoStart = true;
                    callback(true);
                });
            },
            /**
             * 停止录制
             */
            stopRecording(callback){
                this.recorder.stopRecording(()=>{
                    // this.video.src = this.video.srcObject = null;
                    // this.video.src = URL.createObjectURL(this.recorder.getBlob());
                    const url = URL.createObjectURL(this.recorder.getBlob());
                    const a = document.createElement("a");
                    let videoFile = new File([this.recorder.getBlob()], this.fileName+".mp4", {
                        type: 'video/mp4'  
                    })
                    let downloadUrl = URL.createObjectURL(videoFile);
                    document.body.appendChild(a);
                    a.style.display = "none";
                    a.href = url;
                    a.download = this.fileName + ".mp4";
                    a.click();
                    this.recorder.screen.stop();
                    this.recorder.destroy();
                    this.recorder = null;
                    this.videoStart = false;
                    callback(false);
                });
            },
            //初始化
            captureScreen(callback) {
                if (navigator.getDisplayMedia) {
                    //录制结束,文件下载
                    navigator.getDisplayMedia({
                        video: true
                    }).then(screenStream => {
                        navigator.mediaDevices.getUserMedia({audio:true}).then((mic)=>{
                            screenStream.addTrack(mic.getTracks()[0]);
                            callback(screenStream);
                        });
                    }).catch(function(error) {
                        console.log('error',error);
                    });
                } else if (navigator.mediaDevices.getDisplayMedia) {
                    navigator.mediaDevices.getDisplayMedia({
                        video: true
                    }).then(screenStream => {
                        navigator.mediaDevices.getUserMedia({audio:true}).then((mic)=>{
                            screenStream.addTrack(mic.getTracks()[0]);
                            callback(screenStream);
                        });
                    }).catch(function(error) {
                        console.log('error',error);
                    });
                } else {
                    var error = 'getDisplayMedia API are not supported in this browser.';
                   console.log('error',error);
                    alert(error);
                }
            },
            
            //流监听
            addStreamStopListener(stream, callback) {
                stream.addEventListener('ended', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.addEventListener('inactive', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.getTracks().forEach(function (track) {
                    track.addEventListener('ended', function () {
                        callback();
                        callback = function () { };
                    }, false);
                    track.addEventListener('inactive', function () {
                        callback();
                        callback = function () { };
                    }, false);
                });
            },
            
        }
    }
</script>

<style>
</style>

引入

import screenRecording from '@/components/screen-recording/screen-recording';

注册....

组件：

<screen-recording ref="screen-recording" @streamStop="streamStop" :fileName="fileName"></screen-recording>

开启录屏：

//开始录制
this.$refs['screen-recording'].startRecording((start)=>{
    this.start= start;
});

结束录屏：

this.fileName =`${this.mNm}-录屏-${this.$util.dateFormat(new Date())}`;
this.$refs['screen-recording'].stopRecording((start)=>{
    this.start= start;
});

监听关闭：

//流停止监听
streamStop(){
    if(this.start){
        this.fileName =`${this.mNm}-录屏-${this.$util.dateFormat(new Date())}`;
        this.$refs['screen-recording'].stopRecording((start)=>{
            this.start= start;
        });
    }
},