javascriptvue.jslive-streamingm3u8hls.js

hls.js in chrome using vue doesnt update m3u8 playlist

I want to deploy a live streaming video in m3u8 format, in mounted() function, using:

if(Hls.isSupported()) {
    let video = this.$refs.videoPrueba2;
    let hls = new Hls();
    hls.loadSource('./HLS/out.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    });
}

However, when the page loads, the player loads every video in the playlist included up until the moment and stops playing. It doesn't play the new ts files being created. I have to CTRL + SHIFT + R (delete cache and reload the page) to see the video with the new ts files.

I created the .m3u8 file with the following ffmpeg command:

ffmpeg -re -i short.mp4 -c:v h264 -flags +cgop -g 30 -vf scale=-1:360 -hls_list_size 0 ./HLS/out.m3u8

I tried putting:

hls.loadSource('./HLS/out.m3u8');

in a setInterval but it didn't help.

Could this be a memory leak caused by vue and loadSource doesn't know where to load from?

Solution

  • It was a problem related to the browser's cache, it was solved by replacing:

    app.use(express.static(path.join(__dirname, 'streams'), { maxAge: 31557600000 }));

    with:

    app.use(express.static(path.join(__dirname, 'streams'), { maxAge: 0 }));