Record Screen in ASP.NET using RecordRTC Easy | Code2Night
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Record Screen In asp.net MVC using RecordRTC

Date- Mar 18,2023

3054

Free Download Pay & 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.

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

Record Screen

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1210
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts