Я работаю над записью и хранением видеоданных из Mediarecorder API. JavaScript ниже:
<button id = "start-recording">Start Recording</button>
<button id = "stop-recording" disabled>Stop Recording</button>
<video controls autoplay></video>
<script>
let videoStream;
let recorder;
let isRecording = false
let blobsArray = [];
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function (stream) {
videoStream = stream;
document.getElementById('video').setAttribute('src', window.URL.createObjectURL(stream));
})
function videoDataHandler (event) {
var blob = event.data;
document.getElementById('blob-video').setAttribute('src', window.URL.createObjectURL(blob));
};
var createMediaPlayer = function () {
window.recorder = new MediaRecorder(videoStream, {
mimeType: 'video/webm'
});
window.recorder.ondataavailable = videoDataHandler;
};
var recordButton = document.getElementById('record');
recordButton.addEventListener('click', function (e) {
isRecording = true;
createMediaPlayer();
window.recorder.start();
});
var stopButton = document.getElementById('stop');
stopButton.addEventListener('click', function (e) {
isRecording = false;
window.recorder.stop();
});
</script>
Он отлично работает с CameraCapture и Recording.
Если вы проверите элемент, источник видео или «Копировать адрес видео» в браузере, это будет URI большого двоичного объекта.
Я пытаюсь выяснить, где это видео хранится в браузере, но сейчас мне нужно как-то сохранить это видео в AWS S3.
Я попробовал простую демонстрацию с использованием multer-s3 (node) и предварительно подписанного URL (Angular CLI) для простого видеофайла.
Мне сложно связать учебник по SDK JavaScript с документами AWS и добиться этого.
Я подписался на этот Почта
Мне нужно знать,
Как загрузить видеофайл (через blob URI) или каким-либо другим способом, если есть, в Amazon S3. URL-адрес видео выглядит так: blob: http: // localhost: 4000 / 3342d635-9026-4036- a012-0e184cec44c9 "
Где это видео хранится в браузере, я видел это, все еще не хватает ясность
@JeremyThille О, я понимаю, я работаю над приложением для видеозвонков, требование клиента - сделать эту запись и, возможно, загрузить в интерфейс. Я искал свой POC. Я подумал об отправке события загрузки после завершения видеозвонка / записи, которое подтолкнет большой двоичный объект к S3. «javasampleapproach.com/aws/…». Итак, если мне нужно пройти через сервер или, однако, как мне это сделать с этим URI-адресом blob, я видел много сообщений, которые все еще неясны.
@JeremyThille ошибается. У вас должна быть возможность сделать это без предварительной загрузки на свой сервер, что просто тратит впустую ваш процессор и пропускную способность. Вы можете сделать это, создав заранее заданный URL-адрес.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если вы хотите сохранить видео на свой компьютер, вы можете использовать следующую функцию:
function saveVideo () {
var video = document.getElementById('video');
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = video.src;
a.download = 'video.webm';
a.click();
}
saveVideo();Или, если вы хотите сохранить файл на сервере, попробуйте это, но вам нужен node.js:
var blob = 'link on your blob file';
var fileReader = new FileReader();
fileReader.onload = function () {
var filePath = 'video.webm'
var buffer = Buffer.from(this.result);
fs.writeFile(filePath, buffer, 'binary', function (err) {
if (err) {
console.error("err", err);
console.info("file saved!");
});
};
fileReader.oneror = function (err) {
if (err) throw err;
};
fileReader.readAsArrayBuffer(blob);Эх, вы смешиваете API браузера и узла. Невозможно
Пожалуйста, найдите приведенный ниже код. У меня это сработало. Получите BLOB-объект после остановки записи, преобразуйте его в файл и загрузите в S3.
let blob = recorder.getBlob()
let file = new File([this.modelBlob], 'filename', { type: 'video/webm', lastModified: Date.now() })
await this.uploadFilesToS3('webm','videos',file,'myfile')
async uploadFilesToS3(extension,path,file,fileName) {
return new Promise(async (resolve, reject) => {
const bucket = new S3(
{
accessKeyId: "**your accesskey**",
secretAccessKey: "**your s3SecretAccessKey**",
region: "**your awsRegion **"
}
);
const params = {
Bucket: environment.bucketName,
Key: path+ "/" + fileName+ extension,
Body: file
};
bucket.upload(params,async(err,data)=>{
if (data){
console.info("Video uploaded")
}
if (err){
console.info("Video uploaded failed")
}
})
})
}
Есть ли способ напрямую передать большой двоичный объект из метода ondataavailable в хранилище вместо ожидания полного файла?
Вы не можете загрузить его из браузера. Сначала вам нужно отправить его на свой сервер, который содержит ваши учетные данные S3 и может безопасно подключаться к нему и отправлять ему файлы.