录影这里通过 html2canvas 将视频区域绘制到canvas 上,然后再通过requestAnimationFrame方法进行持续执行当前绘制方法,注意结束定时器的条件。最后通过 RecordRTC(self.canvasEl, { type: 'canvas' }); 将当前画布中执行的过程录制下来。可以参考下边这个demo示例。
<style>
html, body {
margin: 0!important;
padding: 0!important;
}video {
width: auto;
max-width: 100%;
}
</style><title>HTML Element Recording | RecordRTC</title>
<h1>HTML Element Recording using RecordRTC</h1><br>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button><hr>
<div style="display: none;">
<video controls autoplay playsinline id="preview-video"></video><