js錄製視頻並儲存

標籤：webapi   fun   視頻   eve   並儲存   錄製視頻   function   儲存   class   

使用webAPI錄製視頻

經測試， 只在Google和Firefox瀏覽器裡起效。

代碼：

const streamVideo = document.querySelector('.stream')const playVideo = document.querySelector('.play');let chunk;const download = document.querySelector('#download');let recorder;let mediaStream;document.querySelector('.start').addEventListener('click', start);document.querySelector('.end').addEventListener('click', end);document.querySelector('.play-video').addEventListener('click', play);// MediaRecorder 測試const constraints = {  audio: false,  video: true,};function start() {  navigator.mediaDevices.getUserMedia(constraints)    .then(stream => {      mediaStream = stream;      streamVideo.srcObject = stream;      streamVideo.play();      recorder = new MediaRecorder(stream);      recorder.ondataavailable = e => {        chunk = e.data;        download.href = URL.createObjectURL(chunk);      };      recorder.start();    })}function end() {  streamVideo.pause();  recorder.stop();  mediaStream.getTracks().forEach(track => {    track.stop();  });}function play() {  playVideo.src = URL.createObjectURL(chunk);  playVideo.play();}

完整代碼;
線上示範， 使用Google或Firefox瀏覽器開啟

js錄製視頻並儲存