同时记录前后网络摄像头

时间:2018-02-21 15:01:09

标签: javascript webcam getusermedia video-recording

我有以下代码,用平板电脑的后置摄像头录制5秒钟并下载视频:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script>
      navigator.mediaDevices.enumerateDevices()
        .then(devices => {
          var deviceId = [];
          devices.forEach(function(device) {
            if ( device.kind == 'videoinput' )
              deviceId.push(device.deviceId);
          });
          // deviceId[0] equals the id of the front camera (resolution: 1280x720)
          // deviceId[1] equals the id of the back camera (resolution: 1920x1080)
          navigator.mediaDevices.getUserMedia({ audio: true, video: { deviceId: { exact: deviceId[1] }, width: 1920, height: 1080 } })
            .then(stream => record(stream, 5000)
              .then(recording => {
                stop(stream);
                var a = document.createElement('a');
                a.href = URL.createObjectURL(new Blob(recording));
                a.download = "recording.webm";
                a.click();
              })
              .catch(log).then(() => stop(stream)))
            .catch(log);
        })
        .catch(log);

        var record = (stream, ms) => {
          var rec = new MediaRecorder(stream), data = [];
          rec.ondataavailable = e => data.push(e.data);
          rec.start();
          var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e));
          return Promise.all([stopped, wait(ms).then(() => rec.stop())])
            .then(() => data);
        };

        var stop = stream => stream.getTracks().forEach(track => track.stop());
        var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
        var log = err => console.log(err.name + ': ' + err.message);
    </script>
  </body>
</html>

我想弄清楚的是如何同时录制平板电脑的前后网络摄像头,并将视频作为单独的文件下载。

我找到了这个question,但它已经老了,所以我不确定今天是否可能。

0 个答案:

没有答案