Пишу веб приложение используя ASP.NET MVC
Задача записывать видео с вебки и потом его выводить на вьюху.
Нашел такой интересный плагин
https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC
Скачал его семпл, запустил, все работает и записывает и выводит
Решил впилить себе в код, то есть перенес контроллер
Собственно вот код
public class RecordRTCController : Controller
{
// ---/RecordRTC/
public ActionResult Index()
{
return View();
}
// ---/RecordRTC/PostRecordedAudioVideo
[HttpPost]
public ActionResult PostRecordedAudioVideo()
{
foreach (string upload in Request.Files)
{
var path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
var file = Request.Files[upload];
file?.SaveAs(Path.Combine(path, Request.Form[0]));
}
return Json(Request.Form[0]);
}
// ---/RecordRTC/DeleteFile
[HttpPost]
public ActionResult DeleteFile()
{
var fileUrl = AppDomain.CurrentDomain.BaseDirectory + "uploads/" + Request.Form["delete-file"] + ".webm";
new FileInfo(fileUrl).Delete();
return Json(true);
}
}
}
Вьюха вот (точнее скрипт на ней)
<script>
// PostBlob method uses XHR2 and FormData to submit
// recorded blob to the PHP server
function PostBlob(blob) {
// FormData
var formData = new FormData();
formData.append('video-filename', fileName);
formData.append('video-blob', blob);
// progress-bar
var hr = document.createElement('hr');
container.appendChild(hr);
var strong = document.createElement('strong');
strong.id = 'percentage';
strong.innerHTML = 'Video upload progress: ';
container.appendChild(strong);
var progress = document.createElement('progress');
container.appendChild(progress);
// POST the Blob using XHR2
xhr('/RecordRTC/PostRecordedAudioVideo', formData, progress, percentage, function (fName) {
container.appendChild(document.createElement('hr'));
var mediaElement = document.createElement('video');
var source = document.createElement('source');
source.src = location.href + 'uploads/' + fName.replace(/"/g, '');
source.type = 'video/webm; codecs="vp8, vorbis"';
mediaElement.appendChild(source);
mediaElement.controls = true;
container.appendChild(mediaElement);
mediaElement.play();
progress.parentNode.removeChild(progress);
strong.parentNode.removeChild(strong);
hr.parentNode.removeChild(hr);
});
}
var record = document.getElementById('record');
var stop = document.getElementById('stop');
var deleteFiles = document.getElementById('delete');
var preview = document.getElementById('preview');
var container = document.getElementById('container');
var recordVideo;
record.onclick = function () {
record.disabled = true;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({
audio: true,
video: true
}, function (stream) {
preview.src = window.URL.createObjectURL(stream);
preview.play();
recordVideo = RecordRTC(stream, {
type: 'video'
});
recordVideo.startRecording();
stop.disabled = false;
}, function (error) {
alert(error.toString());
});
};
var fileName;
stop.onclick = function () {
record.disabled = false;
stop.disabled = true;
preview.src = '';
fileName = (Math.round(Math.random() * 99999999) + 99999999) + '.webm';
recordVideo.stopRecording(function () {
PostBlob(recordVideo.getBlob());
});
deleteFiles.disabled = false;
};
deleteFiles.onclick = function () {
deleteAudioVideoFiles();
};
function deleteAudioVideoFiles() {
deleteFiles.disabled = true;
if (!fileName) return;
var formData = new FormData();
formData.append('delete-file', fileName);
xhr('/RecordRTC/DeleteFile', formData, null, null, function (response) {
console.log(response);
});
fileName = null;
container.innerHTML = '';
}
function xhr(url, data, progress, percentage, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
if (url.indexOf('/RecordRTC/DeleteFile') == -1) {
request.upload.onloadstart = function () {
percentage.innerHTML = 'Upload started...';
};
request.upload.onprogress = function (event) {
progress.max = event.total;
progress.value = event.loaded;
percentage.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
};
request.upload.onload = function () {
percentage.innerHTML = 'Saved!';
};
}
request.open('POST', url);
request.send(data);
}
window.onbeforeunload = function () {
if (!!fileName) {
deleteAudioVideoFiles();
return 'It seems that you\'ve not deleted audio/video files from the server.';
}
};
</script>
Есть проблема, в примере у него строка вывода видео такая
<source src="http://localhost:49498/uploads/136131867.webm" type="video/webm; codecs="vp8, vorbis"">
У меня выходит так
<source src="http://localhost:53159/RecordRTC/Indexuploads/128861458.webm" type="video/webm; codecs="vp8, vorbis"">
Не подскажете, почем так получается?
АПДЕЙТ
Я так понимаю в коде за вывод отвечет этот код
<section class="experiment">
<h2 class="header">Record and POST to Server! ( <a href="http://www.recordrtc.org/" title="Suggested to visit for RecordRTC demos and API Documentations">www.RecordRTC.org</a> )</h2>
<p style="text-align:center;">
<video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 240px; width: 320px;"></video>
</p>
<hr />
<button id="record">Record</button>
<button id="stop" disabled>Stop</button>
<button id="delete" disabled>Delete your webm/wav files from Server</button>
<div id="container" style="padding:1em 2em;"></div>
</section>
В общем проблема была в самой ссылке, как указал @Igor (спасибо)
строка src выглядела так source.src = location.href + 'uploads/' + fName.replace(/"/g, '');
Когда нужно было написать вот так source.src = document.location.origin + '/uploads/' + fName.replace(/"/g, '');
Теперь все работает.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Задумал написать игру (простой PacMan)Сделал Grid сетку 30x30 присвоил нажатию клавиш (стрелочек) методы для перемещения картинки Pacman по гриду: как...
Помогите! Не могу собрать проектДелаю релиз - у меня запускается, на 4 других машинах либо ошибка(на одной машине), либо совсем ничего