jquery - 如何将捕获的视频保存到 asp.net 中的文件夹？
问题描述
我已经创建了一个示例应用程序，asp.net它捕获Video来自webcam并在浏览器中播放它。我想save在videoasp.net 上保存button click。有什么方法可以blob url在保存按钮单击时获取对象并将视频文件保存到特定的folder？
test.aspx页
<!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>
解决方案
推荐阅读
- f# - FSharp POST F# 数据中的多个键/值对：HTTP 实用程序
- java - Android Studio 如何从数据库中保存静态变量
- wpf - ListView 绑定开箱即用，而自定义实现不是？
- android - 创建一个新的 Google_maps.api.xml 文件而不创建新的地图活动？
- vhdl - 为什么我会收到推断的闩锁错误？
- c# - NReco.VideoConverter.ConvertLiveMedia
- python - 在 Python 中迭代包含元组和 int 的列表
- excel - 主表中的多个条目
- azure-api-management - Azure API 管理 - 将请求映射到不同的响应代码
- r - 将输出保存到markdown中的文本文件