私のアプリケーションでは、ユーザーにビデオを録画してもらいたいと思っています。次に、ビデオをサーバー ディスクにダウンロードする必要があります。ただし、クライアント ブラウザにダウンロードしています。2 分または 3 分のビデオをサーバーに保存するにはどうすればよいですか。私はこれに使用getusermediaしました。私は次のようなコードを書きました：
(function(exports) {
exports.URL = exports.URL || exports.webkitURL;
exports.requestAnimationFrame = exports.requestAnimationFrame ||
exports.webkitRequestAnimationFrame || exports.mozRequestAnimationFrame ||
exports.msRequestAnimationFrame || exports.oRequestAnimationFrame;
exports.cancelAnimationFrame = exports.cancelAnimationFrame ||
exports.webkitCancelAnimationFrame || exports.mozCancelAnimationFrame ||
exports.msCancelAnimationFrame || exports.oCancelAnimationFrame;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var ORIGINAL_DOC_TITLE = document.title;
var video = $('video');
var canvas = document.createElement('canvas');
var rafId = null;
var startTime = null;
var endTime = null;
function $(selector) {
return document.querySelector(selector) || null;
}
function toggleActivateRecordButton() {
var b = $('#record-me');
b.textContent = b.disabled ? 'Record' : 'Recording...';
b.classList.toggle('recording');
b.disabled = !b.disabled;
}
function turnOnCamera(e) {
e.target.disabled = true;
$('#record-me').disabled = false;
video.controls = false;
var finishVideoSetup_ = function() {
setTimeout(function() {
video.width = 320;
video.height = 240;
canvas.width = video.width;
canvas.height = video.height;
}, 1000);
};
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
finishVideoSetup_();
}, function(e) {
video.src = 'Chrome_ImF.mp4';
finishVideoSetup_();
});
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true }, onRecordSucces, onFail);
} else {
console.log('navigator.getUserMedia not to present');
}
};
function record() {
var elapsedTime = $('#elasped-time');
var ctx = canvas.getContext('2d');
var CANVAS_HEIGHT = canvas.height;
var CANVAS_WIDTH = canvas.width;
frames = []; // clear existing frames;
startTime = Date.now();
toggleActivateRecordButton();
$('#stop-me').disabled = false;
function drawVideoFrame_(time) {
rafId = requestAnimationFrame(drawVideoFrame_);
ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
document.title = 'Recording...' + Math.round((Date.now() - startTime) / 1000) + 's';
var url = canvas.toDataURL('image/webp', 1);
frames.push(url);
};
rafId = requestAnimationFrame(drawVideoFrame_);
startRecording();
};
function stop() {
cancelAnimationFrame(rafId);
endTime = Date.now();
$('#stop-me').disabled = true;
document.title = ORIGINAL_DOC_TITLE;
toggleActivateRecordButton();
embedVideoPreview();
};
function embedVideoPreview(opt_url) {
var url = opt_url || null;
var video = $('#video-preview video') || null;
var downloadLink = $('#video-preview a[download]') || null;
if (!video) {
video = document.createElement('video');
video.autoplay = true;
video.controls = true;
video.style.width = canvas.width + 'px';
video.style.height = canvas.height + 'px';
$('#video-preview').appendChild(video);
downloadLink = document.createElement('a');
downloadLink.download = 'capture.webm';
downloadLink.textContent = '[ download video ]';
downloadLink.title = 'Download your .webm video';
var p = document.createElement('p');
p.appendChild(downloadLink);
$('#video-preview').appendChild(p);
} else {
window.URL.revokeObjectURL(video.src);
}
if (!url) {
webmBlob = Whammy.fromImageArray(frames, 1000 / 60);
url = window.URL.createObjectURL(webmBlob);
video.src = url;
downloadLink.href = url;
}
function initEvents() {
$('#camera-me').addEventListener('click', turnOnCamera);
$('#record-me').addEventListener('click', record);
$('#stop-me').addEventListener('click', stop);
}
initEvents();
exports.$ = $;
})(window);
ダウンロード リンクをクリックすると、ユーザー ブラウザにダウンロードされます。しかし、データをサーバーに送信してサーバーディスクに保存したい。データをコントローラーに渡して取得しようとしましwebmblobた。しかし、アクセスしていません。私は次のようなコードを書きました
$.ajax({
url: '/Home/VideoData',
type: 'POST',
dataType: 'blob',
cache: false,
data: {
data: webmblob
},
contentType: "application/json; charset=utf-8",
error: function (xhr, status, error) {
},
success: function () {
},
});
コントローラーで私は次のように定義しました
public ActionResult VideoData(string data)
{
return Json("success", JsonRequestBehavior.AllowGet);
}
しかし、コントローラーに来るデータは[object blob]. 私の英語でごめんなさい。私の質問を理解していただければ幸いです。動画に変換する方法を教えてください。どんな助けでも大歓迎です。