kkm/index.html

## index.html
<!DOCTYPE html>

<head>
  <script>
    var recordedChunks = [];
    var constraints = {
      audio: true,
      video: true
    };
    var mediaRecorder = null;

    navigator.mediaDevices.getUserMedia(constraints).then(onMediaSuccess, function(errorCallback) {
      console.log(errorCallback);
    });

    function onMediaSuccess(stream) {
      try {
        window.stream.getVideoTracks()[0].stop();
      } catch (err) {}
      window.stream = stream;
      var gumVideo = document.querySelector('video#local');
      gumVideo.src = window.URL.createObjectURL(stream);
    }

    function start() {
      var options = {
        mimeType: 'video/webm;codecs=H264'
      };
      mediaRecorder = new MediaRecorder(window.stream, options);
      mediaRecorder.ondataavailable = onDataAvailable;
      mediaRecorder.start(1000);
    }

    function stop() {
      mediaRecorder.stop();
    }

    function onDataAvailable(event) {
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
      }
    }

    function download() {
      var blob = new Blob(recordedChunks, {
        type: 'video/webm'
      });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      document.body.appendChild(a);
      a.style = 'display: none';
      a.href = url;
      a.download = 'test.webm';
      a.click();
      window.URL.revokeObjectURL(url);
    }
  </script>
</head>

<body>
  <button onclick="start()">record</button>
  <button onclick="stop()">stop</button>
  <button onclick="download()">download</button>
  <br>
  <video id="local" autoplay/>
</body>

</html>
	<!DOCTYPE html>

	<head>
	<script>
	var recordedChunks = [];
	var constraints = {
	audio: true,
	video: true
	};
	var mediaRecorder = null;

	navigator.mediaDevices.getUserMedia(constraints).then(onMediaSuccess, function(errorCallback) {
	console.log(errorCallback);
	});

	function onMediaSuccess(stream) {
	try {
	window.stream.getVideoTracks()[0].stop();
	} catch (err) {}
	window.stream = stream;
	var gumVideo = document.querySelector('video#local');
	gumVideo.src = window.URL.createObjectURL(stream);
	}

	function start() {
	var options = {
	mimeType: 'video/webm;codecs=H264'
	};
	mediaRecorder = new MediaRecorder(window.stream, options);
	mediaRecorder.ondataavailable = onDataAvailable;
	mediaRecorder.start(1000);
	}

	function stop() {
	mediaRecorder.stop();
	}

	function onDataAvailable(event) {
	if (event.data.size > 0) {
	recordedChunks.push(event.data);
	}
	}

	function download() {
	var blob = new Blob(recordedChunks, {
	type: 'video/webm'
	});
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	document.body.appendChild(a);
	a.style = 'display: none';
	a.href = url;
	a.download = 'test.webm';
	a.click();
	window.URL.revokeObjectURL(url);
	}
	</script>
	</head>

	<body>
	<button onclick="start()">record</button>
	<button onclick="stop()">stop</button>
	<button onclick="download()">download</button>
	<br>
	<video id="local" autoplay/>
	</body>

	</html>