Elegant way to change playlist server URL while video is playing

[Pernifloss]

Hello, I have several servers providing playlist/chunklist and video for hls.

I wanted to know if there were an elegant way to change the server while the stream is playing. I tried changing the source on the go player.load(newSource); but there is a brief black image appearing.

Is there a more elegant way to change the Chunklist server while the video is playing?

Just for info this is for server scaling purpose, I have server starting and stopping, and I would like to transfer viewer from a server to another seamlessly.

[SangwonOh]

@Pernifloss Hi. My unit test in the code below changed the stream. Are there other issues causing the stream change to fail? https://airensoft.gitbook.io/ovenplayer/api-reference/api#load

player.load([
  {
      type: 'hls',
      file: 'http://192.168.0.234:3333/app/another_stream/llhls.m3u8'
  }
]);

[Pernifloss]

Hi @SangwonOh , thanks for your reply.

There is no problem with player.load() function.

I want to know if there is a way to change chunk list server. And without disturbing the stream playback.

I want to programmatically, in fronted, change the URL of where chunk list are fetched from.

I have several servers that can provide, chunk list and video files, and I want to move viewer from a server to another, in case this server have to stop. With the less disturbance as possible for the viewer.

Thanks.

[SangwonOh]

In my opinion, it's better to approach it from the infrastructure side (dns routing, load balancer, etc.).

If you really want to do it on the frontend side, you can implement a custom fragment loader in hlsjs. https://github.com/video-dev/hls.js/blob/master/docs/API.md#floader

I think you can intercept the url and replace it with the url of the server you want. OvenPlayer can be applied as follows.

class myCustomFragmentLoader extends Hls.DefaultConfig.loader {
    constructor(config) {
        super(config);
        const load = this.load.bind(this);
        this.load = function (context, config, callbacks) {
            // you can replace  urls
            // context.url = context.url.replace('from-A', 'to-B')
            console.log(context.url);
            load(context, config, callbacks);
        };
    }
}

const player = OvenPlayer.create('player', {
    autoStart: true,
    sources: [
        {
            type: 'hls',
            file: 'http://192.168.0.234:3333/app/stream/playlist.m3u8'
        }
    ],
    hlsConfig: {
        fLoader: myCustomFragmentLoader
    }
});

[Pernifloss]

Oh Nice, Thank you, @SangwonOh I will try that.