Convert blob file into webm with Whammy Lib

I'm using Whammy Lib to generates a video with images. After record the video, the Whammy lib returns a temp directory with a blob file.

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

I need to upload this file to my server with php, but I don't know how can I send a webm file instead the blob file.

To compile de video, I'm using:

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!

Update with the last code that I resolve my problem:

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

I just have to append the blob file to a FormData and send to my php.

Answers:

Answer

I don't know Whammy Lib, but if you've got the blob object, then you can use the FormData object to send it as file to your server :

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

Then in 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

You can convert the Blob object into array buffer and then send it to the server using WebSockets, for example.

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

The websocket listening process then can receive the webm file as binaries and save it to disk.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.