javascript - HTML5 捕获和保存视频

Question

我正在建立一个唱歌网站，用户可以在其中捕捉自己唱歌的视频和 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中保存流，或者什么？

score 20 · Accepted Answer

更新 12/2014 仅供参考，有一个名为MediaRecorder的新 API 即将推出。目前仅在 Firefox 中支持，并且处于早期状态，但需要牢记。

mediaStream 和本地存储

在纯本地环境中，你不能也不会得到很好的结果。您可以通过在其上绘制使用 canvas 元素保存帧，并将 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 Worker 的用处目前几乎仅限于更长时间运行的任务。如果您有大量可用内存，您可以将帧缓存在内存中，这是可行的，并在后期进行所有处理，这又需要一些时间。以 720P @ 30 FPS 录制的流每秒将消耗至少 105 mb（这只是原始数据，不包括浏览器对缓冲区的内部处理，可能会增加一倍甚至三倍）。

网络RTC

更好的解决方案可能是使用 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/

score 9 · Accepted Answer

这是用于捕获视频并将其保存到本地的完全工作代码：

它需要保存文件、相机和麦克风等权限：

<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>

参考：录制媒体元素

score 1 · Accepted Answer

流在这里创建。

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）...您需要读取输出到视频标签的数据并将其转换为画布作为单帧保存到 webkit 文件系统。

由于文件系统最近发生了变化，我搜索了新代码并为您找到了这个完美的示例。 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 来详细说明所有内容。

javascript - HTML5 捕获和保存视频

3 回答 3

mediaStream 和本地存储

网络RTC

闪光

Related

Reference