Record Screen in ASP.NET using RecordRTC Easy

18 Mar
2023

Record Screen In asp.net MVC using RecordRTC

by Shubham Batra

260

Welcome to Code2Night! In this tutorial, we will guide you through the process of creating a Record Screen In asp.net MVC using RecordRTC is a WebRTC JavaScript library for recording audio/video and screen activity. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac, and Windows.

Record Screen In asp.net MVC using RecordRTC

<div class="row">
    <div class="col-md-12">
        <h1>Chat Animation</h1>
    </div>

    <div class="modal-body row" style="padding-top: 50px; margin: 0 -160px 0px -175px;">
        <div class="col-md-12">
            <div style="display: none;">
                <video controls autoplay playsinline id="preview-video"></video>
            </div>
            <div id="element-to-record">
                <div class="container-fluid h-100">
                    <div class="row justify-content-center h-100">
                        <div class="col-md-12 col-xl-12 chat">
                            <div class="card">
                                <div class="card-body msg_card_body" id="">
                                    <div id="canvas_container">
                                        <div class="chat">
                                            <div class="chat-container">
                                                <div class="chat-listcontainer">
                                                    <ul class="chat-message-list">
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recording">
                <button id="btn-start-recording" class="main_button">● Start Recording</button>
                <button id="btn-stop-recording" class="main_button" disabled>● Stop Recording</button>
            </div>
        </div>
    </div>
</div>

Jquery code

 <link href="~/Content/ChatSheet.css" rel="stylesheet" />
@*<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">*@
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
<script src="~/Content/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/html2canvas.min.js"></script>
<script>
    var elementToRecord = document.getElementById('element-to-record');
    var canvas2d = document.getElementById('background-canvas');
    var context = canvas2d.getContext('2d');

    canvas2d.width = elementToRecord.clientWidth;
    canvas2d.height = elementToRecord.clientHeight;

    var isRecordingStarted = false;
    var isStoppedRecording = false;

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    (function looper() {
        if (!isRecordingStarted) {
            return setTimeout(looper, 500);
        }

        html2canvas(elementToRecord).then(function (canvas) {
            context.clearRect(0, 0, canvas2d.width, canvas2d.height);
            context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);

            if (isStoppedRecording) {
                return;
            }

            requestAnimationFrame(looper);
        });
    })();

    var recorder = new RecordRTC(canvas2d, {
        type: 'canvas'
    });

    document.getElementById('btn-start-recording').onclick = function () {
        this.disabled = true;

        isStoppedRecording = false;
        isRecordingStarted = true;

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

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

        recorder.stopRecording(function () {
            isRecordingStarted = false;
            isStoppedRecording = true;

            var blob = recorder.getBlob();
            // document.getElementById('preview-video').srcObject = null;
            document.getElementById('preview-video').src = URL.createObjectURL(blob);
            document.getElementById('preview-video').parentNode.style.display = 'block';
            elementToRecord.style.display = 'none';

            // window.open(URL.createObjectURL(blob));
        });
    };

    /////////////////////////////////////////// data bind


    var data = [];


    $(document).ready(function () {
        AnimationMessage();
    });

  
    function getDate() {
        var d = new Date();
        var time = d.getHours() + ":" + d.getMinutes();
        return time;
    }


    function delaySliderTime() {
        var delaySliderTime = 1000
        return delaySliderTime;
    }

    var chatMessages = [
        {
            value: 1,
            name: "ms1",
            message: "Hey, what are you up to tonight?",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'

        },
        {
            value: 2,
            name: "ms2",
            message: "Not much, just hanging out at home. Why do you ask?",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 3,
            name: "ms3",
            message: "I was thinking we could grab dinner or something. Maybe try that new sushi place in town?",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 4,
            name: "ms4",
            message: "That sounds great, what time were you thinking?",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 5,
            name: "ms5",
            message: "How about 7:00 PM? I can pick you up if you want.",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 6,
            name: "ms6",
            message: "Sure, that works for me. See you then!",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 7,
            name: "ms7",
            message: "Awesome, I'm looking forward to it. See you tonight!",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        }
    ];
    for (var i = 0; i < chatMessages.length; i++) {
        $('#textboxDiv').append('<br><div><select id="customerNameList' + i + '" class="custom-dropdown" name="customer" onchange="startChatDropdown(this)"></select> <input id="newInputBox' + i + '" value="' + chatMessages[i].message + '" class="msg_cotainer" type="text" onchange="startChatDropdown(this)"><br> </div>');
    }

    //animation
    var chatDelay = 0;

    function onRowAdded() {
        $('.chat-container').animate({
            scrollTop: $('.chat-container').prop('scrollHeight')
        });
    };

    function AnimationMessage() {
        $.each(chatMessages, function (index, obj) {
            chatDelay = chatDelay + 4000;
            chatDelay2 = chatDelay + obj.delay;
            chatDelay3 = chatDelay2 + 10;
            scrollDelay = chatDelay;
            chatTimeString = " ";
            msgname = "." + obj.name;
            msginner = ".messageinner-" + obj.name;
            spinner = ".sp-" + obj.name;
            if (obj.showTime == true) {
                chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
            }
            $(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.message + "</span>" + chatTimeString + "</div></li>");
            $(msgname).delay(chatDelay).fadeIn();
            $(spinner).delay(chatDelay2).hide(1);
            $(msginner).delay(chatDelay3).fadeIn();
            setTimeout(onRowAdded, chatDelay);
            setTimeout(onRowAdded, chatDelay3);
            chatDelay = chatDelay3;
        });
    }
    //animation

