Record Screen In asp.net MVC using RecordRTC

Date- Mar 18,2023

4954

Free Download

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.

<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