用RecordRTC在浏览器端进行摄像头视频录制下载
首先需要安装chrome扩展,注意,这需要fanqiang,如果打不开,就查看这篇文章手动安装chrome扩展,点击查看
安装后扩展后,可以直接运行下面的代码,点击右上角在编辑器中运行
<style> html, body { margin: 0!important; padding: 0!important; text-align: center; font-size: 1em; } video { width: 30%; border-radius: 5px; border: 1px solid black; } </style> <h1>用 RecordRTC进行摄像头视频录制下载</h1> <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> </p> <br> <button id="btn-start-recording">开始录制</button> <button id="btn-stop-recording" disabled>停止录制</button> <hr> <video controls autoplay playsinline></video> <script src="http://repo.bfw.wiki/bfwrepo/js/RecordRTC.js"></script> <script src="http://repo.bfw.wiki/bfwrepo/js/EBML.js"></script> <!-- ../libs/DBML.js --> <script> var video = document.querySelector('video'); function captureStream(callback) { navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function(stream) { callback(stream); }).catch(function(error) { console.error(error); alert('Unable to capture your stream. Please check console logs.\n' + error); }); } function stopRecordingCallback() { video.muted = false; video.volume = 1; video.src = video.srcObject = null; getSeekableBlob(recorder.getBlob(), function(seekableBlob) { video.src = URL.createObjectURL(seekableBlob); recorder.stream.stop(); recorder.destroy(); recorder = null; document.getElementById('btn-start-recording').disabled = false; invokeSaveAsDialog(seekableBlob, 'seekable-recordrtc.webm'); }); } var recorder; // globally accessible document.getElementById('btn-start-recording').onclick = function() { this.disabled = true; captureStream(function(stream) { video.muted = true; video.volume = 0; video.srcObject = stream; recorder = RecordRTC(stream, { type: 'video' }); recorder.startRecording(); // release stream on stopRecording recorder.stream = stream; document.getElementById('btn-stop-recording').disabled = false; }); }; document.getElementById('btn-stop-recording').onclick = function() { this.disabled = true; recorder.stopRecording(stopRecordingCallback); }; function addStreamStopListener(stream, callback) { stream.addEventListener('ended', function() { callback(); callback = function() {}; }, false); stream.addEventListener('inactive', function() { callback(); callback = function() {}; }, false); stream.getTracks().forEach(function(track) { track.addEventListener('ended', function() { callback(); callback = function() {}; }, false); track.addEventListener('inactive', function() { callback(); callback = function() {}; }, false); }); } </script> <br><br> <footer style="margin-top: 20px; text-align: left;"> <small id="send-message"></small> </footer>
网友评论0