用RecordRTC 实现视频录制并添加字幕合成效果
字幕合成效果 RecordRTC
<style> html, body, video, canvas { margin: 0!important; padding: 0!important; } </style> <title> RecordRTC 视频字幕合成添加</title> <h1>RecordRTC 视频字幕合成添加</h1> <p>10秒后自动停止录制.</p> <p > 首先需要<a href="https://chrome.google.com/webstore/detail/getusermedia/nbnpcmljmiinldficickhdoaiblgkggc">安装chrome扩展</a>,注意,这需要fanqiang,如果打不开,就查看这篇文章手动安装chrome扩展,<a href="http://www.bfw.wiki//user10/15640228901296320096.html">点击查看</a> <video id="video-preview" controls autoplay playsinline></video> <script src="http://repo.bfw.wiki/bfwrepo/js/RecordRTC.js"></script> <script> var videoPreview = document.getElementById('video-preview'); navigator.mediaDevices.getUserMedia({video: true}).then(function(camera) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.style = 'position: absolute; top: 0; left: 0; opacity: 0; margin-top: -9999999999; margin-left: -9999999999; top: -9999999999; left: -9999999999; z-index: -1;'; document.body.appendChild(canvas); var video = document.createElement('video'); video.autoplay = true; video.srcObject = camera; var canvasStream = canvas.captureStream(15); var audioPlusCanvasStream = new MediaStream(); canvasStream.getVideoTracks().forEach(function(videoTrack) { audioPlusCanvasStream.addTrack(videoTrack); }); camera.getAudioTracks().forEach(function(audioTrack) { audioPlusCanvasStream.addTrack(audioTrack); }); var recorder = RecordRTC(audioPlusCanvasStream, { type: 'video' }); recorder.setRecordingDuration(10 * 1000).onRecordingStopped(function() { var blob = recorder.getBlob(); recorder = null; camera.stop(); videoPreview.srcObject = null; videoPreview.src = URL.createObjectURL(blob); }); recorder.startRecording(); videoPreview.srcObject = canvasStream; var rectX = 240; var rectY = 240 - 20; (function looper() { if(!recorder) return; // ignore/skip on stop-recording canvas.width = 320; canvas.height = 240; rectX-=5; if(rectX <= -40) { rectX = 240 + 50; } context.drawImage(video, 0, 0, canvas.width, canvas.height); context.save(); context.fillStyle = 'black'; context.globalAlpha = 0.4; context.fillRect(0, rectY - 20, 1000, 30) context.restore(); context.font = '20px Georgia'; context.fillStyle = 'white'; context.fillText('Hello', rectX, rectY); // repeat (looper) setTimeout(looper, 100); })(); }).catch(function(error) { alert('Unable to capture camera. Please check console logs.'); console.error(error); }); </script> <footer style="margin-top: 20px;"><small id="send-message"></small></footer>
网友评论0