</script>

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

Style.css

 .main_button {
    appearance: button;
    background-color: #0098FD;
    border-radius: 20px;
    height: 54px;
    line-height: 1.15;
    margin: 12px 0 0;
    margin-left: 10px;
}

.recording {
    display: flex;
}

.bubble_container {
    display: flex;
    /*max-width: 800px;*/
    margin-bottom: 30px;
    justify-content: space-between;
}


.chat {
    margin-top: auto;
    margin-bottom: auto;
}

.card {
    /*height: 500px;*/
    border-radius: 15px !important;
    background-color: rgba(0,0,0,0.4) !important;
}


/*Enimation CSS*/
#wrapper {
    width: 600px;
    margin: 50px auto;
}

#canvas_container {
    margin-right: 0px;
    margin-bottom: 100px;
    height: 800px;
/*    width: 800px;*/
    border-radius: 8px;
    border-width: 7px;
    border-color: white;
    border-style: solid;
}

.chat ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.message-left .message-time {
    display: block;
    font-size: 12px;
    text-align: left;
    padding-left: 30px;
    padding-top: 4px;
    color: #ccc;
    font-family: Courier;
}

.message-right .message-time {
    display: block;
    font-size: 12px;
    text-align: right;
    padding-right: 20px;
    padding-top: 4px;
    color: #ccc;
    font-family: Courier;
}

.message-left {
    text-align: left;
    margin-bottom: 16px;
}

    .message-left .message-text {
        max-width: 80%;
        display: inline-block;
        background: #fff;
        padding: 15px;
        font-size: 14px;
        color: #999;
        border-radius: 30px;
        font-weight: 100;
        line-height: 1.5em;
    }

.message-right {
    text-align: right;
    margin-bottom: 16px;
}

    .message-right .message-text {
        line-height: 1.5em;
        display: inline-block;
        background: #5ca6fa;
        padding: 15px;
        font-size: 14px;
        color: #fff;
        border-radius: 30px;
        line-height: 1.5em;
        font-weight: 100;
        text-align: left;
    }

.chat {
    border-radius: 30px;
    padding: 20px;
    /*background: #f5f7fa;*/
}

.chat-container {
    height: 400px;
    overflow-y: scroll;
    padding-right: 16px;
}

.spinme-right {
    display: inline-block;
    padding: 15px 20px;
    font-size: 14px;
    border-radius: 30px;
    line-height: 1.25em;
    font-weight: 100;
    opacity: 0.2;
}

.spinme-left {
    display: inline-block;
    padding: 15px 20px;
    font-size: 14px;
    color: #ccc;
    border-radius: 30px;
    line-height: 1.25em;
    font-weight: 100;
    opacity: 0.2;
}

