20
Mar
2023
2023
Screen Recording with Audio using JavaScript in ASP.NET MVC
by Shubham Batra
474
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