坚持使用视频数据保存生成的 blob答案

【问题标题】：Stuck with saving genreated blob with video data坚持使用视频数据保存生成的 blob
【发布时间】：2015-05-11 03:42:10
【问题描述】：

正在尝试保存从网络摄像头流生成的 blob。这是代码。这是项目：http://a5w.org/prog/vimeo/2/（FF 兼容）

它确实会生成带有视频数据的 blob，但由于一个奇怪的原因，我无法保存它。我试图生成一个简单的 blob (var blob = new Blob(['body { color: red; }'], {type: 'text/css'});) 并且保存时没有任何问题，但视频没有t 出于某种原因想要被保存 =( 这是媒体流记录器：https://github.com/streamproc/MediaStreamRecorder

<!DOCTYPE html>
<meta charset="UTF-8">

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

<body>

<script>
var mediaConstraints = {
    audio: !!navigator.mozGetUserMedia, // don't forget audio!
    video: true                         // don't forget video!
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2

        var fileType = 'video'; // or "audio"
        var fileName = 'ABCDEF.webm';  // or "wav" or "ogg"

        var formData = new FormData();
        formData.append(fileType + '-filename', fileName);
        formData.append(fileType + '-blob', mediaConstraints);

        xhr('./save.php', formData, function (fileURL) {
            window.open(fileURL);
        });

        function xhr(url, data, callback) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    callback(location.href + request.responseText);
                }
            };
            request.open('POST', url);
            request.send(data);
        }   

     var blobURL = URL.createObjectURL(blob);
     document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };
    mediaRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

</script>


</body>
</html>

没有错误，上传文件夹是 777（我能够保存一个虚拟 blob 对象）

PHP 文件：

foreach(array('video', 'audio') as $type) {
   if (isset($_FILES["${type}-blob"])) {

        $fileName = $_POST["${type}-filename"];
        $uploadDirectory = "uploads/$fileName";

        if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
            echo("problem moving uploaded file");
        }

        echo($uploadDirectory);
    }
    else
    {
        echo 'no files in FILES';

    }
}

【问题讨论】：

formData.append(fileType + '-blob', ) 的第二个属性不应该是blob 而不是mediaConstraints 吗？
哦，是的..应该。最初是这样的。不幸的是，它也不适用于原始代码（我刚刚再次检查过）。但是——非常感谢。确实，我已经忘记为这条线带回初始代码了。
我们可以假设您的 php 与 MSRecorder 示例中的完全一样
=) 是的，我已将代码添加到上述问题中。感谢您抽出时间凯多

标签： javascript blob

【解决方案1】：

我认为您的问题在于 MediaRecorder 插件的启动方法：

您放入的参数（此处为3000）实际上是start() 触发的间隔。

如果您将this.stop(); 放入mediaRecorder.ondataavailable 处理程序中，您的服务器将有时间写入文件，然后您要求它在下一个时间间隔再次执行此操作。

或者您可能还想增加文件名以保存多个文件。

var mediaConstraints = {
    audio: !!navigator.mozGetUserMedia, // don't forget audio!
    video: true                         // don't forget video!
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {

    // var i = 0;
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2

        this.stop(); // stop the recorder

        var fileType = 'video'; // or "audio"
        var fileName = 'ABCDEF.webm';  // or 'ABCDEF'+ i++ +'.webm'

        var formData = new FormData();

        ...

显然，您还需要删除 document.write('<a href="' + blobURL + '">' + blobURL + '</a>'); 才能完成对服务器的请求。

【讨论】：

感谢人！试过你的代码。最初 - 没有结果。决定添加一个奇怪的东西 - alert(blob);在出于奇怪的原因返回视频 URL 之前 - 它现在可以工作了。首先，我有警告消息说明它应该做什么：“对象：Blob”但是......它现在可以工作了。它将 blob 作为 ABCDEF.webm 上传到服务器上为什么会这样？？？？
这里的代码应该可以工作，也许你可以尝试将this.stop()改为mediaRecorder.stop() 。如果设置警报时它确实有效，那是因为它阻止了脚本的执行，因此对您的服务器的请求可以完成。
是的 - 事实上我尝试了 this.stop();和 mediaRecorder.stop()：没有警报它不会向 PHP 文件发送任何内容，请查看：a5w.org/prog/vimeo/2
ok...删除了警报并用blob URL生成评论了整个事情。再次 - 令人惊讶的是现在它可以工作了。它确实将文件上传到服务器。
你的意思是 document.write() 部分？其实我也删了