前端实现录制屏幕

前端实现录制屏幕

该录屏只能实现录制操作dom元素然后播放出来，并不能像录屏软件一样什么都可以录制，也不能导出为视屏格式的文件。

该demo使用react框架。

一、引入资源

需要先引入rrweb（官方文档）和rrrweb-player

使用cdn引入

	<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
  	<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>

二、在页面中使用

页面结构

			<div>
                <button onClick={this.onStart.bind(this)}>点击开始录屏</button>
                <button onClick={this.onStop.bind(this)}>结束并播放</button>.
                <div id='videoBox' style={{width:'500px',height:'500px'}}></div>
            </div>

1、点击开始

onStart() {
        let that = this
        this.r = rrweb.record({
            emit(e) {
                // 这个事件对象每次操作鼠标和dom元素都会返回，然后用数组把这个时间对象存放起来
                that.events.push(e)
                console.log(that.events);
            }
        })
    }

2、点击结束

onStop(){
        let box= document.getElementById('videoBox')
        let that = this
        new rrwebPlayer({
            target: box, // 可以自定义 DOM 元素
            data: {
                // 用记录的操作进行播放
                events:that.events,
            },
        });
    }

后面再研究一下导出为视屏格式的文件