火狐扩展：Live Recorder – Get this Extension for 🦊 Firefox (en-US)
源码：Lynn / Live-Recorder · GitLab
参考：<video>的录制_全栈空间-CSDN博客
（可以录制，通过时长参数停止）
因为同源策略，使用miniserve服务器调试。
但是，我改的按钮停止录制视频无法播放。
<!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>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
