个人中心
gpt4 book ai didi

javascript - 坚持用视频数据保存生成的 blob

转载 作者：行者123 更新时间：2023-12-03 10:10:05 28 4
gpt4 key购买 nike

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

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

    }
}

最佳答案

我认为您的问题在于 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>');对服务器的请求完成。

关于javascript - 坚持用视频数据保存生成的 blob，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30159329/

28 4 0
文章推荐： javascript - 在 Ionic 上从一种 View 更改为另一种 View 后，如何保留谷歌地图标记？
文章推荐： javascript - Firefox 在第一次访问时不会绘制到 Canvas 上
文章推荐： javascript - 如何验证 2 个选择框中相同的选定值
文章推荐： javascript - 如何通过Javascript Post函数保护通过PHP运行的SQL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com