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作为一帧照旧本来泛起。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
