How can we save blob url into (.webm) video in my server using javascript and php

Question

How can we save blob url into (.webm) video in my server using javascript and php

3.8k Views Asked by sandeep Sandy At 14 May 2025 at 21:00

I am using RecordRTC for screen recording,

Here is my code,

<html>
<head>
<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
    }

    video {
        width: 30%;
        border-radius: 5px;
        border: 1px solid black;
    }
</style>

<title>Screen Recording</title>
</head>
<body>
<h1>Screen Recording</h1>

<br>

<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>

<hr>
<video controls autoplay playsinline></video>
</body>
<script src="RecordRTC.js"></script>
<script>
var video = document.querySelector('video');

if(!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
    var error = 'Your browser does NOT support the getDisplayMedia API.';
    document.querySelector('h1').innerHTML = error;

    document.querySelector('video').style.display = 'none';
    document.getElementById('btn-start-recording').style.display = 'none';
    document.getElementById('btn-stop-recording').style.display = 'none';
    throw new Error(error);
}
    //alert("this is test");
function invokeGetDisplayMedia(success, error) {
    var displaymediastreamconstraints = {
        video: {
            displaySurface: 'monitor', // monitor, window, application, browser
            logicalSurface: true,
            cursor: 'always' // never, always, motion
        }
    };

    // above constraints are NOT supported YET
    // that's why overriding them
    displaymediastreamconstraints = {
        video: true
    };

    if(navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
    }
    else {
        navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
    }
}

function captureScreen(callback) {      
    invokeGetDisplayMedia(function(screen) {
        addStreamStopListener(screen, function() {
            document.getElementById('btn-stop-recording').click();
            
        });
        callback(screen);
    }, function(error) {
        console.error(error);
        alert('Unable to capture your screen. Please check console logs.\n' + error);
    });
}

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.src = URL.createObjectURL(recorder.getBlob());
   alert(video.src);
    recorder.screen.stop();
    recorder.destroy();
    recorder = null;

    document.getElementById('btn-start-recording').disabled = false;
}

var recorder; // globally accessible

document.getElementById('btn-start-recording').onclick = function() {

    this.disabled = true;

    captureScreen(function(screen) {
    
        video.srcObject = screen;

        recorder = RecordRTC(screen, {
            type: 'video'
        });

        recorder.startRecording();

        // release screen on stopRecording
        recorder.screen = screen;

        document.getElementById('btn-stop-recording').disabled = false;
    });
};

document.getElementById('btn-stop-recording').onclick = function() {
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
    
};

function addStreamStopListener(stream, callback) {
    stream.addEventListener('ended', function() {
        callback();
        callback = function() {};
    }, false);
    stream.addEventListener('inactive', function() {
        callback();
        callback = function() {};
    }, false);
    stream.getTracks().forEach(function(track) {
        track.addEventListener('ended', function() {
            callback();
            callback = function() {};
        }, false);
        track.addEventListener('inactive', function() {
            callback();
            callback = function() {};
        }, false);
    });
}
</script>

<br><br>

<footer style="margin-top: 20px; text-align: left;">
   <!-- <p style="padding: 5px 10px;"><b>Hints:</b> Are you using Chrome version 71? Please enable "chrome://flags/#enable-experimental-web-platform-features"</p>
    <p style="padding: 5px 10px;"><b>Browser support:</b> Firefox, Edge and Chrome &gt= 71</p>
    <div><small id="send-message"></small></div> -->
</footer> 
<!--<script src="https://www.webrtc-experiment.com/common.js"></script> -->

This is working fine means I can able to record when I click the start recording button after that if I click stop recording then I can see that video(what ever I recorded) at <video controls autoplay playsinline></video> if I want download then there is a download button in <video></video> then I can download upto here it working fine (This is I am doing in server).

But here when I click stop recording button that recorded video I need to download automatically in to my server folder(recordedFiles) as a MP4 .

What I was tried ,there is a function called stopRecordingCallback() ,in that function video.src is generating one video blob url like blob:https://server_ip/f4d27a7d-48f1-4499-9613-7953ef01edfe. This url I need to convert in to base64 and again save as (.webm)MP4

Here is My code what ever I tried in JS:

  let blob = new Blob(["blob:http://localhost/166d7686-4500-4a4a-993f-3b743d3afcb4"], { type: "video/webm" }); 
        // The full Blob Object can be seen  
        // in the Console of the Browser 
        console.log('Blob - ', blob); 
      
        var reader = new FileReader(); 
        reader.readAsDataURL(blob); 
        reader.onloadend = function () { 
        var base64String = reader.result; 
        console.log('Base64 String - ', base64String); 
      
        // Simply Print the Base64 Encoded String, 
        // without additional data: Attributes. 
        console.log('Base64 String without Tags- ',base64String.substr(base64String.indexOf(', ') + 1)); 
        }

This is not working at all .

How can I save that recorded file into my server folder using that blob url by using javascript or PHP.

Please help on this.

Thanks

Original Q&A

There are 2 best solutions below

**Shashank Singh** · Answer 1

In recordRTC use mimeType: 'video/webm; codecs=vp9' it will work in Google chrome, Mozilla Firefox and Microsoft Edge.

const recorder = RecordRTC(stream, {
    type: 'video', 

    // audio/webm
    // video/webm;codecs=vp9
    // video/webm;codecs=vp8
    // video/webm;codecs=h264
    // video/x-matroska;codecs=avc1
    // video/mpeg -- NOT supported by any browser, yet
    // video/mp4  -- NOT supported by any browser, yet
    // audio/wav
    // audio/ogg  -- ONLY Firefox
    // demo: simple-demos/isTypeSupported.html
    mimeType: 'video/webm;codecs=vp9'
})

**Camille** · Answer 2

I suggest make an XML POST request to a PHP script and use the video "file object" and not the blob element.

let request = new XMLHttpRequest();
let url = "your form treatment file path here" ;

var video = your video file object; // i don't know output gived by recorder but if you can have blob you sure can access the raw js file object 

var formData = new FormData();
formData.append("upload_video", file);


request.open("POST", url, true);

request.onload = function () {
    saveResponse = request.responseText;

        var result = document.getElementById('result'); // add an element with an id to display your PHP script return (to debug or display something once the video is uploaded) 
        result.innerHTML = saveResponse;


}
request.send(data);

Then you can access your file with PHP $_FILES['upload_video'] and do what you want with it.

How can we save blob url into (.webm) video in my server using javascript and php

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in RECORDRTC

Trending Questions

Popular # Hahtags

Popular Questions