I have created a sample application in asp.net it captures the Video from webcam and plays it in browser. I want to save the video in asp.net on save button click. Is there any way we can get the blob url object on save button click and save the video file to specific folder?
test.aspx page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
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...");
$('#startButton').attr('disabled', true);
$('#stopButton').attr('disabled', false);
$('#downloadButton').attr('disabled', true);
$('#<%=btnsaven.ClientID%>').attr('disabled', true);
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: 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/mp4" });
let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
recording.src = URL.createObjectURL(recordedBlob);
downloadButton.href = recording.src;
// downloadButton.download = "RecordedVideo.mp4";
downloadButton.download = "RecordedVideo.webm";
//sms starts here
// generating a random file name
var fileName = getFileName('webm');
// we need to upload "File" --- not "Blob"
var fileObject = new File([recordedBlob], fileName, {
type: 'video/webm'
});
console.log("File Object: "+ fileObject);
//sms ends here
$('#startButton').attr('disabled', false);
$('#stopButton').attr('disabled', true);
$('#downloadButton').attr('disabled', false);
$('#<%=btnsaven.ClientID%>').attr('disabled', false);
var reader = new FileReader();
reader.readAsDataURL(recordedBlob);
reader.onloadend = function () {
var base64data = reader.result;
document.getElementById("<%=hfName.ClientID %>").value = base64data;
}
stop(preview.srcObject);
log("Successfully recorded " + recordedBlob.size + " bytes of " +
recordedBlob.type + " media.");
})
.catch(log);
}, false); stopButton.addEventListener("click", function () {
stop(preview.srcObject);
$('#startButton').attr('disabled', false);
$('#stopButton').attr('disabled', true);
$('#downloadButton').attr('disabled', false);
$('#<%=btnsaven.ClientID%>').attr('disabled', false);
}, false);
});
// this function is used to generate random file name
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth();
var date = d.getUTCDate();
return 'RecordDC_' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}
function getRandomString() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="panel-body">
<div class="col-md-1">
</div>
<div class="col-md-3">
<h2>Live Preview</h2>
<video id="preview" controls width="260" height="150" autoplay muted style="border: solid 2px green; background-color: black"></video>
<br />
<div id="startButton" class="button btn btn-success btn-sm"> Start </div>
<div id="stopButton" disabled class="button btn btn-warning btn-sm"> Stop </div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
<br />
<br />
</div>
<div class="col-md-4">
<h2>Recorded Video</h2>
<video id="recording" width="260" height="150" controls style="border: solid 2px green"></video>
<br />
<a id="downloadButton" disabled class="button btn btn-primary btn-sm"> Download </a>
<asp:HiddenField ID="hfName" runat="server" />
</div>
<div class="col-md-12">
<br />
<pre id="log"></pre>
</div>
<asp:Button ID="btnsaven" runat="server" Text="Save" />
</div>
</form>
</body>
</html>