How to use a image blob captured from a webcam?

[bphein1980]

Title says it all. I am capturing a frame from a webcam as a blob. How can I process that blob for super resolution using JS?

There are 2 examples, 1 using file input and other using URL...

(async function() {
    var resp = await deepai.callStandardApi("torch-srgan", {
            image: document.getElementById('yourFileInputId'),
    });
    console.log(resp);
})()

I dont want to save the image until it is processed for super resolution, so I dont yet have a URL and I am also not using a file input.

[DJStompZone]

To use a blob (captured from a webcam or any other source) with the DeepAI API, you can convert the blob to a File object and then send it in the request.

// JavaScript doesn't have a native Blob to File conversion, but since File inherits 
// from Blob, you can create a new File instance from a blob like this:
const blobToFile = (blob, fileName) => {
    return new File([blob], fileName, { type: blob.type });
};

(async function() {
    const fileFromBlob = blobToFile(capturedBlob, "captured_frame.jpg");

    var resp = await deepai.callStandardApi("torch-srgan", {
        image: fileFromBlob,
    });

    console.log(resp);
})();

This approach will allow you to process the captured frame without saving it or having a URL. Hope this helps!