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

Question

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

I am not getting error ,I got this url ```blob:http://localhost/a7dcebe0-ed6d-44ca-90ff-05274f71097a``` ,in this ```stopRecordingCallback()```,I am not understand how can I convert this ```blob``` url to (.webm)video(mp4) and save in one folder,or can we convert first blob url to base64 then (.webm) we need to convert ,plz help me in this . — sandeep Sandy, Sep 03 '20 at 11:14
You said it's working in your own PC but not in others? So presumably there is some error or other unexpected behaviour when it runs in those situations. But we need more detailed and specific information than simply "not working". That could mean 100 different things. Precisely _what_ isn't working, and what happens instead? How much debugging have you done? — ADyson, Sep 03 '20 at 11:15
when I recorded in my PC i got this blob url ```blob:http://localhost/a7dcebe0-ed6d-44ca-90ff-05274f71097a``` ,this url if i try in another PC, it was not running ,it was telling like ```your file was not found``` ,but it is woriking in my PC — sandeep Sandy, Sep 03 '20 at 11:20
My problem is can we save this blob url into my PC folder with extension (.webm) or mp4 when click stop recording ,i am new to JS. Or can we convert blob url to base64 from base64 can we convert mp4 file is it possible ,if it is possible kindly let me know thanks — sandeep Sandy, Sep 03 '20 at 11:31
"it was telling "...what was? Instead of vaguely mentioning part of an error message, state clearly where you saw this message, which line of code you were on, and exactly what the full message says, including a stack trace if there is one provided by the browser. — ADyson, Sep 03 '20 at 11:53
"My problem is"...I thought your problem was that you can't generate the blob URL sometimes? Now you're asking about saving it - but you can't save something which doesn't exist, so you'll have to fix that first. Concentrate on one problem at a time, otherwise it will get confusing. — ADyson, Sep 03 '20 at 11:54
@ADyson Thanks for your response ,when i start my screen recording it working fine and it is recording then I click stop recording button then I can see my recorded video at `````` after that i can download the video by click download button instead of that one, if I click stop recording button ,i need to save that video in to my server folder automatically .this thing how can i do . — sandeep Sandy, Sep 03 '20 at 12:05
",i need to save that video in to my server folder"...you need to send it via AJAX. — ADyson, Sep 03 '20 at 12:44
There are a lot of questions, blogs, articles etc about this topic online already - just google "send blob url video to server". Here are some examples of the results from that simple search: https://stackoverflow.com/questions/52782256/record-video-stream-from-webcam-and-upload-blob-to-server, https://stackoverflow.com/questions/46880339/cant-save-uploaded-videos-blob-url-at-the-backend-server-using-ajax-call . Those might help you understand what you need to do. — ADyson, Sep 03 '20 at 12:48
P.S. if you google "send blob url to server" then you get even more useful results. The process is fairly generic, I don't think the fact that it's a video will make much difference (other than the file size might be larger than other types of file, so you might have to consider how to deal with that). — ADyson, Sep 03 '20 at 12:51

score 0 · Answer 1 · edited Jun 30 '21 at 22:49

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'
})

score 0 · Answer 2 · answered Jun 30 '21 at 13:38

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

2 Answers2