當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS录制video
火狐擴(kuò)展：Live Recorder – Get this Extension for 🦊 Firefox (en-US)
源碼：Lynn / Live-Recorder · GitLab
參考：<video>的錄制_全棧空間-CSDN博客
（可以錄制，通過時長參數(shù)停止）
因為同源策略，使用miniserve服務(wù)器調(diào)試。
但是，我改的按鈕停止錄制視頻無法播放。
<!DOCTYPE html> <html> <head> <title>Record Video</title> </head> <body> <div> <button id = "record">record</button> <button id = "pause">pause</button> </div> <div id="log"></div><br> <video id="video" autoplay src="a.mp4" controls="controls"></video> <script> 'use strict' var video = document.getElementById('video'); var log = document.getElementById('log'); var recorder, blobs; const recordBtn = document.getElementById('record'); const pauseBtn = document.getElementById('pause'); pauseBtn.disabled = true; pauseBtn.onclick = function(event) { if (pauseBtn.textContent == "pause") {recorder.pause();pauseBtn.textContent = "resume";} else {recorder.resume();pauseBtn.textContent = "pause";} }function saveVideo() {const webm = new Blob(blobs, { type: "video/webm" });open(URL.createObjectURL(webm)); }function onGetStreamError(error) {console.log(error); }recordBtn.onclick = function(event) {if (recordBtn.textContent != "record") {recordBtn.textContent = "record";pauseBtn.disabled = false; //let tracks = mediaRecorder.stream.getTracks();//tracks.forEach(track => track.stop());recorder.stop();saveVideo();return;}recordBtn.textContent = "stop";pauseBtn.disabled = false;const stream = video.captureStream();recorder = new MediaRecorder(stream, {mimeType: "video/webm;codecs=vp8",}); blobs = [];var promise = new Promise((resolve, reject) => {recorder.onstop = resolve;recorder.onerror = reject;recorder.ondataavailable = (event) => {console.log(event.data);blobs.push(event.data);}recorder.start();});//promise.then().catch(onGetStreamError); } </script> </body> </html>
?
總結(jié)
- 上一篇： PHP简单入门
- 下一篇： 谷歌浏览器禁用 javascript 以