Record screen and audio

JavaScript
1

Can you please tell me how to change this code to record a screen from an audio microphone?

<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
<button id="btn-upload-recording" style="display: none;">Upload</button>

<hr>
<video controls autoplay playsinline></video>

<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
<script>
var video = document.querySelector('video');

function captureCamera(callback) 
{
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
        callback(camera);
    }).catch(function(error) {
        alert('Unable to capture your camera. Please check console logs.');
        console.error(error);
    });
}

function stopRecordingCallback() 
{
     video.src = video.srcObject = null;
     video.muted = false;
     video.volume = 1;
     var blob = recorder.getBlob();
     console.log('blob:'+blob); 
     var fileName = getFileName('webm');
     var fileObject = new File([blob], fileName, {
        type: 'video/webm',
        mimeType: 'video/webm;codecs=vp9',
     });

    video.src = URL.createObjectURL(fileObject);
    recorder.camera.stop();
    //recorder.destroy();
    //recorder = null;
    document.getElementById('btn-upload-recording').style.display = "block";
}

var recorder; 

document.getElementById('btn-start-recording').onclick = function() 
{
    this.disabled = true;
    captureCamera(function(camera) {
        video.muted = true;
        video.volume = 0;
        video.srcObject = camera;

        recorder = RecordRTC(camera, {
            type: 'video',
            mimeType: 'video/webm;codecs=vp9',
        });

        recorder.startRecording();

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

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


function uploadToPHPServer(blob, callback) 
{
    // create FormData
    var formData = new FormData();
    formData.append('video-filename', blob.name);
    formData.append('video-blob', blob);
    callback('Uploading recorded-file to server.');

    var upload_url = 'save.php';
    // var upload_url = 'RecordRTC-to-PHP/save.php';

    var upload_directory = upload_url;
    // var upload_directory = 'RecordRTC-to-PHP/uploads/';
    
    makeXMLHttpRequest(upload_url, formData, function(progress) {
        if (progress !== 'upload-ended') {
            callback(progress);
            return;
        }
        var initialURL = upload_directory + blob.name;
        callback('ended', initialURL);
    });
}

function makeXMLHttpRequest(url, data, callback) 
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            if (request.responseText === 'success') {
                callback('upload-ended');
                return;
            }
            alert(request.responseText);
            return;
        }
    };
    request.upload.onloadstart = function() {
        callback('PHP upload started...');
    };
    request.upload.onprogress = function(event) {
        callback('PHP upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
    };
    request.upload.onload = function() {
        callback('progress-about-to-end');
    };
    request.upload.onload = function() {
        callback('PHP upload ended. Getting file URL.');
    };
    request.upload.onerror = function(error) {
        callback('PHP upload failed.');
    };
    request.upload.onabort = function(error) {
        callback('PHP upload aborted.');
    };
    request.open('POST', url);
    request.send(data);
}

// this function is used to generate random file name
function getFileName(fileExtension) {
    var d = new Date();
    var year = d.getUTCFullYear();
    var month = d.getUTCMonth();
    var date = d.getUTCDate();
    return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}

function getRandomString() {
    if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
        var a = window.crypto.getRandomValues(new Uint32Array(3)),
            token = '';
        for (var i = 0, l = a.length; i < l; i++) {
            token += a[i].toString(36);
        }
        return token;
    } else {
        return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
    }
}
document.getElementById('btn-stop-recording').onclick = function() 
{
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
};

document.getElementById('btn-upload-recording').onclick = function() 
{     
     var blob = recorder.getBlob();
     var fileName = getFileName('webm');
     var fileObject = new File([blob], fileName, {
        type: 'video/webm',
        mimeType: 'video/webm;codecs=vp9',
     });
    uploadToPHPServer(fileObject, function(response, fileDownloadURL) 
    {});
    this.disabled = true;
    document.getElementById('btn-start-recording').disabled = false;
};
</script>

<footer style="margin-top: 20px;"><small id="send-message"></small></footer>
<script src="https://www.webrtc-experiment.com/common.js"></script>
2

You want your own computer camera to automatically come on when the mike is detected and working, or the camera of someone else’s computer?

3

I want to change the code for screen recording with audio

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.