Firebase - Extract an image or a thumbnail of an mp4 video uploaded to the STORAGE or when the .mp4 file is uploaded

Question

Firebase - Extract an image or a thumbnail of an mp4 video uploaded to the STORAGE or when the .mp4 file is uploaded

Navigation

#1 by (0 votes)

1

I spent a few days researching and reading firebase articles, Cloud Storage firebase, nodejs, canvas, javascript, apis, etc. But what I found is more complicated than what it should be and surely there will be easier ways to do it. Can someone guide me to get an easy solution?

It could be implemented with nodejs from the backend at the moment you receive the download URL or with javascript from the frontend at the moment you load the video file ** .mp4 **, the video does not have to be reproduced during the process and will never be on a <video> tag.

The upload of the video is done with File with the .put(file) method of Firebase, using a blob would open many possibilities working with canvas but I still think that I would have to There is an easier and faster way to do it with the help of Firebase-tools or a tool related to Firebase. I also thought that some expert from Firebase would respond quickly with some way of getting the image using the download URL provided by the STORAGE , but I'm still investigating and looking for someone to can guide me a little because I'm a bit green with Cloud Storage.

javascript firebase nodejs

asked by Enmanuel 11.11.2017 в 17:49

source

1 answer

How to use uglifyjs with classes? Replicate database taking into account possible changes in the source BD

score 0 · Answer 1

From javascript you can create the thumbnail using the drawImage () method

This would be the way to implement it:

<html>
<head>
<script>
function crearMiniaturaVideo(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}
</script>
</head>
<body>
<video id="video" src="test.mp4" type="video/mp4" controls></video><br/>
<button onclick="crearMiniaturaVideo()">Crear Miniatura</button> <br/><br/>
<canvas id="canvas"></canvas> <br/><br/>
</body>

</html>