The MediaDevices and MediaRecorder APIs in JavaScript can be used to record the user's screen.

Users are asked to select and grant permission to record the contents of a screen or a visible area through the MediaDevices interface.

Use media recorders to capture the data in a MediaStream that could be recorded. The MediaStream Recording API's MediaRecorder Interface.

INSTRUCTION

How to film the screen: the steps

1. Request that the user choose the window or screen from which to record input.
2. To save the MediaStream, create a MediaRecorder.
3. After the screen recording is complete, store.

The source of input must be selected by the user.

The getDisplayMedia method can be used to ask users to select the screen they want to capture. Additionally, you can choose a certain tab in the browser.

All selectors added:

let start = document.querySelector(".start-btn")
let stop = document.querySelector(".stop-btn")
var player = document.querySelector(".videoPlayer");
var download = document.querySelector(".download-btn");

Press the start button to launch the media selection.

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

The promise will be returned by the asynchronous procedure getDisplayMedia. We will then receive an unrecorded stream of data after the promise has been fulfilled.

You will be prompted by the code to select the display you want to record.

Choose your media source, then begin sharing.

mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm"
})
mediaRecorder.start()
let chunks = []
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})

In order to save the MediaStream, create a MediaRecorder.

The return value of the getDisplayMedia method is an undefined stream. Then, using that stream, we will create a MediaRecoreder and record the video. The MediaRecorder is available:

• The start method to start recording media.
• The streamed data is received within the dataavailable event.
• Stop method for stopping recording.

mediaRecorder.addEventListener('stop', function(){
stop.style.display = "none";
let blob = new Blob(chunks, {
type: chunks[0].type
})
let url = URL.createObjectURL(blob)
let video = document.querySelector("video")
video.src = url
player.style.display = "";
video.play();
download.href = url
download.download = 'screenRecord.webm'
download.style.display = "";

When the screen recording is finished, store

The media recorder's stop technique can be used to halt the recording. When the recording is finished, the MediaRecorder, which is where we transmit the recorded chunks, will be triggered by a cease event. We create the blob using the recordedChunks, which we then download.

stop.addEventListener("click", function () {
mediaRecorder.stop();
stop.style.display = "none";
})

Use the functions we developed before now. HTML Should be like this:

<div style="display:none;" class="videoPlayer">
<video class="video" width="600px" controls></video>
</div>
<div>
<button class="start-btn"> Start </button>
<button class="stop-btn" style="display:none;"> Stop </button>
<a class="download-btn" style="display:none;"> Download </a>
</div>

I sincerely hope you enjoy this video. If you have any questions, please leave a comment below.

Similar Tutorials

Comments