使用JavaScript录制WebCam视频

Question

我正在尝试使用用户的网络摄像头录制视频并保存视频。但是，当我单击记录按钮时，我的javascript代码出现以下错误：

script.js:17 Uncaught TypeError: webCamStream.record is not a function
    at startRecording (script.js:17)
    at HTMLButtonElement.onclick (page1.html:10)

script.js：

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
      webCamStream = stream;
    })
    .catch(function (error) {
      console.log("Something went wrong!");
    });
}

function startRecording() {
    streamRecorder = webCamStream.record(); // gets error
    setTimeout(stopRecording, 10000);
}

function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}

function postVideoToServer(videoblob) {

    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("upload.php", data, onUploadSuccess);
}

Answer 1

record上不存在方法MediaStream，

您可以在给定流的情况下创建MediaRecorder：MDN MediaRecorder

示例

const video = new MediaRecorder(webCamStream)
video.start()

文档示例

startButton.addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  }).then(stream => {
    preview.srcObject = stream;
    downloadButton.href = stream;
    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
    return new Promise(resolve => preview.onplaying = resolve);
  }).then(() => startRecording(preview.captureStream(), recordingTimeMS))
  .then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
    recording.src = URL.createObjectURL(recordedBlob);
    downloadButton.href = recording.src;
    downloadButton.download = "RecordedVideo.webm";

    log("Successfully recorded " + recordedBlob.size + " bytes of " +
        recordedBlob.type + " media.");
  })
  .catch(log);
}, false);