whepts 1.0.2 → 1.0.3

package/src/core/track.ts

@@ -0,0 +1,51 @@
+export class TrackManager {
+  private stream?: MediaStream
+  private observer?: IntersectionObserver
+
+  constructor(private container: HTMLMediaElement) {}
+
+  onTrack(evt: RTCTrackEvent): void {
+    this.stream = evt.streams[0]
+
+    // 停止之前的观察器
+    this.stopObserver()
+
+    // 创建新的可见性观察器，自动处理暂停/恢复
+    this.observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting)
+          this.resume()
+        else
+          this.pause()
+      },
+      { threshold: 0.5 },
+    )
+
+    this.observer.observe(this.container)
+  }
+
+  private stopObserver(): void {
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = undefined
+    }
+  }
+
+  get paused(): boolean {
+    return this.container.srcObject === null
+  }
+
+  pause(): void {
+    this.container.srcObject = null
+  }
+
+  resume(): void {
+    if (this.stream && this.paused)
+      this.container.srcObject = this.stream
+  }
+
+  stop(): void {
+    this.stopObserver()
+    this.stream = undefined
+  }
+}

package/src/index.ts

@@ -1,6 +1,7 @@
+import type { Conf, State } from './types'
 import { ErrorTypes, WebRTCError } from './errors'
-import WebRTCWhep, { Conf } from './whep'
+import WebRTCWhep from './whep'
 
-export { Conf, ErrorTypes, WebRTCError }
+export { Conf, ErrorTypes, State, WebRTCError }
 
 export default WebRTCWhep

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { WebRTCError } from './errors'
+
+/**
+ * Configuration interface for WebRTCWhep.
+ */
+export interface Conf {
+  /** Absolute URL of the WHEP endpoint */
+  url: string
+  /** Media player container */
+  container: HTMLMediaElement
+  /** Username for authentication */
+  user?: string
+  /** Password for authentication */
+  pass?: string
+  /** Token for authentication */
+  token?: string
+  /** ice server list */
+  iceServers?: RTCIceServer[]
+  /** Called when there's an error */
+  onError?: (err: WebRTCError) => void
+}
+
+/**
+ * State type for WebRTCWhep.
+ */
+export type State = 'getting_codecs' | 'running' | 'restarting' | 'closed' | 'failed'
+
+/** Extend RTCConfiguration to include experimental properties */
+declare global {
+  interface RTCConfiguration {
+    sdpSemantics?: 'plan-b' | 'unified-plan'
+  }
+
+  interface RTCIceServer {
+    credentialType?: 'password'
+  }
+}

package/src/whep.ts

@@ -1,95 +1,81 @@
-import type { ParsedOffer } from './utils/sdp'
-import VisibilityObserver from '~/utils/observer'
+import type { Conf, State } from './types'
+import { CodecDetector } from './core/codec'
+import { ConnectionManager } from './core/connection'
+import { HttpClient } from './core/http'
+import { TrackManager } from './core/track'
 import { ErrorTypes, WebRTCError } from './errors'
 import { FlowCheck } from './utils/flow-check'
