将blob文件转换为webm与Whammy Lib

Convert blob file into webm with Whammy Lib

本文关键字：Whammy Lib webm blob 文件 转换      更新时间：2023-09-26

我正在使用Whammy Lib生成带有图像的视频。录制完视频后，Whammy lib返回一个带有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。

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

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

然后在 savevidefile .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);
    }

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

相关文章：