@eyevinn/webrtc-player

中文文档
0.13.0发布于 2024/04/06MITTypeScriptCommonJS近 30 天下载 2.8万

媒体服务器独立 WebRTC 播放器

中文使用文档
文档目录9 节
  1. 安装
  2. 使用量
  3. 选项
  4. 适配器
  5. se.eyevinn.whpp
  6. whep
  7. se.eyevinn.webrtc
  8. 自定义适配器
  9. 捐款

媒体服务器独立 WebRTC 播放器

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

欢迎捐款,详情见下文.

在线演示

Screenshot of demo application

安装

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 交换协议 :

  1. WebRTC播放器(客户端)创建 SDP 报价.
  2. 客户端等待ICE候选人的甄选完成.
  3. 在 JSON 中发送更新的本地 SDP { sdp: <localSdp> } 使用 HTTP POST 到指定的服务器 channelUrl。 。 。 .
  4. 服务器使用 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来啊!

版本与发布记录

@eyevinn/webrtc-player 共发布 29 个版本,首次发布于 2022/04/06;过去 12 个月发布了 0 个版本。

版本发布日期距今
0.13.0latest2024/04/062 年前
0.12.12023/09/193 年前
0.12.02023/08/103 年前
0.11.22023/07/053 年前
0.11.12023/07/043 年前
0.11.02023/05/253 年前

关于 @eyevinn/webrtc-player 的常见问题

@eyevinn/webrtc-player 是什么?

媒体服务器独立 WebRTC 播放器

如何安装 @eyevinn/webrtc-player?

在项目目录运行 npm install @eyevinn/webrtc-player,或使用 pnpm add / yarn add / bun add。

@eyevinn/webrtc-player 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@eyevinn/webrtc-player 支持 ESM 还是 CommonJS?

以 CommonJS 形式发布,可以直接 require();在 ES Module 项目中也可以用 import 引入(Node.js 会把 module.exports 作为默认导出)。

@eyevinn/webrtc-player 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js >=18.15.0。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@eyevinn/webrtc-player 可以商用吗?

@eyevinn/webrtc-player 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@eyevinn/webrtc-player 的下载量有多少?

根据 npm 官方下载统计,@eyevinn/webrtc-player 在 2026/10/14 – 2026/11/12 这 30 天内被下载 27,816 次,日均约 927 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@eyevinn/webrtc-player 还在维护吗?

最新版本 0.13.0 发布于 2024/04/06(2 年前);至今共发布 29 个版本,其中过去 12 个月发布了 0 个;首次发布于 2022/04/06。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。