Я пытаюсь загрузить видеофайл с типом данных BLOB-объектов, но я не хочу скачивать этот файл. просто извлеките этот файл из URL-адреса BLOB-объекта и поместите этот файл в переменную, а затем загрузите его оттуда на любой сервер.
Я использую ffmpeg, html5 и jquery для записи видео с камеры и пытался получить этот файл, но получаю видеофайл в формате BLOB-объектов
<div id="container">
<div class="col-md-12">
<div class="col-md-6">
<video id="gum" playsinline autoplay muted controls width="500px"></video>
</div>
<div class="col-md-6">
<video id="recorded" playsinline loop width="500px"></video>
</div>
</div>
<div>
<button id="start">Start camera</button>
<button id="record" disabled>Start Recording</button>
<button id="play">Play</button>
<button id="download" disabled >Upload</button>
</div>
<div style="visibility: hidden">
<p>Echo cancellation: <input type="checkbox" id="echoCancellation"></p>
</div>
<div>
<span id="errorMsg"></span>
</div>
</div>
<script>
function startRecording()
{
recordedBlobs = [];
let options = {mimeType: 'video/webm;codecs=vp9'};
if (!MediaRecorder.isTypeSupported(options.mimeType))
{
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: 'video/webm;codecs=vp8'};
if (!MediaRecorder.isTypeSupported(options.mimeType))
{
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: 'video/webm'};
if (!MediaRecorder.isTypeSupported(options.mimeType))
{
console.error(`${options.mimeType} is not Supported`);
errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
options = {mimeType: ''};
}
}
}
try
{
mediaRecorder = new MediaRecorder(window.stream, options);
const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
recordedVideo.src = null;
recordedVideo.srcObject = null;
recordedVideo.src = window.URL.createObjectURL(superBuffer);
recordedVideo.controls = true;
recordedVideo.load();
recordedVideo.muted = false;
console.log(recordedVideo.src);
console.log(mediaRecorder);
}
catch (e)
{
console.error('Exception while creating MediaRecorder:', e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
return;
}
console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
recordButton.textContent = 'Stop Recording';
// playButton.disabled = true;
// downloadButton.disabled = true;
mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ', event);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10); // collect 10ms of data
console.log('MediaRecorder started', mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
console.log('Recorded Blobs: ', recordedBlobs);
const blob = new Blob(recordedBlobs, {type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
// recordedVideo.src = window.URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.style.display = 'none';
// a.href = url;
// a.download = 'test.webm';
// document.body.appendChild(a);
// a.click();
// setTimeout(() => {
// document.body.removeChild(a);
// window.URL.revokeObjectURL(url);
// }, 100);
console.log(url);
if(url)
{
recordedVideo.src = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
// a.click();
// setTimeout(() => {
// document.body.removeChild(a);
// window.URL.revokeObjectURL(url);
// }, 100);
var files = url;
var token = "{{ csrf_token() }}";
var titles = "testing.mp4";
$.ajax({
url:"{{ url('lms/live-content/add') }}",
type:"POST",
__proto__: Blob,
data:{file:files, _token:token, title: titles},
// async:true,
// xhr: function()
// {
// if(window.XMLHttpRequest)
// { var xhr = new window.XMLHttpRequest();
// //Upload progress
// xhr.upload.addEventListener("progress", function(evt){
// if (evt.lengthComputable) {
// var percentComplete = evt.loaded / evt.total;
// //Do something with upload progress
// }
// }, false);
// }
// },
success:function(data){
alert("file uploaded..");
},
error: function(data){
console.log(data);
}
});
}else{
console.log(url);
}
}
Я ожидаю этогочтобы сохранить этот видеофайл с помощью ajax при остановке записи, нажмите кнопку события, но видеофайл blob - это не тот видеофайл, который я получаю, а просто URL: blob: http://localhost:8000/8cee30d0-6b0b-4f8a-bb7e-6a57064b03e1 как этот