[英]Upload a video file as blob to AWS S3 using JavaScript or Angular CLI
I'm working on recording and storing video data from Mediarecorder API.我正在从 Mediarecorder API 录制和存储视频数据。 JavaScript below: 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>
It works perfectly on cameraCapture and Recording.它在 cameraCapture 和 Recording 上完美运行。
If you'll inspect the element, the video src or 'Copy Video Address' in browser, its a blob URI.如果您要在浏览器中检查元素、视频 src 或“复制视频地址”,则它是一个 blob URI。
I'm trying to figure out where this video is stored in browser but for now my need is, I want to store this video in AWS S3 somehow.我试图弄清楚这个视频在浏览器中的存储位置,但现在我的需要是,我想以某种方式将这个视频存储在 AWS S3 中。
I tried a simple demo using multer-s3 (node) and presigned URL( Angular CLI ) for a simple video file.我尝试了一个使用 multer-s3(节点)和预签名 URL(Angular CLI)的简单视频文件的简单演示。
I'm Finding it difficult to relate JavaScript SDK tutorial on AWS docs and achieve this.我发现很难在 AWS 文档上关联 JavaScript SDK 教程并实现这一点。
I need to know,我需要知道,
How to upload the video file(through blob URI) or someother means if any, to Amazon S3.如何将视频文件(通过 blob URI)或其他方式(如果有)上传到 Amazon S3。 The video URL is like this "blob: http://localhost:4000/3342d635-9026-4036- a012-0e184cec44c9"视频URL是这样的“blob: http://localhost:4000/3342d635-9026-4036- a012-0e184cec44c9”
Where is this video stored in the browser, I saw this , still lacking clarity这个视频在浏览器中存储在哪里,我看到了这个,仍然不清晰
If you wanna save video on your computer you can use next function:如果您想在计算机上保存视频,您可以使用下一个 function:
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();
Or if wanna save file on server try this, but you need have node.js:或者如果想在服务器上保存文件试试这个,但你需要有 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.log("file saved;"); }); }. fileReader;oneror = function (err) { if (err) throw err; }. fileReader;readAsArrayBuffer(blob)
Please find the below code.请找到以下代码。 It worked for me.它对我有用。 Get the blob once recording stopped and convert that into file and upload it to S3.录制停止后获取 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.log("Video uploaded")
}
if(err){
console.log("Video uploaded failed")
}
})
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.