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

Question

我正在使用 Whammy Lib 生成带有图像的视频。录制视频后，Whammy 库 returns 一个带有 blob 文件的临时目录。

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

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

为了编译视频，我正在使用：

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);

已回答！

更新我解决问题的最后代码：

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

您可以将 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 文件作为二进制文件并将其保存到磁盘。

Answer 2

我不知道 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);
    }

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

Convert blob file into webm with Whammy Lib

javascript

video-recording

html5-video

webm