web页面录屏实现
|
window.addEventListener('blur', this.onFormBlur, true); onFormBlur = (event) => { const target = event.target; if (target && target.__flow) { this.records.push({ type: 'blur', target: target.__flow.id, }); } } 媒体元素变化监听 这里指audio和video，类似上面的表单元素，可以监听onplay、onpause事件、timeupdate、volumechange等等事件，然后存入records Canvas画布变化监听 canvas内容变化没有抛出事件，所以我们可以： 收集canvas元素，定时去更新实时内容 hack一些画画的API，来抛出事件 canvas监听研究没有很深入，需要进一步深入研究 播放 思路比较简单，就是从后端拿到一些信息： 全量快照Virtual DOM 操作链records 屏幕分辨率 doctype 利用这些信息，你就可以首先生成页面DOM，其中包括过滤script标签，然后创建iframe，append到一个容器中，其中使用一个map来存储DOM function play(options = {}) { const { container, records = [], snapshot ={} } = options; const { vdom, doctype, clientHeight, clientWidth } = snapshot; this.nodeCache = {}; this.records = records; this.container = container; this.snapshot = snapshot; this.iframe = document.createElement('iframe'); const documentElement = createElement(vdom, (node) => { // 缓存DOM const flowId = node.__flow && node.__flow.id; if (flowId) { this.nodeCache[flowId] = node; } // 过滤script return !(node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'script'); }); this.iframe.style.width = `${clientWidth}px`; this.iframe.style.height = `${clientHeight}px`; container.appendChild(iframe); const doc = iframe.contentDocument; this.iframeDocument = doc; doc.open(); doc.write(`<!doctype ${doctype}><html><head></head><body></body></html>`); doc.close(); doc.replaceChild(documentElement, doc.documentElement); this.execRecords(); } function execRecords(preDuration = 0) { const record = this.records.shift(); let node; if (record) { setTimeout(() => { switch (record.type) { // 'childList'、'characterData'、 // 'attributes'、'input'、'checked'、 // 'focus'、'blur'、'play''pause'等事件的处理 } this.execRecords(record.duration); }, record.duration - preDuration) } } 上面的duration在上文中省略了，这个你可以根据自己的优化来做播放的流畅度，看是多个record作为一帧还是原本呈现。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号