cstor-live-player

    1.1.0 • Public • Published

    English | 简体中文

    cstor-live-player

    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.

    Installing

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

    Using

    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:

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

    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.

    api

    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.

    Install

    npm i cstor-live-player

    DownloadsWeekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    1.74 MB

    Total Files

    13

    Last publish

    Collaborators

    • avatar