Javascript 如何从网络摄像头捕获视频并将其上传到服务器？
我正在尝试使用getusermedia录制网络摄像头视频 我跟踪了这个链接 我们如何知道视频是否真的被录制了。webcamstream.record是否正常工作 函数fallback（e）{video.src='fallbackvideo.webm'；} 函数成功（流）{video.src= window.URL.createObjectURL（流）；} if（！navigator.getUserMedia）{fallback（）；}else{Javascript 如何从网络摄像头捕获视频并将其上传到服务器？,javascript,html,getusermedia,Javascript,Html,Getusermedia,我正在尝试使用getusermedia录制网络摄像头视频 我跟踪了这个链接 我们如何知道视频是否真的被录制了。webcamstream.record是否正常工作 函数fallback（e）{video.src='fallbackvideo.webm'；} 函数成功（流）{video.src= window.URL.createObjectURL（流）；} if（！navigator.getUserMedia）{fallback（）；}else{ getUserMedia（{video:true
getUserMedia（{video:true}，成功，回退）；} 在这里，您可以获得有关它的更多信息： 函数fallback（e）{video.src='fallbackvideo.webm'；} 函数成功（流）{video.src= window.URL.createObjectURL（流）；} if（！navigator.getUserMedia）{fallback（）；}else{
getUserMedia（{video:true}，成功，回退）；} 在这里，您可以获得有关它的更多信息：
您链接到的问题中的示例使用定期从画布上拍摄的帧/图片，最后使用Whammy转换为
webm- 客户端媒体记录器API和
- 服务器端WebRTC流记录
有关更多详细信息/code/links，请参阅。您链接到的问题中的示例使用定期从画布上拍摄的帧/图片，最后使用Whammy转换为
webm- 客户端媒体记录器API和
- 服务器端WebRTC流记录
有关更多详细信息/代码/链接，请参阅。以下是完整的工作代码，用于录制视频并将其保存到本地以及将其发送到服务器………： 注意：根据您的需要编辑此代码
<html>
<div class="left">
<div id="startButton" class="button">
Start
</div>
<h2>Preview</h2>
<video id="preview" width="160" height="120" autoplay muted></video>
</div>
<div class="right">
<div id="stopButton" class="button">
Stop
</div>
<h2>Recording</h2>
<video id="recording" width="160" height="120" controls></video>
<a id="downloadButton" class="button">
Download
</a>
</div>
<script>
let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");
let recordingTimeMS = 5000;
function log(msg) {
//logElement.innerHTML += msg + "\n";
}
function wait(delayInMS) {
return new Promise(resolve => setTimeout(resolve, delayInMS));
}
function startRecording(stream, lengthInMS) {
let recorder = new MediaRecorder(stream);
let data = [];
recorder.ondataavailable = event => data.push(event.data);
recorder.start();
log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});
let recorded = wait(lengthInMS).then(
() => recorder.state == "recording" && recorder.stop()
);
return Promise.all([
stopped,
recorded
])
.then(() => data);
}
function stop(stream) {
stream.getTracks().forEach(track => track.stop());
}
startButton.addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).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" });
//upload it to server part start............................
/*you have **recordedBlob** data that is nothing but video data which is getting recorded you can send this data directly to server */
//Here I am writing sample code to send it to server
//making request
var xhr = new XMLHttpRequest();
//creating form data to append files
var fd = new FormData();
//append the recorded blob
fd.append("video",recordedBlob);
//send data to server..............
xhr.send(fd);
//upload it to server part finish............................
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);
stopButton.addEventListener("click", function() {
stop(preview.srcObject);
}, false);
</script>
</html>
开始
预览
停止
记录
下载
让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”}）；
//将其上载到服务器部件启动。。。。。。。。。。。。。。。。。。。。。。。。。。。。
/*您有**recordedBlob**数据，这些数据只是正在录制的视频数据。您可以将这些数据直接发送到服务器*/
//在这里，我正在编写示例代码以将其发送到服务器
//提出请求
var xhr=new XMLHttpRequest（）；
//创建表单数据以附加文件
var fd=新FormData（）；
//附加记录的blob
fd.追加（“视频”，录制的BLOB）；
//将数据发送到服务器。。。。。。。。。。。。。。
xhr.send（fd）；
//将其上载到服务器部件完成。。。。。。。。。。。。。。。。。。。。。。。。。。。。
recording.src=URL.createObjectURL（recordedBlob）；
downloadButton.href=recording.src；
downloadButton.download=“RecordedVideo.webm”；
日志（“已成功录制”+recordedBlob.size+“字节数”+
recordedBlob.type+“媒体”）；
})
.渔获物（原木）；
}，假）；
stopButton.addEventListener（“单击”，函数（）{
停止（preview.srcObject）；
}，假）；