-import { SdpUtils } from './utils/sdp'
-import { WebRtcUtils } from './utils/webrtc'
-
-/**
- * Configuration interface for WebRTCWhep.
- */
-export interface Conf {
-  /** Absolute URL of the WHEP endpoint */
-  url: string
-  /** Media player container */
-  container: HTMLMediaElement
-  /** Username for authentication */
-  user?: string
-  /** Password for authentication */
-  pass?: string
-  /** Token for authentication */
-  token?: string
-  /** ice server list */
-  iceServers?: RTCIceServer[]
-  /** Called when there's an error */
-  onError?: (err: WebRTCError) => void
-}
-
-/** Extend RTCConfiguration to include experimental properties */
-declare global {
-  interface RTCConfiguration {
-    sdpSemantics?: 'plan-b' | 'unified-plan'
-  }
-
-  interface RTCIceServer {
-    credentialType?: 'password'
-  }
-}
 
 /** WebRTC/WHEP reader. */
 export default class WebRTCWhep {
   private retryPause: number = 2000
   private conf: Conf
-  private state: 'getting_codecs' | 'running' | 'restarting' | 'closed' | 'failed'
+  private state: State
   private restartTimeout?: NodeJS.Timeout
-  private pc?: RTCPeerConnection
-  private offerData?: ParsedOffer
   private sessionUrl?: string
   private queuedCandidates: RTCIceCandidate[] = []
   private nonAdvertisedCodecs: string[] = []
-  private observer: VisibilityObserver
-  private stream?: MediaStream
   private flowCheck: FlowCheck
+  private httpClient: HttpClient
+  private connectionManager: ConnectionManager
+  private trackManager: TrackManager
+  private codecDetector: CodecDetector
 
-  /**
-   * Create a WebRTCWhep.
-   * @param {Conf} conf - Configuration.
-   */
   constructor(conf: Conf) {
     this.conf = conf
     this.state = 'getting_codecs'
-    this.observer = new VisibilityObserver()
+
     this.flowCheck = new FlowCheck({
       interval: 5000,
       onError: (err: WebRTCError) => this.handleError(err),
     })
-    this.getNonAdvertisedCodecs()
+
+    this.httpClient = new HttpClient(
+      this.conf,
+      () => this.state,
+      err => this.handleError(err),
+    )
+
+    this.connectionManager = new ConnectionManager(
+      () => this.state,
+      {
+        onCandidate: candidate => this.handleCandidate(candidate),
+        onTrack: (evt) => {
+          this.trackManager.onTrack(evt)
+          this.flowCheck.start()
+        },
+        onError: err => this.handleError(err),
+      },
+      this.nonAdvertisedCodecs,
+    )
+
+    this.trackManager = new TrackManager(this.conf.container)
+
+    this.codecDetector = new CodecDetector(
+      () => this.state,
+      {
+        onCodecsDetected: codecs => this.handleCodecsDetected(codecs),
+        onError: err => this.handleError(err),
+      },
+    )
+
+    this.codecDetector.detect()
   }
 
-  /**
-   * 媒体是否正常
-   */
   get isRunning(): boolean {
     return this.state === 'running'
   }
 
-  /**
-   * Close the reader and all its resources.
-   */
   close(): void {
     this.state = 'closed'
-    this.pc?.close()
-
-    this.observer.stop()
+    this.connectionManager.close()
+    this.trackManager.stop()
     this.flowCheck.stop()
     if (this.restartTimeout) {
       clearTimeout(this.restartTimeout)
     }
   }
 
-  /**
-   * Handle errors.
-   */
   private handleError(err: Error | WebRTCError): void {
     this.flowCheck.stop()
 
@@ -100,10 +86,7 @@ export default class WebRTCWhep {
       this.state = 'failed'
     }
     else if (this.state === 'running') {
-      this.pc?.close()
-      this.pc = undefined
-
-      this.offerData = undefined
+      this.connectionManager.close()
       this.queuedCandidates = []
 
       if (this.sessionUrl) {
@@ -134,271 +117,59 @@ export default class WebRTCWhep {
     }
   }
 
-  /**
-   * Get non-advertised codecs.
-   */
-  private getNonAdvertisedCodecs(): void {
-    Promise.all(
-      [
-        ['pcma/8000/2'],
-        ['multiopus/48000/6', 'channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2'],
-        ['L16/48000/2'],
-      ].map(c => WebRtcUtils.supportsNonAdvertisedCodec(c[0], c[1]).then(r => (r ? c[0] : false))),
-    )
-      .then(c => c.filter(e => e !== false))
-      .then((codecs) => {
-        if (this.state !== 'getting_codecs') {
-          throw new WebRTCError(ErrorTypes.STATE_ERROR, 'closed')
-        }
-
-        this.nonAdvertisedCodecs = codecs as string[]
-        this.state = 'running'
-        this.start()
-      })
-      .catch(err => this.handleError(err))
+  private handleCodecsDetected(codecs: string[]): void {
+    this.nonAdvertisedCodecs = codecs
+    this.state = 'running'
+    this.start()
   }
 
-  /**
-   * Start the WebRTC session.
-   */
   private start(): void {
-    this.requestICEServers()
-      .then(iceServers => this.setupPeerConnection(iceServers))
-      .then(offer => this.sendOffer(offer))
-      .then(answer => this.setAnswer(answer))
+    this.httpClient.requestICEServers()
+      .then(iceServers => this.connectionManager.setupPeerConnection(iceServers))
+      .then(offer => this.httpClient.sendOffer(offer))
+      .then(({ sessionUrl, answer }) => this.handleOfferResponse(sessionUrl, answer))
       .catch(err => this.handleError(err))
   }
 
-  /**
-   * Generate an authorization header.
-   */
-  private authHeader(): Record<string, string> {
-    if (this.conf.user && this.conf.user !== '') {
-      const credentials = btoa(`${this.conf.user}:${this.conf.pass}`)
-      return { Authorization: `Basic ${credentials}` }
-    }
-    if (this.conf.token && this.conf.token !== '') {
-      return { Authorization: `Bearer ${this.conf.token}` }
-    }
-    return {}
-  }
-
-  /**
-   * Request ICE servers from the endpoint.
-   */
-  private async requestICEServers(): Promise<RTCIceServer[]> {
-    if (this.conf.iceServers && this.conf.iceServers.length > 0) {
-      return this.conf.iceServers
-    }
-
-    return fetch(this.conf.url, {
-      method: 'OPTIONS',
-      headers: {
-        ...this.authHeader(),
-      },
-    }).then(res => WebRtcUtils.linkToIceServers(res.headers.get('Link')))
-  }
-
-  /**
-   * Setup a peer connection.
-   */
-  private async setupPeerConnection(iceServers: RTCIceServer[]): Promise<string> {
-    if (this.state !== 'running') {
-      throw new WebRTCError(ErrorTypes.STATE_ERROR, 'closed')
-    }
-
-    const pc = new RTCPeerConnection({
-      iceServers,
-      // https://webrtc.org/getting-started/unified-plan-transition-guide
-      sdpSemantics: 'unified-plan',
-    })
-    this.pc = pc
-    this.flowCheck.setPeerConnection(pc)
-
-    const direction: RTCRtpTransceiverDirection = 'recvonly'
-    pc.addTransceiver('video', { direction })
-    pc.addTransceiver('audio', { direction })
+  private handleOfferResponse(sessionUrl: string | undefined, answer: string): Promise<void> {
+    if (sessionUrl)
+      this.sessionUrl = sessionUrl
 
-    pc.onicecandidate = (evt: RTCPeerConnectionIceEvent) => this.onLocalCandidate(evt)
-    pc.onconnectionstatechange = () => this.onConnectionState()
-    pc.ontrack = (evt: RTCTrackEvent) => this.onTrack(evt)
-
-    return pc.createOffer().then((offer) => {
-      if (!offer.sdp) {
-        throw new WebRTCError(ErrorTypes.SIGNAL_ERROR, 'Failed to create offer SDP')
-      }
-
-      offer.sdp = SdpUtils.editOffer(offer.sdp, this.nonAdvertisedCodecs)
-      this.offerData = SdpUtils.parseOffer(offer.sdp)
-
-      return pc.setLocalDescription(offer).then(() => offer.sdp!)
-    })
-  }
-
-  /**
-   * Send an offer to the endpoint.
-   */
-  private sendOffer(offer: string): Promise<string> {
-    if (this.state !== 'running') {
-      throw new WebRTCError(ErrorTypes.STATE_ERROR, 'closed')
-    }
-
-    return fetch(this.conf.url, {
-      method: 'POST',
-      headers: {
-        ...this.authHeader(),
-        'Content-Type': 'application/sdp',
-      },
-      body: offer,
-    }).then((res) => {
-      switch (res.status) {
-        case 201:
-          break
-        case 404:
-          throw new WebRTCError(ErrorTypes.NETWORK_ERROR, 'stream not found')
-        case 406:
-          throw new WebRTCError(ErrorTypes.NETWORK_ERROR, 'stream not supported')
-        case 400:
-          return res.json().then((e: { error: string }) => {
-            throw new WebRTCError(ErrorTypes.NETWORK_ERROR, e.error)
-          })
-        default:
-          throw new WebRTCError(ErrorTypes.NETWORK_ERROR, `bad status code ${res.status}`)
-      }
-
-      const location = res.headers.get('Location')
-      if (location) {
-        this.sessionUrl = new URL(location, this.conf.url).toString()
-      }
-
-      return res.text()
-    })
-  }
-
-  /**
-   * Set a remote answer.
-   */
-  private setAnswer(answer: string): Promise<void> {
-    if (this.state !== 'running') {
-      throw new WebRTCError(ErrorTypes.STATE_ERROR, 'closed')
-    }
-
-    return this.pc!.setRemoteDescription(
-      new RTCSessionDescription({
-        type: 'answer',
-        sdp: answer,
-      }),
-    ).then(() => {
-      if (this.state !== 'running') {
+    return this.connectionManager.setAnswer(answer).then(() => {
+      if (this.state !== 'running')
         return
-      }
 
       if (this.queuedCandidates.length !== 0) {
-        this.sendLocalCandidates(this.queuedCandidates)
-        this.queuedCandidates = []
+        const offerData = this.connectionManager.getOfferData()
+        if (offerData && this.sessionUrl) {
+          this.httpClient.sendLocalCandidates(this.sessionUrl, offerData, this.queuedCandidates)
+          this.queuedCandidates = []
+        }
       }
     })
   }
 
-  /**
-   * Handle local ICE candidates.
-   */
-  private onLocalCandidate(evt: RTCPeerConnectionIceEvent): void {
-    if (this.state !== 'running') {
-      return
-    }
-
-    if (evt.candidate) {
-      if (this.sessionUrl) {
-        this.sendLocalCandidates([evt.candidate])
+  private handleCandidate(candidate: RTCIceCandidate): void {
+    if (this.sessionUrl) {
+      const offerData = this.connectionManager.getOfferData()
+      if (offerData) {
+        this.httpClient.sendLocalCandidates(this.sessionUrl, offerData, [candidate])
       }
-      else {
-        this.queuedCandidates.push(evt.candidate)
-      }
-    }
-  }
-
-  /**
-   * Send local ICE candidates to the endpoint.
-   */
-  private sendLocalCandidates(candidates: RTCIceCandidate[]): void {
-    if (!this.sessionUrl || !this.offerData) {
-      return
-    }
-
-    fetch(this.sessionUrl, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/trickle-ice-sdpfrag',
-        'If-Match': '*',
-      },
-      body: SdpUtils.generateSdpFragment(this.offerData, candidates),
-    })
-      .then((res) => {
-        switch (res.status) {
-          case 204:
-            break
-          case 404:
-            throw new WebRTCError(ErrorTypes.NETWORK_ERROR, 'stream not found')
-          default:
-            throw new WebRTCError(ErrorTypes.NETWORK_ERROR, `bad status code ${res.status}`)
-        }
-      })
-      .catch(err => this.handleError(err))
-  }
-
-  /**
-   * Handle peer connection state changes.
-   */
-  private onConnectionState(): void {
-    if (this.state !== 'running' || !this.pc) {
-      return
     }
-
-    // "closed" can arrive before "failed" and without
-    // the close() method being called at all.
-    // It happens when the other peer sends a termination
-    // message like a DTLS CloseNotify.
-    if (this.pc.connectionState === 'failed' || this.pc.connectionState === 'closed') {
-      this.handleError(new WebRTCError(ErrorTypes.OTHER_ERROR, 'peer connection closed'))
-    }
-    else if (this.pc.connectionState === 'connected') {
-      this.flowCheck.start()
+    else {
+      this.queuedCandidates.push(candidate)
     }
   }
 
-  /**
-   * Handle incoming tracks.
-   */
-  private onTrack(evt: RTCTrackEvent): void {
-    this.stream = evt.streams[0]
-    this.observer.start(this.conf.container, (isIntersecting) => {
-      if (isIntersecting)
-        this.resume()
-      else
-        this.pause()
-    })
-  }
-
-  /**
-   * 流是否为空
-   */
-  get paused() {
-    return this.conf.container.srcObject === null
+  get paused(): boolean {
+    return this.trackManager.paused
   }
 
-  /**
-   * 暂停播放
-   */
-  pause() {
-    this.conf.container.srcObject = null
+  pause(): void {
+    this.trackManager.pause()
   }
 
-  /**
-   * 恢复播放
-   */
-  resume() {
-    if (this.stream && this.paused)
-      this.conf.container.srcObject = this.stream
+  resume(): void {
+    this.trackManager.resume()
   }
 }

package/QWEN.md

@@ -1,118 +0,0 @@
-# QWEN.md - WhepTS Player 项目上下文
-
-## 项目概述
-
-**WhepTS Player** 是一个基于 [mediamtx](https://github.com/bluenviron/mediamtx) 的 WebRTC WHEP (WebRTC HTTP Egress Protocol) 播放器，支持 ZLMediaKit 和 Mediamtx 的播放地址。该项目使用 TypeScript 编写，提供低延迟的实时音视频流播放功能。
-
-### 核心功能
-
-- 支持 ZLMediaKit 和 Mediamtx 的 WHEP 播放地址
-- 基于 WebRTC 的低延迟播放
-- 类型安全的 TypeScript 实现
-- 事件监听和错误处理机制
-- 可配置的连接参数
-- 自动断流检测与重连功能
-- 支持多种音视频编解码器
-- 支持仅可视区域播放控制（通过 `VisibilityObserver`）
-- 在 Chrome 上根据硬件支持 G711 和 H265 编解码器
-
-## 技术栈与依赖
-
-- **语言**: TypeScript
-- **构建工具**: Rollup
-- **包管理器**: pnpm
-- **代码规范**: ESLint (使用 @antfu/eslint-config)
-- **核心 API**: WebRTC API
-- **开发依赖**:
-  - `@antfu/eslint-config`
-  - `@rollup/plugin-commonjs`
-  - `@rollup/plugin-eslint`
-  - `@rollup/plugin-terser`
-  - `@rollup/plugin-typescript`
-  - `@types/node`
-  - `rollup`
-  - `rollup-plugin-delete`
-  - `tslib`
-  - `typescript`
-
-## 项目结构
-
-```
-src/
-├── index.ts          # 主要的 WebRTCWhep 类实现
-└── utils/
-    └── observer.ts   # 可见性监测工具
-```
-
-## 主要代码文件
-
-### `src/index.ts`
-
-这是项目的核心文件，实现了 `WebRTCWhep` 类，负责处理 WebRTC 连接、WHEP 协议交互、媒体流处理等主要功能。关键特性包括：
-
-- **配置接口**: `Conf` 接口定义了播放器的配置选项，包括 WHEP 服务器地址、媒体容器、认证信息、ICE 服务器配置等。
-- **错误处理**: 定义了 `WebRTCError` 类和 `ErrorTypes` 常量，用于处理不同类型的错误（信令、状态、网络、媒体等）。
-- **连接管理**: 实现了与 WHEP 服务器的连接、发送 offer、接收 answer、处理 ICE 候选等流程。
-- **编解码器支持**: 包含了对非标准编解码器（如 PCMA/PCMU、multiopus、L16 等）的支持逻辑。
-- **断流检测**: 通过 `getStats()` 监控接收字节数，实现断流检测和自动重连。
-- **可见性控制**: 与 `VisibilityObserver` 集成，实现仅在元素可见时播放的功能。
-
-### `src/utils/observer.ts`
-
-实现了 `VisibilityObserver` 类，使用 `IntersectionObserver` API 来监测媒体元素的可见性，以便在元素进入或离开视口时暂停或恢复播放。
-
-## 构建与开发
-
-### 构建命令
-
-- `npm run build` - 生产环境构建（压缩代码）
-- `npm run build:debug` - 开发环境构建（保留源映射）
-
-### 开发命令
-
-- `npm run dev` - 开发模式（如果 package.json 中有定义）
-- `npm run lint` - 代码检查
-- `npm run lint:fix` - 自动修复代码问题
-
-### 构建配置
-
-- **Rollup**: 使用 `rollup.config.ts` 进行构建配置，输出格式为 ES 模块，目标文件为 `dist/index.js`。
-- **TypeScript**: 使用 `tsconfig.json` 进行编译配置，目标为 ES2020，启用严格模式和类型检查。
-- **ESLint**: 使用 `eslint.config.ts` 进行代码规范检查，基于 @antfu/eslint-config。
-
-## API 使用
-
-### WebRTCWhep 类
-
-#### 构造函数
-
-```typescript
-WebRTCWhep(conf: Conf)
-```
-
-- `conf`: 配置对象，包含 `url`、`container`、`user`、`pass`、`token`、`iceServers`、`onError` 等属性。
-
-#### 属性
-
-- `isRunning`: 检查流是否正在运行
-- `paused`: 检查播放器是否已暂停
-
-#### 方法
-
-- `close()`: 关闭播放器和所有资源
-- `pause()`: 暂停播放
-- `resume()`: 恢复播放
-
-## 开发约定
-
-- 代码使用 TypeScript 编写，遵循严格的类型检查。
-- 使用 ESLint 进行代码风格和质量检查。
-- 使用 Rollup 进行模块打包。
-- 代码结构清晰，核心逻辑集中在 `src/index.ts`，工具类在 `src/utils/` 目录下。
-- 错误处理采用自定义的 `WebRTCError` 类，便于区分不同类型的错误。
-- 支持自动断流检测和重连，提高播放稳定性。
-- 支持可见性控制，优化资源使用。
-
-## 许可证
-
-MIT

package/dist/utils/observer.d.ts

@@ -1,8 +0,0 @@
-/**
- * 可见性监测（确保回调执行完成后再处理后续，不丢弃任务）
- */
-export default class VisibilityObserver {
-    private observer?;
-    start(element: HTMLElement, callback: (isIntersecting: boolean) => void): void;
-    stop(): void;
-}