Get Started

Get Started

In development, you can test httplive simply;

import HTTPLive from 'httplive';

let video = document.getElementById('videoTag');

let flv = new HTTPLive({
  video
});

video.addEventListener('canplaythrough',()=>{
  video.play();
},false);

flv.send('https://xxx.flv');

But the simple demo will cost nearly ~9MB memory, the most of cost is Mux process. So you can move it to worker.

Webworker Version

Httplive provide no-worker version by default. If you want to use worker for better performace, you can import httplive by this way.

import HTTPLive from 'httplive/dist/index.worker.min';

// The following is the same
...
let flv = new HTTPLive({
  video
});
...

If you are using webpack, the easier way is to set alias property.

// worker
resolve:{
    alias:{
        httplive:path.resolve(__dirname,'node_modules/httplive/dist/index.worker.min.js')
    }
}

Usage

There some scenerios we often meet in our work, like report, getting playback time, analyze A/V unsync times, etc. For these scenes, we privde some API to achieve it.

Report IS info

After receiving the IS(Initialization Segment), it will emit the info event and provide some information of the flv stream.

flv.on('info',msg=>{
    window.__report({
        mediaInfo
        videoMime
        audioMime
    });
  
    window.__report("The video size, width: " + mediaInfo.width + " height: " + mediaInfo.height);
})

Analyze A/V unsync

After we receive flv chunk everytime, you can get some palyback info about A/V sync.

flv.on('sync',msg=>{
    let {diffTimebase,audioTimebase,videoTimeStamp} = msg;
    
    if(diffTimebase > 100){
        // videoTime is 100ms faster than audio
    }else{
        // A/V is sync
    }
})

MSE probe

Now, not all browsers support MSE. In order to confirm you can successfully use httlive, you can use HTTPLive.isSupported() to detect.

if(HTTPLive.isSupported()){
    httplive.send("https://xxxxflv");
}