从通过Ajax提供的dataURI创建视频文件

Question

好的，我已经阅读了至少一百篇关于此问题的文章，但是我找不到一个明确的例子来做我正在尝试做的事情。我正在使用RecordRTC来获取我的视频。我可以获得视频的webm数据URI，形式为blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c。我知道我基本上可以将这个源（用于我的视频元素）传递给canvas元素，然后使用canvas toDataURL()方法获取一个编码的dataURI。然而，由于编码的数据应该是一个视频，因此对于toDataURL()使用像video/webm这样的参数仍然返回image/png mimetype的编码字符串。我的问题是：如果我将blob url（blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c）传递给PHP，如何在我的服务器文件系统中创建webm文件？如果这不可能，那么我如何从canvas创建一个video/webm mimetype的编码字符串？

这是我的视频类对象：

var Video = {
    eId: '',
    element: {},
    source: {},
    RtcOpts: {video: true, audio: true},
    RTC: {},
    media: {},
    init: function(elementId){
        Video.eId = elementId;
        Video.media = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    },
    success: function(stream){
        Video.RTC = new MRecordRTC(stream);
        Video.element = document.getElementById(Video.eId);

        if(window.webkitURL || window.URL){
            Video.source = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream);
        }else{
            Video.source = stream;
        }

        Video.element.autoplay = true;
        Video.element.src = Video.source;
        Video.RTC.startRecording();
        Video.element.play();
    },
    error: function(e){
        console.error('getUserMedia Error', e);
    },
    stop: function(){
        Video.RTC.stopRecording(function(WebMURL){
            console.log(WebMURL); // prints the blob url
            var recordedBlob = Video.RTC.getBlob();
            console.log(recordedBlob); // prints undefined
            Video.save(recordedBlob);
        });
    },
    save: function(recordedBlob){
        var formData = new FormData();
        formData.append('mode', 'getusermedia');
        formData.append('blob', recordedBlob);

        var request = new XMLHttpRequest();
        request.onreadystatechange = function(){
            if(request.readyState == 4 && request.status == 200){
                console.log(request.responseText);
            }
        };
        request.open('POST', rootPath+'ajax/processVideo.php');
        request.send(formData);
    }
};

这是如何在我的脚本中内联运行代码的方式：

var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2];
Video.init(playerId);

if(Video.media){
    document.getElementById('stop-'+playerId).onclick = function(e){
        e.preventDefault();

        Video.stop();
    };

    Video.media(Video.RtcOpts, Video.success, Video.error);
}else{
    //fallback
}

- chaoskreator

---

你最开始是如何获取blob URL的？你应该上传你获得的文件blob。顺便说一下，“blob:”是一个blob URL，而不是data URL。 - Patrick Roberts

啊，我刚找到了文档。var recordedBlob = recordRTC.getBlob();这个应该会对你有帮助。 - Patrick Roberts

看，这就是我想的。然而，recordedBlob总是未定义的。我将更新问题以包括一些示例代码。 - chaoskreator

好的，祝你好运。我懂JavaScript，但这个问题对于我的知识来说太具体了，无法应用或提供帮助。如果我是你，我会浏览源代码，尝试找出类与用户媒体流和Web音频API之间的交互方式，并寻找看起来没有正确实现的部分。 - Patrick Roberts

或者如果你懒得动手，可以在他们的 Github 项目上开一个问题报告，让他们去寻找问题。但请确保至少隔离出引起问题的几行代码。在你的情况下，是库函数返回“未定义”而不是“Blob”。 - Patrick Roberts

Answer 1

使用var recordedBlob = recordRTC.getBlob();，尝试下面的代码片段：

var xhr = new XMLHttpRequest(),
    fd = new FormData();
xhr.open("POST", "/submit.php", true);
fd.append("video", recordedBlob);
xhr.addEventListener("load", function () {
    // xhr.statusCode === 200 means it worked
});
xhr.send(fd);

PHP（我非常生疏）$_POST [“video”] 应包含 blob。

- Patrick Roberts