Easy Screen Recording with Audio in ASP.NET | Code2Night
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Screen Recording with Audio using JavaScript in ASP.NET MVC

Date- Mar 20,2023

4228

Free Download Pay & Download
Screen recording

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


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 | 1190
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