1.1.0 • Public • Published

    English | 简体中文


    Vue component for low delay video playing using mpegts.js.

    Can play http-flv or websocket streams enconded in h264.

    The player is relentless, it will always retry until video can be played. The player will try to keep up with time, if the video is somehow delayed, it will try to smoothly increase the playing speed.


    yarn add cstor-live-player
    # - or -
    npm install cstor-live-player


    The component doesn't autoregister as a Vue component, you must import the stylesheet and provide a size for the component..

    Absoulte minimal App.vue:

        <div id="app">
            <cstor-live-player style="height: 720px;" src="http://host:port/path/to/stream"/>
    import CstorLivePlayer from 'cstor-live-player'
    import 'cstor-live-player/dist/cstor-live-player.css'
    export default {
      components: {CstorLivePlayer}

    The player doesn't contain any buttons. You can create your own buttons and use the simple api.

    Audio is disabled by default, this is needed because autoplay feature is desired and unmuted video won't autoplay in current browsers, if you want to listen the audio channel, add the audio attribute.

    The player component will grow to fill the size of the encompasing component. It will try to keep the aspect ratio, if you want to forfeit the aspect ratio, you can try to add the fill attribute, take into account that some browsers might ignore you and keep the aspect ratio regardless.


    Component attributes

    src: String = stream url (reactive), http[s]://.../ or ws[s]://.../
    fill: Boolean = Fill the whole area instead of keeping aspect ratio
    audio: Boolean = enable audio channel, defaults to no audio

    js api:

    play(url: String) = Play a new stream
    stop() = stops the player
    captureImage() -> <canvas/> = Makes a screenshoot of the video.
    getVideoElement() -> <video/> = Returns the VideoElement in case you want to do something with it

    Notes regarding http streams

    Most browsers impose a limit on the number of connections to the same host:port, if you are going to play multiple videos, websocket protocol is recommended.

    Also, take into account that using websockets could decrease delay from realtime video.

    To be done

    • Make the images configurable.
    • (maybe) Add a slot for personalization.
    • (maybe) Do something about logging: add configuration or disable it.
    • Some messages are only in Chinese.


    npm i cstor-live-player

    DownloadsWeekly Downloads






    Unpacked Size

    1.74 MB

    Total Files


    Last publish


    • avatar