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>

没有错误，uploads文件夹是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>');以完成对服务器的请求。

坚持使用视频数据保存经过处理的blob

1 个答案: