how to capture video from webcam and upload it to server?
Question
Am trying to record webcam video using getusermedia.
i followed this link
How to capture the video to the server using getusermedia
how do we know if the video is actually getting recorded. whether webcamstream.record is functioning?
3 answers
solution1
1 2013-11-12 08:45:20
function fallback(e) { video.src = 'fallbackvideo.webm'; }
function success(stream) { video.src = window.URL.createObjectURL(stream); }
if (!navigator.getUserMedia) { fallback(); } else {
navigator.getUserMedia({video: true}, success, fallback); }
Here you can get more information about it: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
solution2
0 2016-11-07 16:06:35
The example in the question you linked to uses frames/pictures taken from the canvas at regular intervals and finally converted to webm using Whammy. The resulting video has no sound.
Fortunately, you can now use both:
- client side Media Recorder API and
- server side WebRTC stream recording .
Both rely on the browser's native video/audio encoding capabilities and are widely supported by both Chrome and Firefox.
For more details/code/links see this answer .
solution3
0 2019-07-01 12:12:56
here is fully working code to record a video and save it to local as well as send it to server..............: Note: Edit this code according to your need...........
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.