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.
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>@turn.eyevinn.technology:3478 npm run dev
import { WebRTCPlayer } from '@eyevinn/webrtc-player';
const video = document.querySelector('video');
const player = new WebRTCPlayer({
video: video,
type: 'whep',
statsTypeFilter: '^candidate-*|^inbound-rtp'
});
await player.load(new URL(channelUrl));
player.unmute();
player.on('no-media', () => {
console.log('media timeout occured');
});
player.on('media-recovered', () => {
console.log('media recovered');
});
// Subscribe for RTC stats: `stats:${RTCStatsType}`
player.on('stats:inbound-rtp', (report) => {
if (report.kind === 'video') {
console.log(report);
}
});{
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)
}
}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. Instructions on how to generate a WHEP test stream here.
Compatible with WebRTC media servers in Eyevinn WHIP project. Implements the following SDP exchange protocol:
- WebRTC player (client) creates an SDP offer.
- Client awaits ICE candidate selection to be completed.
- Sends an updated local SDP in a JSON
{ sdp: <localSdp> }to the server using HTTP POST to the specifiedchannelUrl. - Server responds with a JSON
{ sdp: <remoteSdp> }containing the remote SDP.
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 [email protected] if you are interested.
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 [email protected]!