媒体服务器独立 WebRTC 播放器
由于 SDP 提供/Answer 交换是 WebRTC 媒体服务器专用,所以这个WebRTC 播放器被设计与 Media Server 特定适配器相扩展. 您可以使用包含的媒体服务器适配器之一,也可以自建自定义适配器.
欢迎捐款,详情见下文.

安装
npm install @eyevinn/webrtc-player
要运行演示应用程序运行 :
npm run dev
提供STUN/TURN服务器的自定义列表以供使用.
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)
}
}
适配器
由于 SDP 交换是 WebRTC 媒体服务器的特异性,此玩家包括各种类型的 WebRTC 媒体服务器的适配器.
se.eyevinn.whpp
与执行此程序的 WebRTC 媒体服务器兼容 WebRTC HTTP 回放协议。 。 。 .
whep
与执行此程序的 WebRTC 媒体服务器兼容 WebRTC HTTP 侵略协议关于如何生成 WHEP 测试流的指示 这里。 。 。 .
se.eyevinn.webrtc
与 WebRTC 媒体服务器兼容 EEVINN WHIP (英语) 项目。 执行以下 SDP 交换协议 :
- WebRTC播放器(客户端)创建 SDP 报价.
- 客户端等待ICE候选人的甄选完成.
- 在 JSON 中发送更新的本地 SDP
{ sdp: <localSdp> }使用 HTTP POST 到指定的服务器channelUrl。 。 。 . - 服务器使用 JSON 响应
{ sdp: <remoteSdp> }包含远程 SDP.
自定义适配器
要提供自定义适配器, 请执行接口 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) {
}
}
然后提供工厂功能,以创建您适配器的新实例 .
const video = document.querySelector('video');
const player = new WebRTCPlayer({
video: video,
type: 'custom',
adapterFactory: (peer: RTCPeerConnection, channelUrl: URL) => {
return new CustomAdapter(peer, channelUrl);
}
});
捐款
我们非常乐意以WebRTC特定媒体服务器的适配器形式,以及当然的bugfixs和改进,为这个项目作出贡献。 写一个问题 与描述 与拉请求.
支助
加入我们 slack 社区 您可以在其中张贴任何关于我们开放源代码项目的问题。 Eyevin的咨询业务也可以提供:
- 本构成部分的进一步发展
- 此组件定制并整合到您的平台
- 支助和维持协定
联系人 销售量@ eyevin.se 如果你有兴趣.
关于 Eyevinn 技术
Eyevinn Technology是一家独立咨询公司,专门从事视频和流媒体制作. 独立的方式,我们不与任何平台或技术供应商进行商业联系.
在Eyevinn,每个软件开发者顾问都有专用预算,用于开源开发和对开源社区的贡献. 这为我们提供了创新、团队建设和个人能力发展的空间。 也给了我们公司一个为开放源码社区做出贡献的方法.
想知道更多关于"Eyevin" 和如何工作在这里。 联系我们 工作@ eyevin.se来啊!