HTML5捕获和保存视频
HTML5捕获和保存视频
提问于 2013-06-27 06:26:24
我正在建立一个唱歌的网站，在那里用户可以捕获自己的mp3一起唱歌的视频。我已经到了可以访问摄像头并显示实况流的地步，但是我如何保存视频以便用户可以下载和保留它呢？
我的代码：
<!DOCTYPE html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"">
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<button class="btn" onclick="show();">Record!</button>
<div id="record" style="display:none; text-align:center;">
<div id="container">
<video autoplay="false" id="videoElement">
</video>
</div>
<button id="play" class="btn" onclick="play()">Start Recording!</button>
<audio id="song" style="hidden">
<source src="love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
function videoError(e) {
alert("There was an error with the video stream.\nCheck that your webcam is connected.");
}
function play()
{
var video = document.getElementById("videoElement");
var music = document.getElementById("song");
var button = document.getElementById("play");
if (video.paused) {
video.play();
music.play();
button.textContent = "Stop Recording";
} else {
video.pause();
music.pause();
button.textContent = "Continue Recording";
}
}
function show()
{
document.getElementById("record").style.display="block";
}
</script>
</body>在handleVideo中有没有一种方法可以在流到来的时候保存它或者别的什么？
回答 2
Stack Overflow用户
发布于 2019-07-01 18:45:04
以下是捕获视频并将其保存到本地的完整代码：
它需要权限，比如保存文件、摄像头和麦克风：
<html>
<div class="left">
<div id="startButton" class="button">
Start
</div>
<h2>Preview</h2>
<video id="preview" width="160" height="120" autoplay muted></video>
</div>
<div class="right">
<div id="stopButton" class="button">
Stop
</div>
<h2>Recording</h2>
<video id="recording" width="160" height="120" controls></video>
<a id="downloadButton" class="button">
Download
</a>
</div>
<script>
let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");
let recordingTimeMS = 5000;
function log(msg) {
//logElement.innerHTML += msg + "\n";
}
function wait(delayInMS) {
return new Promise(resolve => setTimeout(resolve, delayInMS));
}
function startRecording(stream, lengthInMS) {
let recorder = new MediaRecorder(stream);
let data = [];
recorder.ondataavailable = event => data.push(event.data);
recorder.start();
log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});
let recorded = wait(lengthInMS).then(
() => recorder.state == "recording" && recorder.stop()
);
return Promise.all([
stopped,
recorded
])
.then(() => data);
}
function stop(stream) {
stream.getTracks().forEach(track => track.stop());
}
startButton.addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).then(stream => {
preview.srcObject = stream;
downloadButton.href = stream;
preview.captureStream = preview.captureStream || preview.mozCaptureStream;
return new Promise(resolve => preview.onplaying = resolve);
}).then(() => startRecording(preview.captureStream(), recordingTimeMS))
.then (recordedChunks => {
let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
recording.src = URL.createObjectURL(recordedBlob);
downloadButton.href = recording.src;
downloadButton.download = "RecordedVideo.webm";
log("Successfully recorded " + recordedBlob.size + " bytes of " +
recordedBlob.type + " media.");
})
.catch(log);
}, false);
stopButton.addEventListener("click", function() {
stop(preview.srcObject);
}, false);
</script>
</html>Stack Overflow用户
发布于 2013-11-04 01:06:05
流是在这里创建的。
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}你的数据就是流..或window.URL.createObjectURL(流)。
但您不能简单地将流或window.URL.createObjectURL(流)写入本地存储(2mb..到小)或webkitRequestFileSystem (这是允许您gb的) ...您需要读取输出到video标记的数据，并将其转换为单帧画布，将其保存到webkitfilesystem。
由于文件系统最近发生了变化，我在谷歌上搜索了新的代码，并为您找到了这个完美的示例。https://gist.github.com/piatra/2549734
在他使用的示例中
setTimeout(function(){ draw(v, bc, w, h); }, 200);它每隔200ms写入一帧
如果您想要自定义帧率，只需将200ms更改为1000/25..(25fps)
或者使用requestanimationframe，如果你的cpu支持的话，你应该可以达到60fps左右。
现在你没有像mp4这样好的格式的真正的流...但是很多你可以用另一个函数显示的帧...同样，你需要一个非常快的cpu。
在此示例中，音频不起作用。
要同时录制音频到WAV (您不能录制mp3或aac)...我找到了这个。
http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/
所以在最后你可以这样做。但是它只需要几分钟的时间就会占用大量的空间，并且需要一个非常快的cpu来处理所有的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17331531
复制相关文章
相似问题