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

Screen Recording with Audio using JavaScript in ASP.NET MVC

by Shubham Batra

432

Download Attachment

Welcome to Code2Night! In this tutorial, we will guide you through the process of creating a screen recording with audio using the JavaScript MediaRecorder API in ASP.NET whether you're a developer looking to incorporate this functionality into your web application or simply someone interested in learning a new skill, we've got you covered. Follow along and by the end of this tutorial, you'll be able to create your own screen recording with audio using just a few lines of JavaScript code. Let's get started!


Create HTML file, in which we will have a record button and a video element where we can play the recorded video.

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

<style>
    .record-btn {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
</style>
<div class="row" style="padding-top:10px">
    <video class="video" width="100%" controls></video>
    <button class="record-btn">record</button>
</div>
<script src="~/Content/index.js"></script>

And we also need a JS file so let's create the index.js 

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
    })

    //needed for better browser support
    const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
        ? "video/webm; codecs=vp9"
        : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(chunks, {
            type: chunks[0].type
        })
        let url = URL.createObjectURL(blob)

        let video = document.querySelector("video")
        video.src = url

        let a = document.createElement('a')
        a.href = url
        a.download = 'video.webm'
        a.click()
    })

    //we have to start the recorder manually
    mediaRecorder.start()
})

Output 

screen recording


  • |
  • Screen Recording with Audio using JavaScript in ASPNET MVC , Screen recording

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