坚持使用视频数据保存 generated blob

Question

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

它确实生成了带有视频数据的 blob，但由于奇怪的原因我无法保存它。我尝试生成一个简单的 blob (var blob = new Blob(['body { color: red; }'], {type: 'text/css'});) 它被保存没有任何问题但视频不想由于某种原因保存 =( 这是 Mediastream 记录器：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';

    }
}

Answer 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>');。

坚持使用视频数据保存 generated blob

Stuck with saving genreated blob with video data

javascript

blob