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

## !README-javascript-media-video.md

      
    Raw
  

              !README-javascript-media-video.md
            
          
    🎥 How to record a video with JavaScript [demo video available]


About this article

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

Demo
Demo video
Source code
日本語版 / Japanese version

Workflow

The workflow is shown below.

Coding preparation
Coding
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.

Get the media stream to capture the video.
Check if recording in video / webm format is possible.
Create a media recorder.
Call the mediaRecorder.start method to start recording.
Call the mediaRecorder.stop method to end recording.
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!

  
## 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>

## 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()
	<!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()