.spinner {
    margin: 0;
    width: 30px;
    text-align: center;
}

    .spinner > div {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        background: rgba(0,0,0,1);
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
/*Enimation CSS*/

@media(max-width: 576px) {
    .contacts_card {
        margin-bottom: 15px !important;
    }
}

.container.body-content {
    max-width: 1500px;
    padding-top: 50px;
}

Complete Code

 @{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-md-12">
        <h1>Chat Animation</h1>
    </div>

    <div class="modal-body row" style="padding-top: 50px; margin: 0 -160px 0px -175px;">
        <div class="col-md-12">
            <div style="display: none;">
                <video controls autoplay playsinline id="preview-video"></video>
            </div>
            <div id="element-to-record">
                <div class="container-fluid h-100">
                    <div class="row justify-content-center h-100">
                        <div class="col-md-12 col-xl-12 chat">
                            <div class="card">
                                <div class="card-body msg_card_body" id="">
                                    <div id="canvas_container">
                                        <div class="chat">
                                            <div class="chat-container">
                                                <div class="chat-listcontainer">
                                                    <ul class="chat-message-list">
                                                    </ul>
                                                </div>Record Screen In asp.net MVC using RecordRTC
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recording">
                <button id="btn-start-recording" class="main_button">● Start Recording</button>
                <button id="btn-stop-recording" class="main_button" disabled>● Stop Recording</button>
            </div>
        </div>
    </div>
</div>
<link href="~/Content/ChatSheet.css" rel="stylesheet" />
@*<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">*@
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
<script src="~/Content/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/html2canvas.min.js"></script>
<script>
    var elementToRecord = document.getElementById('element-to-record');
    var canvas2d = document.getElementById('background-canvas');
    var context = canvas2d.getContext('2d');

    canvas2d.width = elementToRecord.clientWidth;
    canvas2d.height = elementToRecord.clientHeight;

    var isRecordingStarted = false;
    var isStoppedRecording = false;

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    (function looper() {
        if (!isRecordingStarted) {
            return setTimeout(looper, 500);
        }

        html2canvas(elementToRecord).then(function (canvas) {
            context.clearRect(0, 0, canvas2d.width, canvas2d.height);
            context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);

            if (isStoppedRecording) {
                return;
            }

            requestAnimationFrame(looper);
        });
    })();

    var recorder = new RecordRTC(canvas2d, {
        type: 'canvas'
    });

    document.getElementById('btn-start-recording').onclick = function () {
        this.disabled = true;

        isStoppedRecording = false;
        isRecordingStarted = true;

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

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

        recorder.stopRecording(function () {
            isRecordingStarted = false;
            isStoppedRecording = true;

            var blob = recorder.getBlob();
            // document.getElementById('preview-video').srcObject = null;
            document.getElementById('preview-video').src = URL.createObjectURL(blob);
            document.getElementById('preview-video').parentNode.style.display = 'block';
            elementToRecord.style.display = 'none';

            // window.open(URL.createObjectURL(blob));
        });
    };

    /////////////////////////////////////////// data bind


    var data = [];


    $(document).ready(function () {
        AnimationMessage();
    });

  
    function getDate() {
        var d = new Date();
        var time = d.getHours() + ":" + d.getMinutes();
        return time;
    }


    function delaySliderTime() {
        var delaySliderTime = 1000
        return delaySliderTime;
    }

    var chatMessages = [
        {
            value: 1,
            name: "ms1",
            message: "Hey, what are you up to tonight?",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'

        },
        {
            value: 2,
            name: "ms2",
            message: "Not much, just hanging out at home. Why do you ask?",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 3,
            name: "ms3",
            message: "I was thinking we could grab dinner or something. Maybe try that new sushi place in town?",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 4,
            name: "ms4",
            message: "That sounds great, what time were you thinking?",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 5,
            name: "ms5",
            message: "How about 7:00 PM? I can pick you up if you want.",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 6,
            name: "ms6",
            message: "Sure, that works for me. See you then!",
            delay: delaySliderTime(),
            align: "right",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        },
        {
            value: 7,
            name: "ms7",
            message: "Awesome, I'm looking forward to it. See you tonight!",
            delay: delaySliderTime(),
            align: "left",
            showTime: true,
            time: getDate(),
            senderReceiver: 'mohit'
        }
    ];
    for (var i = 0; i < chatMessages.length; i++) {
        $('#textboxDiv').append('<br><div><select id="customerNameList' + i + '" class="custom-dropdown" name="customer" onchange="startChatDropdown(this)"></select> <input id="newInputBox' + i + '" value="' + chatMessages[i].message + '" class="msg_cotainer" type="text" onchange="startChatDropdown(this)"><br> </div>');
    }

    //animation
    var chatDelay = 0;

    function onRowAdded() {
        $('.chat-container').animate({
            scrollTop: $('.chat-container').prop('scrollHeight')
        });
    };

    function AnimationMessage() {
        $.each(chatMessages, function (index, obj) {
            chatDelay = chatDelay + 4000;
            chatDelay2 = chatDelay + obj.delay;
            chatDelay3 = chatDelay2 + 10;
            scrollDelay = chatDelay;
            chatTimeString = " ";
            msgname = "." + obj.name;
            msginner = ".messageinner-" + obj.name;
            spinner = ".sp-" + obj.name;
            if (obj.showTime == true) {
                chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
            }
            $(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.message + "</span>" + chatTimeString + "</div></li>");
            $(msgname).delay(chatDelay).fadeIn();
            $(spinner).delay(chatDelay2).hide(1);
            $(msginner).delay(chatDelay3).fadeIn();
            setTimeout(onRowAdded, chatDelay);
            setTimeout(onRowAdded, chatDelay3);
            chatDelay = chatDelay3;
        });
    }
    //animation

</script>

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

Output

Record Screen

Comments