Skip to content

Instantly share code, notes, and snippets.

@bendo01

bendo01/!README-javascript-media-video.md

Forked from tatsuyasusukida/!README-javascript-media-video.md
Created April 22, 2024 10:14
Show Gist options
  • Save bendo01/fe1612ed92afdd5f0bc7dc79526940dc to your computer and use it in GitHub Desktop.
Save bendo01/fe1612ed92afdd5f0bc7dc79526940dc to your computer and use it in GitHub Desktop.
Download ZIP
πŸŽ₯ How to record a video with JavaScript [demo video available]
Raw
!README-javascript-media-video.md

πŸŽ₯ How to record a video with JavaScript [demo video available]

Demo video: How to record a video with JavaScript

About this article

This article describes how to shoot a video from JavaScript using the MediaStream Recording API. The related resources are shown below.

Workflow

The workflow is shown below.

  1. Coding preparation
  2. Coding
  3. Operation check

Coding preparation

Run the following commands in your terminal to prepare for coding.

mkdir javascript-media-video
cd javascript-media-video
touch index.html main.js

Coding

index.html

Open index.html in your editor and enter the following content.

Click to go to index.html

main.js

Open main.js in your editor and enter the following content.

Click to go to main.js

The points are shown below.

  1. Get the media stream to capture the video.
  2. Check if recording in video / webm format is possible.
  3. Create a media recorder.
  4. Call the mediaRecorder.start method to start recording.
  5. Call the mediaRecorder.stop method to end recording.
  6. Add the dataavailable event handler of mediaRecorder to get the video data.

Operation check

Open index.html in your web browser. The following command are useful for macOS.

open index.html

You will be asked to allow access to the camera and microphone, so click the "Allow" button.

Click the "Allow" button and then the "Start" button to start recording.

Click the "Stop" button to stop recording.

Click the play button of the recorded video to play the video.

Conclusion

The MediaStream Recording API can be used not only for recording video, but also for recording audio. For information on how to record audio using MediaStream Recording, see How to record audio using MediaStream Recording, so if you are interested, please have a look. Thank you for reading!

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to record a video with JavaScript</title>
</head>
<body>
<div>
<button type="button" id="buttonStart">Start</button>
<button type="button" id="buttonStop" disabled>Stop</button>
</div>
<div>
<video autoplay muted playsinline id="videoLive"></video>
</div>
<div>
<video controls playsinline id="videoRecorded"></video>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
async function main () {
const buttonStart = document.querySelector('#buttonStart')
const buttonStop = document.querySelector('#buttonStop')
const videoLive = document.querySelector('#videoLive')
const videoRecorded = document.querySelector('#videoRecorded')
const stream = await navigator.mediaDevices.getUserMedia({ // <1>
video: true,
audio: true,
})
videoLive.srcObject = stream
if (!MediaRecorder.isTypeSupported('video/webm')) { // <2>
console.warn('video/webm is not supported')
}
const mediaRecorder = new MediaRecorder(stream, { // <3>
mimeType: 'video/webm',
})
buttonStart.addEventListener('click', () => {
mediaRecorder.start() // <4>
buttonStart.setAttribute('disabled', '')
buttonStop.removeAttribute('disabled')
})
buttonStop.addEventListener('click', () => {
mediaRecorder.stop() // <5>
buttonStart.removeAttribute('disabled')
buttonStop.setAttribute('disabled', '')
})
mediaRecorder.addEventListener('dataavailable', event => {
videoRecorded.src = URL.createObjectURL(event.data) // <6>
})
}
main()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment