[英]HTML5 capture and save video
我正在建立一个用于唱歌的网站,用户可以在其中捕获自己唱歌的视频和 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 中保存流,因为它来了还是什么?
更新 12/2014仅供参考,有一个名为MediaRecorder的新 API。 目前仅在 Firefox 中受支持,并且处于早期状态,但需要注意一些事项。
在纯粹的本地环境中,你不能也不会得到很好的结果。 您可以通过在画布元素上绘制来保存帧,并将 jpeg 图像与音频(必须单独保存)一起从视频流存储到本地存储,然后在后期使用库创建例如 MJPEG文件(AFAIK 目前没有任何支持音频的文件)。
但是,使用这种方法会遇到几个问题:使用 JavaScript 来处理所有这些信息需要很多时间 - 只需将帧保存为 jpeg,将其转换为 blob 并将其保存到文件系统或索引数据库将消耗最多(或更多)您可用于单个帧的时间预算。
您将无法正确地将视频帧与音频同步 - 您可以保存时间戳并使用它来“校正”帧,但您的 FPS 很可能会发生变化,从而创建生涩的视频。 即使您按时间顺序获得同步,您也可能会遇到延迟问题,其中音频和视频不匹配,因为它们最初是两个单独的流。
但是视频很少超过 30 FPS(美国)或 25 FPS(欧洲),因此您不需要浏览器可能提供的完整 60 FPS 速率。 对于美国 (NTSC) 系统,这为您提供了每帧约 33 毫秒的更好的时间预算,如果您在使用 PAL 系统的国家/地区,则更多。 使用更低的帧速率并没有错,但在某个点(< 12-15 FPS)您会开始注意到严重缺乏平滑度。
然而,有许多因素会影响这一点,例如 CPU、磁盘系统、框架尺寸等。 JavaScript 是单线程的,canvas API 是同步的,所以 12 核 CPU 在这方面帮不上什么忙,而 Web Workers 的用处目前仅限于更长时间运行的任务。 如果您有大量可用内存,您可以将帧缓存在内存中,这是可行的,并在后期进行所有处理,这又需要一些时间。 以 720P @ 30 FPS 记录的流将消耗至少 105 mb/秒(这只是原始数据,不包括浏览器的内部缓冲区处理,这可能是其两倍甚至三倍)。
更好的解决方案可能是使用 WebRTC 并连接到服务器(外部或本地)并在那里处理流。 此流将包含同步的音频和视频,您可以将流临时存储到磁盘,而不受浏览器沙盒存储区域的限制。 这里的缺点是(对于外部连接)带宽,因为这可能会降低质量以及服务器的能力。
这开辟了使用例如 Node.js、.Net 或 PHP 来使用第三方组件进行实际处理的可能性(或者更底层的方法,例如使用已编译的 C/C++ 和 CGI/管道,如果您喜欢的话)那)。
您可以查看这个支持 WebRTC 流重新编码的开源项目:
http://lynckia.com/licode/
Licode 项目为 WebRTC 提供了 NodeJS 客户端 API,以便您可以在服务器端使用它,请参阅文档
这基本上是您可以在 HTML5 的当前状态下走多远。
然后可以选择安装 Flash 并使用它 - 您仍然需要一个服务器端解决方案(Red5、Wowza 或 AMS)。
这可能会给您带来不那么痛苦的体验,但您需要在浏览器中安装 Flash(显然),并且在许多情况下,由于许可证的原因,成本因素更高(请参阅Red5 以获取开源替代方案)。
如果您愿意为商业解决方案付费,则有如下解决方案:
http://nimbb.com/
这是用于捕获视频并将其保存到本地的完全工作代码:
它需要像保存文件、相机和麦克风这样的权限:
<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>
参考: 录制媒体元素
流在此处创建。
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
您的数据是 sream .. 或 window.URL.createObjectURL(stream)。
但你不能简单地将流或 window.URL.createObjectURL(stream) 写入本地存储(2mb .. 到小)或 webkitRequestFileSystem(允许你使用 gb)......你需要读取输出到视频标签的数据并将其转换为画布作为单个框架将其保存到 webkitfilesystem。
由于文件系统最近发生了变化,我在 google 上搜索了新代码,并为您找到了这个完美的示例。 https://gist.github.com/piatra/2549734
在他使用的例子中
setTimeout(function(){ draw(v, bc, w, h); }, 200);
每 200 毫秒写入一帧
如果您想要自定义帧率,只需将 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 来详细说明一切。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.