Streaming videos with Nodejs

Question

Good morning! I have a REST API running on Node with Express, and the frontend running Vuejs. The API returns me a list with the name of some videos that were previously stored in an Storage, and a "Play" button. When you click this button, you start searching for the video. The frontend invokes a route in the API that should bring the video in parts(The user will watch while the browser brings the rest of the video, same as Youtube). The problem is that the server returns all the content of the video to me only once. I’m testing with a video of 300MB and arrives at once on the front of the 300MB. I believe that should arrive gradually for me to increase.

My route in the API:

async getVideoStreaming (request, response) {

const {video} = request.params;

var ep = new AWS.Endpoint(URL_STORAGE);

var s3 = new AWS.S3({
    accessKeyId: USER_KEY,
    secretAccessKey: SECRET_KEY,
    endpoint: ep,
    apiVersion: '2006-03-01'
});

var params = {Bucket: 'test_projects', Key: video};
var s3Stream = s3.getObject(params).createReadStream({highWaterMark: 1 * 1024}).pipe(response);

// Listen for errors returned by the service
s3Stream.on('error', function(err) {
    console.error(err);
});
s3Stream.on('close', function() {
    console.log('Done.');
});


// Tentativa com arquivo do servidor, sem conectar com o storage:
// filename = './tmp/myvideo.mp4'
// var readStream = fs.createReadStream(filename, {highWaterMark: 1 * 1024});
// readStream.pipe(response);

// fileStream.on('data', data => {
//  console.log('new data: ', data);
// })

},

My role in the frontend:

api.get('project/videostreaming/' + videoName, headers)
.then(async response => {

console.dir(response);
console.log('Chegando dados');
console.log(response.data.length) // Isso toda apenas uma vez e imprime o tamanho total do 
vídeo ao invés de imprimir o tamanho parcial

// Como eu imagino que deveria ser:
// meuVideo = meuVideo + currentChunk

})
.catch(error => {
    errors.handler(error, 'Não foi possível reproduzir o vídeo.');              
})

I’ve been doing a lot of research and reading about it for a few days now, but I can’t figure it out. Another frontend detail: As the file is large and arrives only once, at the time of putting in the player, the front hangs. I thank you for any help!

Answer 1

I solved the problem as follows, in case someone goes through the same situation:

I adapted my application to load the URL of the API that provides the file directly in the tag and . In the API the change was as follows:

var s3Stream = s3.getObject(params).createReadStream({highWaterMark: 1 * 1024}).pipe(response);