sca*_*121 19 javascript html5 video-streaming getusermedia
我正在建立一个唱歌的网站,用户可以在其中捕捉自己与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中是否有一种方法我可以保存流,因为它来或什么？
小智 14
更新12/2014 仅供参考,有一个名为MediaRecorder的新API .目前仅支持Firefox,并且处于早期状态,但需要注意的事项.
在纯粹的当地环境中,你不能也不会得到非常好的结果.您可以使用canvas元素通过绘制来保存框架,并将jpeg图像与音频(必须单独保存)一起存储在视频流中的本地存储中,然后在后期使用库创建例如MJPEG文件(AFAIK目前没有任何支持音频的文件).
但是,使用这种方法会遇到几个问题:使用JavaScript处理所有这些信息需要花费很多时间 - 只需将帧保存为jpeg,将其转换为blob并将其保存到文件系统或索引DB将消耗最多(或更多)您可用于单个框架的时间预算.
您将无法正确地将视频帧与音频同步 - 您可以保存时间戳并使用它来"校正"帧,但您的FPS很可能会因创建不稳定的视频而变化.即使你按时间顺序获得同步,你也可能会面临音频和视频不匹配的滞后问题,因为它们最初是两个独立的流.
但视频是超过30 FPS(美国)或25 FPS(欧洲)很少,所以你不会需要完整的60 FPS率的浏览器可以提供.对于美国(NTSC)系统,这为您提供了每帧约33毫秒的更好的时间预算,如果您在使用PAL系统的国家/地区,则更多一点.使用更低的帧速率没有任何问题,但在某一点(<12-15 FPS),您将开始注意到严重缺乏平滑性.
然而,有许多因素会影响这一点,例如CPU,磁盘系统,帧尺寸等.JavaScript是单线程的,而canvas API是同步的,所以12核CPU在这方面对你没什么帮助,而且Web Workers的实用性目前对于更长时间运行的任务来说非常有用.如果你有很多可用的内存,你可以在内存中缓存这些可执行的帧,并在post中进行所有处理,这也需要一些时间.以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>
参考：录制媒体元素