JavaScript Screen Capture API Download

Screen Capture API Download In JavaScript

Screen Capture API can be used to capture part or all of a screen for streaming, recording or sharing.

The getDisplayMedia method is used to capture screen contents as a live MediaStream. The stream can be recorded via MediaDownloader as a blob in chunks. The recorded stream can be downloaded using an anchor tag.

Calling getDisplayMedia returns a promise resolving to a stream containing the live screen contents.

Screen Capture

Glossary:

MediaStream

Represents a stream of media content.

Stream

Consists of several tracks such as video or audio.

Blob

Represents a file-like object of immutable, raw data.

Screen Capture API Methods

Screen Capture Methods
Name Description Example
getDisplayMedia() Displays screen sharing stream navigator.mediaDevices.getDisplayMedia();
MediaDownloader() Download media MediaDownloader(stream);
Blob([arrayBuffer, typedArray, DataView, string, …], { type: ‘mime-type’ }) Binary Large Object Blob(recordedChunks, { type: “video/webm” });
download=”filename” Anchor tag download option download=”captured-video.webm”
Name Description Example

CSS Screen Capture API Download Snippet

.hide {
	display: none;
}
button,
.download {
	padding: 0.5rem;
	font-weight: bold;
	border: 1px solid rgb(0,0,0);
	color: rgba(0,0,0,1);
	background-color: buttonface;
	border-radius: 5px;
	text-decoration: none;
}
button:hover,
.download:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

HTML Screen Capture API Download Snippet

<button class="start">Record</button>
<video class="preview" width="640" height="360" autoplay muted></video>
<video class="record hide" width="640" height="360" controls></video>
<a class="download hide">Download</a>

JavaScript Screen Capture API Download Snippet

// OjamboShop.com Learning JavaScript Screen Capture API Download Tutorial
let start = document.querySelector('.start');
let preview = document.querySelector('.preview');
let record = document.querySelector('.record');
let download = document.querySelector('.download');
start.addEventListener("click", function(evt) {
	let text = evt.target.textContent;
	if (text == "Record") {
		evt.target.textContent = "Stop";
		navigator.mediaDevices.getDisplayMedia({
			video: true,
			audio: false
		}). then(stream => {
			preview.srcObject = stream;
			let recorder = new MediaRecorder(stream);
			let chunks = [];
			recorder.ondataavailable = event => chunks.push(event.data);
			recorder.onstop = event => {
				let blob = new Blob(chunks, { type: chunks[0].type });
				let [type, subtype] = chunks[0].type.split('/');
				record.src = URL.createObjectURL(blob);
				record.style.display = "inline-block";
				download.href = record.src;
				download.download = `captured-video.${subtype}`;
				download.style.display = "inline-block";
			};
			recorder.start();
		});
	} else {
		evt.target.textContent = "Record";
		preview.srcObject.getTracks().forEach(track => track.stop());
	}
});

JavaScript Screen Capture API Download Code
Netbeans IDE JavaScript Screen Capture API Download Code

JavaScript Screen Capture API Download Result
Web Browser Displaying JavaScript Screen Capture API Download Result


Usage

You can use any IDE or text editor and the web browser to compile and execute JavaScript code. For this tutorial, the OjamboShop.com Learning JavaScript Course Web IDE was used to input and compile JavaScript code for Screen Capture API record.

Open Source

JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. This allows commercial use, modification, distribution, and allows making derivatives proprietary.

Learn Programming Courses:

Courses are optimized for your web browser on any device.

OjamboShop.com Learning JavaScript Course
OjamboShop.com Learning JavaScript Interactive Online Course

Limited Time Offer:

OjamboShop.com is offering 20% off coupon code SCHOOL for Learning JavaScript Course until End Day 2024.

Learn Programming Ebooks:

Ebooks can be downloaded to your reader of choice.

OjamboShop.com Learning JavaScript Ebook
OjamboShop.com Learning JavaScript Ebook Cover Page

Conclusion:

JavaScript makes it easy to use Screen Capture API. Use the built-in getDisplayMedia method to display a screen capture, MediaDownloader to record the stream and the anchor tag to download.

Take this opportunity to learn the JavaScript programming language by making a one-time purchase at Learning JavaScript Course. A web browser is the only thing needed to learn JavaScript in 2024 at your leisure. All the developer tools are provided right in your web browser.

If you prefer to download ebook versions for your reader then you may purchase at Learning JavaScript Ebook

References: