Neatly Positioned Magazines

    TypeScript icon, indicating that this package has built-in type declarations

    0.8.1 • Public • Published

    Media Server independent WebRTC player

    As the SDP Offer/Answer exchange is WebRTC media server specific this WebRTC player is designed to be extended with Media Server specific adapters. You can either use one of the included media server adapters or build your own custom adapter.

    Contributions are welcome, see below for more information.

    Screenshot of demo application


    npm install @eyevinn/webrtc-player

    To run the demo application run:

    npm run dev

    To provide a custom list of STUN/TURN servers to use.

    ICE_SERVERS=turn:<USERNAME>:<SECRET> npm run dev


      import { WebRTCPlayer } from "@eyevinn/webrtc-player";
      const video = document.querySelector("video");
      const player = new WebRTCPlayer({ video: video, type: "se.eyevinn.whpp" });
      await player.load(new URL(channelUrl));


      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)


    As SDP exchange is WebRTC media server specific this player includes adapters for various types of WebRTC media servers.


    Compatible with WebRTC media servers that implements the WebRTC HTTP Playback Protocol.


    Compatible with WebRTC media servers that implements the WebRTC HTTP Egress Protocol.


    Compatible with WebRTC media servers in Eyevinn WHIP project. Implements the following SDP exchange protocol:

    1. WebRTC player (client) creates an SDP offer.
    2. Client awaits ICE candidate selection to be completed.
    3. Sends an updated local SDP in a JSON { sdp: <localSdp> } to the server using HTTP POST to the specified channelUrl.
    4. Server responds with a JSON { sdp: <remoteSdp> } containing the remote SDP.

    Custom Adapter

    To provide a custom adapter, implement the interface Adapter.

    import { WebRTCPlayer, Adapter } from "@eyevinn/webrtc-player";
    class CustomAdapter implements Adapter {
      private debug: boolean;
      private localPeer: RTCPeerConnection;
      private channelUrl: URL;
      constructor(peer: RTCPeerConnection, channelUrl: URL) {
        this.debug = false;
        this.localPeer = peer;
        this.channelUrl = channelUrl;
      // Called when debug logs should be enabled
      enableDebug() {
        this.debug = true;
      // Should return the RTCPeerConnection owned by this Adapter
      getPeer() : RTCPeerConnection {
        return this.localPeer;
      // Implement the Adapter signalling here, starting the SDP negotiation flow.
      connect(opts?: AdapterConnectOptions) {

    Then provide a factory function that will create a new instance of your adapter.

    const video = document.querySelector("video");
    const player = new WebRTCPlayer({
      video: video, 
      type: "custom", 
      adapterFactory: (peer: RTCPeerConnection, channelUrl: URL) => {
        return new CustomAdapter(peer, channelUrl);


    We would be super happy for contribution to this project in the form adapters for specific WebRTC media servers and of course bugfixes and improvements. Write an issue with a description together with a Pull Request.


    Join our community on Slack where you can post any questions regarding any of our open source projects. Eyevinn's consulting business can also offer you:

    • Further development of this component
    • Customization and integration of this component into your platform
    • Support and maintenance agreement

    Contact if you are interested.

    About Eyevinn Technology

    Eyevinn Technology is an independent consultant firm specialized in video and streaming. Independent in a way that we are not commercially tied to any platform or technology vendor.

    At Eyevinn, every software developer consultant has a dedicated budget reserved for open source development and contribution to the open source community. This give us room for innovation, team building and personal competence development. And also gives us as a company a way to contribute back to the open source community.

    Want to know more about Eyevinn and how it is to work here. Contact us at!



    npm i @eyevinn/webrtc-player

    DownloadsWeekly Downloads






    Unpacked Size

    2.07 MB

    Total Files


    Last publish


    • martinstark
    • jobi
    • slowmove
    • bwallberg