Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
18 Mar
2023

Record Screen In asp.net MVC using RecordRTC

by Shubham Batra

260

Download Attachment

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

  • |
  • Record HTML Element In aspnet MVC using Jquery

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

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
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

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 © 2023 by Code2night. All Rights Reserved

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