How to Record or Capture Screen in Browser Using Screen Capture API in Javascript Full Project For Beginners

How to Record or Capture Screen in Browser Using Screen Capture API in Javascript Full Project For Beginners


Welcome folks today in this blog post we will be recording or capture screen in browser using screen capture api in javascript. All the full source code of the application is shown below.




Get Started




In order to get started you need to make an index.html file and copy paste the following code






<!-- Learn about this code on MDN: -->

<p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>

<p><button id="start">Start Capture</button> <button id="stop">Stop Capture</button></p>

<video id="video" autoplay></video>

<pre id="log"></pre>
<script src=""></script



Now make a style.css file for styling the application using css






#video {
  border: 1px solid #999;
  width: 98%;
  max-width: 860px;

.error {
  color: red;

.warn {
  color: orange;

.info {
  color: darkgreen;


See also  Koa.js Router GET and POST Request Example in Node.js and Javascript Using Koa-router Library Full Project For Beginners


Now make a script.js file and copy paste the following code






const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

var displayMediaOptions = {
  video: {
    cursor: "never"
  audio: false

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
}, false);

stopElem.addEventListener("click", function(evt) {
}, false);console.log = msg => logElem.innerHTML += `${msg}<br>`;
console.error = msg => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<span><br>`; = msg => logElem.innerHTML += `<span class="info">${msg}</span><br>`;async function startCapture() {
  logElem.innerHTML = "";

  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
}function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];"Track settings:");, null, 2));"Track constraints:");, null, 2));

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...


See also  JavaScript Program to Compare Two Strings Using Regular Expression Full Project For Beginners


Leave a Reply