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:
<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.
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
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.
- 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.