I have a google chrome extension that records the current tab and on the stop of the recording, it uploads the video to google drive successfully in a specific folder.
I'm looking for how to upload the video while the recording is still in progress? Meaning the blobs which I am getting from recording gets uploaded to the. google drive.
var superBuffer = new Blob(recordedBlobs, {
type: 'video/mp4',
});
var metadata = {
name: Date.now() + '.mp4',
mimeType: 'video/mp4',
parents: [folderId],
};
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
form.append('file', superBuffer);
var xhrDriveRequest = new XMLHttpRequest();
xhrDriveRequest.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id');
xhrDriveRequest.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhrDriveRequest.responseType = 'json';
xhrDriveRequest.send(form);
I implemented something similar for webcam recording using RecordRTC. The library provides a timeSlice integer in milliseconds and a ondataavailable( blob ) callback that will be called after every timeSlice period. You can then simply post the received blob to the server and stitch the blobs back together into a single file.
For example in PHP you would simply append or write the blob-data into file:
$filePath = '/path-to-file'; // path for each recording process created from an id or something unique
if (isset($_FILES["blob"])) {
// If the path already exists we are receiving further blobs => append, else write new file
$fp = fopen($filePath, file_exists($filePath) ? "a" : "w");
fwrite($fp, file_get_contents($_FILES["blob"]["tmp_name"]));
fclose($fp);
}
Google Drive API can perform a resumable upload. It will allow you to keep uploading while your screen is being recorded.
As a summary of how resumable uploads works:
POST request with the uploadType=resumable parameter and get the resumable session URI inside the Location header. Remember that as you don't know the length of the file, the X-Upload-Content-Length should not be setted.PUT requests to that URI with the Content-Length set to the number of bytes in the file.Content-Range to */* if you don't know the total file size, and the space of the new chunk.