video-mirror-recording2.html

<style>
    html, body, video{
        margin: 0!important;
        padding: 0!important;background-color:black;
    }

    video {
        width: 82%;
    }

    .grid {
        text-align: center;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }
</style>

<title>Record Video Mirror | RecordRTC</title>
<h1>Record Video Mirror</h1>
<h1>Record Video Mirror</h1>

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

<hr>
<div class="grid">
    <div>
        <h2>Original Camera</h2>
        <video id="video-preview" controls autoplay playsinline></video>
    </div>
<div><h2>Original Camera</h2><iframe style="width: 86%;height: 100%;"src="video-mirror-recording3.html"></iframe>
    </div>
</div>

<script src="/RecordRTC.js"></script>
<script>
var videoPreview = document.querySelector('video');

var logoImage = document.getElementById('logo-image');
var waitImage = document.getElementById('wait-image');

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

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());
    
    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-start-recording2').onclick = function() {
    this.disabled = true;
    captureScreen(function(screen) {
        video2.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);
    });
}
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(function(camera) {
    videoPreview.muted = true;
    videoPreview.srcObject = camera;

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.style = 'position: absolute; top: 0; left: 0; opacity: 0; margin-top: -9999999999; margin-left: -9999999999; top: -9999999999; left: -9999999999; z-index: -1;';
    document.body.appendChild(canvas);

    var canvasStream = canvas.captureStream();

    var audioPlusCanvasStream = new MediaStream();

    getTracks(canvasStream, 'video').forEach(function(videoTrack) {
        audioPlusCanvasStream.addTrack(videoTrack);
    });
    
    getTracks(camera, 'audio').forEach(function(audioTrack) {
        audioPlusCanvasStream.addTrack(audioTrack);
    });

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

    canvasPreview.srcObject = canvasStream;

    recorder.setRecordingDuration(5 * 1000).onRecordingStopped(function() {
        var blob = recorder.getBlob();
        recorder = null;
        camera.stop();

        canvasPreview.src = canvasPreview.srcObject = null;

        videoPreview.muted = false;
        videoPreview.src = URL.createObjectURL(blob);
    });

    recorder.startRecording();

    (function looper() {
        //if(!recorder) return; // ignore/skip on stop-recording

        canvas.width = videoPreview.clientWidth;
        canvas.height = videoPreview.clientHeight;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.translate(canvas.width, 0);
        context.scale(-1, 1);
        context.drawImage(videoPreview, 0, 0, canvas.width, canvas.height);
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.restore();

        // repeat (looper)
        setTimeout(looper, 10);
    })();
}).catch(function(error) {
    alert('Unable to capture camera. Please check console logs.');
    console.error(error);
});
</script>

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