RTSPtoWEBPlayer
external video player for projects:
there is no GUI in this project, you can add your own GUI
Install
git clone https://github.com/vdalex25/RTSPtoWEBPlayer.git
cd RTSPtoWEBPlayer
npm install
npm run build
it's created compiled file dist/RTSPtoWEBPlayer.js
Usage
Add script to your page
<script src="dist/RTSPtoWEBPlayer.js"></script>
Create new player
const options={
parentElement: document.getElementById('player')
};
const player=new RTSPtoWEBPlayer(options);
player.load('ws://localhost:8083/stream/517fe9dbf4b244aaa0330cf582de9932/channel/0/mse?uuid=517fe9dbf4b244aaa0330cf582de9932&channel=0');
Options
options={
parentElement:null,
source:null,
controls:true,
muted:true,
autoplay:true,
loop:false,
hlsjsconfig: {
}
}
parentElement
default: null
HTMLElement
source
link to mediasource. requires explicit protocol http/https or ws/wss
controls
default: true
show/hide notive video control
muted
default: true
autoplay
default: true
loop
default: false
hlsjsconfig
default: empty;
full list of config you can see on API dicumentation hls.js
webrtcconfig
default:
{
iceServers: [{
urls: [
"stun:stun.l.google.com:19302"
]}
],
sdpSemantics: "unified-plan",
bundlePolicy: "max-compat",
iceTransportPolicy: "all"//for option "relay" need use turn server
}
full list of config you can see on RTCPeerConnection
Methods
load(source)
breaking previos connections and load new source
const server='127.0.0.1:8083';//server and port where is running one of mediaserver
const uuid='test';//stream uuid
const channel=0;//stream channel optional
//Project RTSPtoWeb[MSE]
const source=`ws://${server}/stream/${uuid}/channel/${channel}/mse?uuid=${uuid}/&channel=${channel}`;
//Project RTSPtoWeb[WEBRTC]
const source=`http://${server}/stream/${uuid}/channel/${channel}/webrtc?uuid=${uuid}/&channel=${channel}`;
//Project RTSPtoWeb[HLS]
const source=`http://${server}/stream/${uuid}/channel/${channel}/hls/live/index.m3u8`;
//Project RTSPtoWeb[HLSLL]
const source=`http://${server}/stream/${uuid}/channel/${channel}/hlsll/live/index.m3u8`;
//Project RTSPtoWebRTC[WEBRTC]
const source=`http://${server}/stream/receiver/${uuid}`;
//Project RTSPtoWSMP4f[MSE]
const source=`ws://${server}/ws/live?suuid=${uuid}`;
//Project RTSPtoHLS[HLS]
const source=`http://${server}/play/hls/${uuid}/index.m3u8`;
//Project RTSPtoHLSLL[HLS]
const source=`http://${server}/play/hls/${uuid}/index.m3u8`;
player.load(source);
destroy()
breaks all active connections and destroys the player
control media
for player control you can use all methods for video tag HTMLMediaElement over player.video
for example
const player=new RTSPtoWEBPlayer({
parentElement: document.getElementById('player')
});
player.load(source_url);
//pause
player.video.pause();
//play
player.video.play();
//get currentTime
console.log(player.video.currentTime);
//set currentTime
player.video.currentTime=10;
//etc