Question

我正在使用Whammy Lib生成带图像的视频。在录制视频后，Whammy lib返回带有blob文件的临时目录。

blob:http%3A//localhost%3A8000/b07288dc-da33-409c-90bc-9d1ce949db35

我需要使用php将此文件上传到我的服务器，但我不知道如何发送webm文件而不是blob文件。

要编译de video，我正在使用：

videoEncoder = new Whammy.Video();
for (var i = 0; i < images.length; i++) {
    videoCtx.putImageData(images[i].image, 0, 0);
    videoEncoder.add(videoCtx, images[i].duration);
}

blob = videoEncoder.compile();
file = (window.webkitURL || window.URL).createObjectURL(blob);

ANSWERED！

使用我解决问题的最后一个代码进行更新：

var data = $(form).serializeArray();
var formData = new FormData();
// blob is the return from Whammy Lib after compile
formData.append('webm', blob, 'video.webm');

我只需要将blob文件附加到FormData并发送到我的php。

Answer 1

我不知道Whammy Lib，但是如果你有blob对象，那么你可以使用FormData对象将它作为文件发送到你的服务器：

var f = new FormData();
f.append('videofile', b);
var xhr=new XMLHttpRequest();
xhr.open('POST','savevideofile.php');
xhr.send(f);

然后在 savevideofile.php

if($_FILES['videofile']){
    $my_file = $_FILES['videofile'];
    $my_blob = file_get_contents($my_file['tmp_name']);
    file_put_contents('your_file.webm', $my_blob);
    }

Answer 2

您可以将Blob对象转换为数组缓冲区，然后使用WebSockets将其发送到服务器。

blob = videoEncoder.compile();

var stream_ws = new WebSocket("ws://localhost/webm");
stream_ws.binaryType = 'arraybuffer';

var fileReader = new FileReader();
var arrayBuffer;
fileReader.onload = function() {
     arrayBuffer = this.result;
     stream_ws.send(arrayBuffer);
}
fileReader.readAsArrayBuffer(blob);

然后，websocket监听进程可以将webm文件作为二进制文件接收并保存到磁盘。

使用Whammy Lib将blob文件转换为webm

2 个答案: