Skip to content

Softvelum/webrtc-player

 
 

Repository files navigation

WebRTC player

Demo

Getting Started

Download

Add library to HTML

<script defer="defer" src="webrtc-player.js"></script>

Usage

const video = document.querySelector('video');
const player = new WebRTCPlayer({
  video: video,
  type: 'whep'
});
player.load(new URL('https://127.0.0.1:8443/live/whip/whep.stream'));

Full example

<!DOCTYPE html>
<html>
  <head>
    <script defer="defer" src="webrtc-player.js"></script>
  </head>
  <body>
    <video autoplay muted controls playsinline>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", 
      const video = document.querySelector('video');
      const player = new WebRTCPlayer({
        video: video,
        type: 'whep'
      });
      player.load(new URL('https://127.0.0.1:8443/live/whip/whep.stream''));
      });
    </script>
  </body>
</html>

Options

{
  video: HTMLVideoElement;
  iceServers: RTCIceServer[]; // ICE server config
  type: string; // type of adapter (see below for a list of included adapters below)
  adapterFactory: AdapterFactoryFunction; // provide a custom adapter factory when adapter type is "custom"
  vmapUrl?: string; // url to endpoint to obtain VMAP XML (ads)
  statsTypeFilter?: string; // regexp to match what RTC stats events will be emitted
  timeoutThreshold?: number; // timeout in ms until no-media event is emitted (default 30000 ms)
  mediaConstraints?: {
    audioOnly?: boolean, // sets the "audio-only" playback mode (default: false)
    videoOnly?: boolean // sets the "video-only" playback mode (default: false)
  }
}

Nimble Streamer setup

Please refer to WHEP WebRTC playback setup article to learn more about the setup process on Nimble Streamer side.

Related documentation

Packages

No packages published

Languages

  • TypeScript 87.7%
  • HTML 11.8%
  • Other 0.5%