js录制视频并保存

使用webAPI录制视频

经测试， 只在谷歌和火狐浏览器里起效。

代码：

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();

}

完整代码;

在线演示， 使用谷歌或火狐浏览器打开