使用JavaScript录制网络摄像头视频

我正在尝试使用用户的网络摄像头录制视频并保存视频。但当我单击“录制”按钮时，我的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);
}

---

方法

记录

在上不存在

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

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

文档示例

let preview=document.getElementById（“preview”）；
let recording=document.getElementById（“记录”）；
让startButton=document.getElementById（“startButton”）；
让stopButton=document.getElementById（“stopButton”）；
let downloadButton=document.getElementById（“downloadButton”）；
让logElement=document.getElementById（“log”）；
让RecordingTimes=5000；
函数日志（msg）{
logElement.innerHTML+=msg+“\n”；
}
函数等待（delayInMS）{
返回新承诺（resolve=>setTimeout（resolve，delayInMS））；
}
功能开始记录（流、长度）{
let recorder=新媒体记录器（流）；
让数据=[]；
recorder.ondataavailable=event=>data.push（event.data）；
recorder.start（）；
日志（recorder.state+”表示“+（lengthInMS/1000）+“秒…”）；
让停止=新承诺（（解决、拒绝）=>{
recorder.onstop=解析；
recorder.onerror=event=>reject（event.name）；
});
let recorded=等待（lengthInMS）。然后(
（）=>recorder.state==“录制”和&recorder.stop（）
  );
回报你的承诺([
停止，
记录
])
。然后（（）=>数据）；
}
功能停止（流）{
stream.getTracks（）.forEach（track=>track.stop（））；
}
addEventListener（“单击”，函数（）{
navigator.mediaDevices.getUserMedia({
视频：没错，
音频：正确
})。然后（流=>{
preview.srcObject=流；
downloadButton.href=流；
preview.captureStream=preview.captureStream | | preview.mozCaptureStream；
返回新承诺（resolve=>preview.onplaying=resolve）；
}).然后（（）=>开始录制（preview.captureStream（），录制时间））
。然后（recordedChunks=>{
让recordedBlob=newBlob（recordedChunks，{type:“video/webm”}）；
recording.src=URL.createObjectURL（recordedBlob）；
downloadButton.href=recording.src；
downloadButton.download=“RecordedVideo.webm”；
日志（“已成功录制”+recordedBlob.size+“字节数”+
recordedBlob.type+“媒体”）；
})
.渔获物（原木）；
}，假）；stopButton.addEventListener（“单击”，函数（）{
停止（preview.srcObject）；
}，假）
正文{
字体：14px“开放式Sans”，“Arial”，无衬线；
}
录像带{
边缘顶部：2倍；
边框：1px纯黑；
}
.按钮{
光标：指针；
显示：块；
宽度：160px；
边框：1px纯黑；
字体大小：16px；
文本对齐：居中；
垫顶：2件；
垫底：4px；
颜色：白色；
背景色：暗绿色；
文字装饰：无；
}
氢{
利润底部：4倍；
}
.左{
右边距：10px；
浮动：左；
宽度：160px；
填充：0px；
}
.对{
左边距：10px；
浮动：左；
宽度：160px；
填充：0px；
}
.底部{
明确：两者皆有；
填充顶部：10px；
}

单击“开始”按钮开始录像几秒钟。你可以停下来
通过单击创造性命名的“停止”按钮来播放视频。“下载”
按钮将下载接收到的数据（尽管它是原始的、未包装的形式）
这不是很有用）。



开始
预览
停止
记录
下载
mediaStream上没有录制功能->预览是id为“preview”的视频元素