Connecting With Cloudinary

Understand the Connection Process

Note this code snippet in the index.html file:

[...]        
    let opts = { mimeType: 'video/webm; codecs=vp9' };
    let rec = new MediaRecorder(videoElement.srcObject, opts);
    let blobs = [];
    
    rec.ondataavailable = (e) => (e.data && e.data.size > 0) ? blobs.push(e.data) : null;
    rec.onstop = () => {
        //  get the image blob
        let finalBlob = new Blob(blobs, { type: 'video/mp4' });
        // create form data for submission         
        let formData = new FormData();
        formData.append('upload_preset', 'CLOUDINARY_UPLOAD_PRESET');
        formData.append('api_key', "CLOUDINARY_API_KEY");
        formData.append('file', finalBlob);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", 'https://api.cloudinary.com/v1_1/CLOUDINARY_CLOUD_NAME/auto/upload');
        xhr.onreadystatechange = function () {
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                console.log(this.status);
                alert("Video uploaded to your cloudinary media library");
            }
        }
        xhr.send(formData);
    }
    rec.start(100);
    setTimeout(() => rec.stop(), 2000)
[...]

Lines 2-26 implement the core upload capability by first creating a media recording with videoElement.srcObject. Below that are the definitions of the properties for the rec variable, which instructs the recorder on how to act in various situations.

The rec.onstop property is of particular interest. When a recording is complete, the recorder obtains the recorded data and sends them as a single blob to Cloudinary with Cloudinary's Upload Presets.

Cloudinary Home Page

To further handle the videos you have uploaded, leverage Cloudinary. First, create an account there.

The Cloudinary Signup Page

Find Out Your Cloud Name

Cloudinary then takes you to your Dashboard (media console), in which your cloud name is displayed under Account Details (see the screenshot below). Replace the CLOUDINARY_CLOUD_NAME and CLOUDINARY_API_KEY variable in the index.html file in the previous code segments with that name.

Finding Your Cloudinary Cloud Name and API Key

Create a Cloudinary Upload Preset

Cloudinary Upload Presets enable you to set up the default behavior of your image uploads. That means that, instead of having to add parameters to apply to your images every time you upload one, you can define tags, transformations, and other analysis presets from your Cloudinary console. Simply specify the preset name in your code and you’re good to go!

To create a preset, go to the Upload Settings screen and click the Add upload preset link:

Adding an Upload Preset (1)

The Add upload preset screen is then displayed:

Adding an Upload Preset (2)

Type a name of your choice under Preset name, set Mode to Unsigned, and then specify the other details, as appropriate.

Now go back to the index.html file and replace CLOUDINARY_UPLOAD_PRESET with the name of your preset.

Test Uploads to Cloudinary

Now that you've added all your Cloudinary details to the index.html file, go to your Chrome browser and run your demo app. Afterwards, you'll see this display:

Screen Recorder Connected to Cloudinary for Uploads