Skip to content

Instantly share code, notes, and snippets.

@tatsuyasusukida
Last active March 26, 2024 04:05
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save tatsuyasusukida/b21c4c7d73c5e3d91ab97d8c040bc48e to your computer and use it in GitHub Desktop.
Save tatsuyasusukida/b21c4c7d73c5e3d91ab97d8c040bc48e to your computer and use it in GitHub Desktop.
πŸŽ₯ How to record a video with JavaScript [demo video available]

πŸŽ₯ 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!

<!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>
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()
@voivoikeri
Copy link

could you please share how to upload this video to server

@tatsuyasusukida
Copy link
Author

@voivoikeri

Thank you for your question!
A friend asked me the same question in the past and I wrote an article for him.
The article is written in Japanese, but I hope you find it helpful.

https://zenn.dev/tatsuyasusukida/scraps/7a60786e24fc87

Good luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment