mediaStream和本地存储

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中是否有一种方法我可以保存流来的东西？

Answer 1

更新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 Workers的实用性目前对于更长时间运行的任务来说非常有用。如果你有很多可用的内存，你可以在内存中缓存这些可执行的帧，并在post中进行所有处理，这也需要一些时间。以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/

Answer 2

此处创建了流。

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

你的数据是sream ..或window.URL.createObjectURL（stream）。

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

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

在他使用的例子中

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

每200ms写一帧

如果你想要自定义framrate只需将200ms更改为1000/25 ..（25fps）

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

现在你没有一个像mp4这样漂亮格式的真实流...但是你可以用另一个功能显示很多帧...再次你需要一个非常快的CPU。

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

还要将音频录制到WAV（你不能录制mp3或aac）......我发现了这个。

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

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

Answer 3

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

它需要权限，例如保存文件，相机和麦克风：

<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

HTML5捕获并保存视频

3 个答案:

mediaStream和本地存储

的WebRTC

闪存