【问题标题】：HTML5 capture and save videoHTML5 捕获和保存视频
【发布时间】：2013-06-26 22:26:23
【问题描述】：

我正在建立一个伴唱网站，用户可以在其中捕捉他们自己唱歌的视频以及 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 中是否有一种方法可以让我在流来时保存它？

【问题讨论】：

我认为你可以通过 jquery 来实现。此处显示了一个演示 scriptcam.com/demo_2.cfm，源代码需要进一步的帮助。您可能想检查一次。
你尝试this解决方案了吗？
你应该试试this。这是一个非常好的教程/手册页，带有代码 sn-ps 和演示，希望对您有所帮助:)
一个新的 API MediaRecorder 已经被创建，目前仅在 FF 中支持。
这个网站听起来很棒！！！能给个链接吗？

标签： javascript html video-streaming getusermedia

【解决方案1】：

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

mediaStream 和本地存储

在纯本地环境中你不能也不会得到很好的结果。您可以通过在其上绘制使用 canvas 元素保存帧，并将 jpeg 图像与音频（必须单独保存）一起从视频流存储到本地存储，然后在后期使用库创建例如 MJPEG文件（AFAIK 目前没有任何支持音频的文件）。

但是，使用这种方法会遇到几个问题：使用 JavaScript 处理所有这些信息需要很长时间 - 只需将帧保存为 jpeg，将其转换为 blob 并将其保存到文件系统或索引数据库即可消耗您可用于单个帧的大部分（或更多）时间预算。

您将无法正确同步视频帧与音频 - 您可以保存时间戳并使用它来“更正”帧，但您的 FPS 很可能会发生变化，从而创建不流畅的视频。即使您按时间顺序进行同步，您也可能会面临音频和视频不匹配的延迟问题，因为它们最初是两个单独的流。

但视频很少超过 30 FPS（美国）或 25 FPS（欧洲），因此您不需要浏览器可能提供的完整 60 FPS 速率。对于美国 (NTSC) 系统，这为您提供了大约每帧 33 毫秒的更好时间预算，如果您在使用 PAL 系统的国家/地区，则更多一点。使用更低的帧速率并没有什么问题，但在某个点（

然而，有许多因素会影响这一点，例如 CPU、磁盘系统、框架尺寸等。 JavaScript 是单线程的，而 canvas API 是同步的，因此 12 核 CPU 在这方面对您没有多大帮助，而 Web Worker 的用处目前几乎仅限于更长时间运行的任务。如果您有大量可用内存，您可以将帧缓存在内存中，这是可行的，并在后期进行所有处理，这又需要一些时间。以 720P @ 30 FPS 录制的流每秒将消耗至少 105 mb（这只是原始数据，不包括浏览器对缓冲区的内部处理，可能会增加一倍甚至三倍）。

WebRTC

更好的解决方案可能是使用 WebRTC 并连接到服务器（外部或本地）并在那里处理流。此流将包含同步的音频和视频，您可以将流临时存储到磁盘，而不受浏览器沙盒存储区域的限制。这里的缺点是（对于外部连接）带宽，因为这可能会降低质量以及服务器的能力。

这为使用 Node.js、.Net 或 PHP 等第三方组件（或者更底层的方法，例如使用编译的 C/C++ 和 CGI/管道）进行实际处理提供了可能性'喜欢那个）。

您可以查看这个支持重新编码 WebRTC 流的开源项目：
http://lynckia.com/licode/

Licode 项目为 WebRTC 提供了 NodeJS 客户端 API，以便您可以在服务器端使用它，see the docs

这基本上是您在 HTML5 的当前状态下可以走多远。

闪光

然后可以选择安装 Flash 并使用它 - 你 will still need a server 侧解决方案（Red5、Wowza 或 AMS）。

这可能会给您带来不那么痛苦的体验，但您需要在浏览器中安装 Flash（显然），并且在许多情况下，由于许可证的原因，成本因素会更高（请参阅Red5 for a open-source 替代方案）。

如果您愿意为商业解决方案付费，可以使用以下解决方案：
http://nimbb.com/

【讨论】：

Chrome 现在支持 MediaRecorder

【解决方案2】：

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

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

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

参考：Recording a media element

【讨论】：

【解决方案3】：

在此处创建流。

function handleVideo(stream) {
 video.src = window.URL.createObjectURL(stream);
 document.getElementById("videoElement").pause();
}

您的数据是 sream .. 或 window.URL.createObjectURL(stream)。

但您不能简单地将 stream 或 window.URL.createObjectURL(stream) 写入本地存储（2mb .. 小）或 webkitRequestFileSystem（允许您使用 gb 的）...您需要读取输出到视频标签的数据并将其转换为画布作为单帧保存到 webkitfilesystem。

由于文件系统最近发生了变化，我搜索了新代码并为您找到了这个完美的示例。 https://gist.github.com/piatra/2549734

在他使用的例子中

setTimeout(function(){ draw(v, bc, w, h); }, 200);

每 200 毫秒写入一帧

如果您想要自定义帧率，只需将 200 毫秒更改为 1000/25 ..(25fps)

或者使用requestanimationframe，如果你的cpu支持的话，你应该能得到大约60fps。

现在您没有像 mp4 这样格式良好的真实流...但是您可以使用其他功能显示很多帧...再次您需要一个非常快的 cpu。

在此示例中，音频不起作用。

还可以将音频录制到 WAV（您不能录制 mp3 或 aac）...我找到了这个。

http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/

所以最后你可以做到这一点......但是几分钟就需要很多空间，并且需要一个非常快的 cpu 来详细说明所有内容。

【讨论】：

如何将录制的视频保存到项目中的文件夹中，而无需用户将其下载到系统中？