whepts 1.0.1 → 1.0.3

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/utils/flow-check.ts

@@ -0,0 +1,73 @@
+import { ErrorTypes, WebRTCError } from '~/errors'
+
+export interface FlowCheckParams {
+  interval: number
+  onError: (err: WebRTCError) => void
+}
+
+/**
+ * Flow checking logic (断流检测)
+ */
+export class FlowCheck {
+  private checkInterval: number
+  private lastBytesReceived: number = 0
+  private checkTimer?: NodeJS.Timeout
+  private pc?: RTCPeerConnection
+  private onError: (err: WebRTCError) => void
+
+  constructor(params: FlowCheckParams) {
+    this.checkInterval = params.interval
+    this.onError = params.onError
+  }
+
+  setPeerConnection(pc: RTCPeerConnection) {
+    this.pc = pc
+  }
+
+  /**
+   * 启动断流检测
+   */
+  start(): void {
+    this.stop()
+    this.checkTimer = setInterval(() => this.checkFlowState(), this.checkInterval)
+  }
+
+  /**
+   * 停止断流检测
+   */
+  stop(): void {
+    if (this.checkTimer) {
+      clearInterval(this.checkTimer)
+      this.checkTimer = undefined
+    }
+  }
+
+  /**
+   * 检测流状态（通过接收字节数判断是否断流）
+   */
+  private async checkFlowState(): Promise<void> {
+    if (!this.pc) {
+      return
+    }
+
+    const stats = await this.pc.getStats()
+    let currentBytes = 0
+
+    // 遍历统计信息，获取视频接收字节数
+    stats.forEach((stat: RTCStats) => {
+      const inboundRtpStat = stat as RTCInboundRtpStreamStats
+      if (stat.type === 'inbound-rtp' && inboundRtpStat.kind === 'video') {
+        currentBytes = inboundRtpStat.bytesReceived || 0
+      }
+    })
+
+    // 断流判定：连接正常但字节数无变化
+    if (currentBytes === this.lastBytesReceived && this.pc.connectionState === 'connected') {
+      this.onError(new WebRTCError(ErrorTypes.NETWORK_ERROR, 'data stream interruption'))
+      return
+    }
+
+    // 更新上一次字节数
+    this.lastBytesReceived = currentBytes
+  }
+}

package/src/utils/sdp.ts

@@ -0,0 +1,253 @@
+/** Type for parsed offer data */
+export interface ParsedOffer {
+  iceUfrag: string
+  icePwd: string
+  medias: string[]
+}
+
+/**
+ * SDP processing utilities
+ */
+export class SdpUtils {
+  /**
+   * Parse an offer SDP into iceUfrag, icePwd, and medias.
+   */
+  static parseOffer(sdp: string): ParsedOffer {
+    const ret: ParsedOffer = {
+      iceUfrag: '',
+      icePwd: '',
+      medias: [],
+    }
+
+    for (const line of sdp.split('\r\n')) {
+      if (line.startsWith('m=')) {
+        ret.medias.push(line.slice('m='.length))
+      }
+      else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
+        ret.iceUfrag = line.slice('a=ice-ufrag:'.length)
+      }
+      else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
+        ret.icePwd = line.slice('a=ice-pwd:'.length)
+      }
+    }
+
+    return ret
+  }
+
+  /**
+   * Reserve a payload type.
+   */
+  static reservePayloadType(payloadTypes: string[]): string {
+    // everything is valid between 30 and 127, except for interval between 64 and 95
+    // https://chromium.googlesource.com/external/webrtc/+/refs/heads/master/call/payload_type.h#29
+    for (let i = 30; i <= 127; i++) {
+      if ((i <= 63 || i >= 96) && !payloadTypes.includes(i.toString())) {
+        const pl = i.toString()
+        payloadTypes.push(pl)
+        return pl
+      }
+    }
+    throw new Error('unable to find a free payload type')
+  }
+
+  /**
+   * Enable stereo PCMA/PCMU codecs.
+   */
+  static enableStereoPcmau(payloadTypes: string[], section: string): string {
+    const lines = section.split('\r\n')
+
+    let payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMU/8000/2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} PCMA/8000/2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    return lines.join('\r\n')
+  }
+
+  /**
+   * Enable multichannel Opus codec.
+   */
+  static enableMultichannelOpus(payloadTypes: string[], section: string): string {
+    const lines = section.split('\r\n')
+
+    let payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/3`)
+    lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,2,1;num_streams=2;coupled_streams=1`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/4`)
+    lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/5`)
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2`,
+    )
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/6`)
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2`,
+    )
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/7`)
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4`,
+    )
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} multiopus/48000/8`)
+    lines.splice(
+      lines.length - 1,
+      0,
+      `a=fmtp:${payloadType} channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4`,
+    )
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    return lines.join('\r\n')
+  }
+
+  /**
+   * Enable L16 codec.
+   */
+  static enableL16(payloadTypes: string[], section: string): string {
+    const lines = section.split('\r\n')
+
+    let payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/8000/2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/16000/2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    payloadType = SdpUtils.reservePayloadType(payloadTypes)
+    lines[0] += ` ${payloadType}`
+    lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} L16/48000/2`)
+    lines.splice(lines.length - 1, 0, `a=rtcp-fb:${payloadType} transport-cc`)
+
+    return lines.join('\r\n')
+  }
+
+  /**
+   * Enable stereo Opus codec.
+   */
+  static enableStereoOpus(section: string): string {
+    let opusPayloadFormat = ''
+    const lines = section.split('\r\n')
+
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {
+        opusPayloadFormat = lines[i].slice('a=rtpmap:'.length).split(' ')[0]
+        break
+      }
+    }
+
+    if (opusPayloadFormat === '') {
+      return section
+    }
+
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].startsWith(`a=fmtp:${opusPayloadFormat} `)) {
+        if (!lines[i].includes('stereo')) {
+          lines[i] += ';stereo=1'
+        }
+        if (!lines[i].includes('sprop-stereo')) {
+          lines[i] += ';sprop-stereo=1'
+        }
+      }
+    }
+
+    return lines.join('\r\n')
+  }
+
+  /**
+   * Edit an offer SDP to enable non-advertised codecs.
+   */
+  static editOffer(sdp: string, nonAdvertisedCodecs: string[]): string {
+    const sections = sdp.split('m=')
+
+    const payloadTypes = sections
+      .slice(1)
+      .map(s => s.split('\r\n')[0].split(' ').slice(3))
+      .reduce((prev, cur) => [...prev, ...cur], [])
+
+    for (let i = 1; i < sections.length; i++) {
+      if (sections[i].startsWith('audio')) {
+        sections[i] = SdpUtils.enableStereoOpus(sections[i])
+
+        if (nonAdvertisedCodecs.includes('pcma/8000/2')) {
+          sections[i] = SdpUtils.enableStereoPcmau(payloadTypes, sections[i])
+        }
+        if (nonAdvertisedCodecs.includes('multiopus/48000/6')) {
+          sections[i] = SdpUtils.enableMultichannelOpus(payloadTypes, sections[i])
+        }
+        if (nonAdvertisedCodecs.includes('L16/48000/2')) {
+          sections[i] = SdpUtils.enableL16(payloadTypes, sections[i])
+        }
+
+        break
+      }
+    }
+
+    return sections.join('m=')
+  }
+
+  /**
+   * Generate an SDP fragment.
+   */
+  static generateSdpFragment(od: ParsedOffer, candidates: RTCIceCandidate[]): string {
+    const candidatesByMedia: Record<number, RTCIceCandidate[]> = {}
+    for (const candidate of candidates) {
+      const mid = candidate.sdpMLineIndex
+      if (mid) {
+        if (candidatesByMedia[mid] === undefined) {
+          candidatesByMedia[mid] = []
+        }
+        candidatesByMedia[mid].push(candidate)
+      }
+    }
+
+    let frag = `a=ice-ufrag:${od.iceUfrag}\r\n` + `a=ice-pwd:${od.icePwd}\r\n`
+
+    let mid = 0
+
+    for (const media of od.medias) {
+      if (candidatesByMedia[mid] !== undefined) {
+        frag += `m=${media}\r\n` + `a=mid:${mid}\r\n`
+
+        for (const candidate of candidatesByMedia[mid]) {
+          frag += `a=${candidate.candidate}\r\n`
+        }
+      }
+      mid++
+    }
+
+    return frag
+  }
+}

package/src/utils/webrtc.ts

@@ -0,0 +1,123 @@
+import { ErrorTypes, WebRTCError } from '~/errors'
+
+/**
+ * WebRTC utilities
+ */
+export class WebRtcUtils {
+  /**
+   * Check if the browser supports a non-advertised codec.
+   */
+  static async supportsNonAdvertisedCodec(codec: string, fmtp?: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      const pc = new RTCPeerConnection({ iceServers: [] })
+      const mediaType = 'audio'
+      let payloadType = ''
+
+      pc.addTransceiver(mediaType, { direction: 'recvonly' })
+      pc.createOffer()
+        .then((offer) => {
+          if (!offer.sdp) {
+            throw new Error('SDP not present')
+          }
+          if (offer.sdp.includes(` ${codec}`)) {
+            // codec is advertised, there's no need to add it manually
+            throw new Error('already present')
+          }
+
+          const sections = offer.sdp.split(`m=${mediaType}`)
+
+          const payloadTypes = sections
+            .slice(1)
+            .map(s => s.split('\r\n')[0].split(' ').slice(3))
+            .reduce((prev, cur) => [...prev, ...cur], [])
+          payloadType = WebRtcUtils.reservePayloadType(payloadTypes)
+
+          const lines = sections[1].split('\r\n')
+          lines[0] += ` ${payloadType}`
+          lines.splice(lines.length - 1, 0, `a=rtpmap:${payloadType} ${codec}`)
+          if (fmtp !== undefined) {
+            lines.splice(lines.length - 1, 0, `a=fmtp:${payloadType} ${fmtp}`)
+          }
+          sections[1] = lines.join('\r\n')
+          offer.sdp = sections.join(`m=${mediaType}`)
+          return pc.setLocalDescription(offer)
+        })
+        .then(() =>
+          pc.setRemoteDescription(
+            new RTCSessionDescription({
+              type: 'answer',
+              sdp:
+                `v=0\r\n`
+                + `o=- 6539324223450680508 0 IN IP4 0.0.0.0\r\n`
+                + `s=-\r\n`
+                + `t=0 0\r\n`
+                + `a=fingerprint:sha-256 0D:9F:78:15:42:B5:4B:E6:E2:94:3E:5B:37:78:E1:4B:54:59:A3:36:3A:E5:05:EB:27:EE:8F:D2:2D:41:29:25\r\n`
+                + `m=${mediaType} 9 UDP/TLS/RTP/SAVPF ${payloadType}\r\n`
+                + `c=IN IP4 0.0.0.0\r\n`
+                + `a=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\n`
+                + `a=ice-ufrag:29e036dc\r\n`
+                + `a=sendonly\r\n`
+                + `a=rtcp-mux\r\n`
+                + `a=rtpmap:${payloadType} ${codec}\r\n${fmtp !== undefined ? `a=fmtp:${payloadType} ${fmtp}\r\n` : ''}`,
+            }),
+          ),
+        )
+        .then(() => resolve(true))
+        .catch(() => resolve(false))
+        .finally(() => pc.close())
+    })
+  }
+
+  /**
+   * Unquote a credential string.
+   */
+  static unquoteCredential(v: string): string {
+    return JSON.parse(`"${v}"`)
+  }
+
+  /**
+   * Convert Link header to iceServers array.
+   */
+  static linkToIceServers(links: string | null): RTCIceServer[] {
+    if (links) {
+      return links.split(', ').map((link) => {
+        const m = link.match(
+          /^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i,
+        )
+
+        if (!m) {
+          throw new WebRTCError(ErrorTypes.SIGNAL_ERROR, 'Invalid ICE server link format')
+        }
+
+        const ret: RTCIceServer = {
+          urls: [m[1]],
+        }
+
+        if (m[3]) {
+          ret.username = WebRtcUtils.unquoteCredential(m[3])
+          ret.credential = WebRtcUtils.unquoteCredential(m[4])
+          ret.credentialType = 'password'
+        }
+
+        return ret
+      })
+    }
+    return []
+  }
+
+  /**
+   * Reserve a payload type.
+   */
+  static reservePayloadType(payloadTypes: string[]): string {
+    // everything is valid between 30 and 127, except for interval between 64 and 95
+    // https://chromium.googlesource.com/external/webrtc/+/refs/heads/master/call/payload_type.h#29
+    for (let i = 30; i <= 127; i++) {
+      if ((i <= 63 || i >= 96) && !payloadTypes.includes(i.toString())) {
+        const pl = i.toString()
+        payloadTypes.push(pl)
+        return pl
+      }
+    }
+    throw new Error('unable to find a free payload type')
+  }
+}

package/src/whep.ts

@@ -0,0 +1,175 @@
+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'
+
+/** WebRTC/WHEP reader. */
+export default class WebRTCWhep {
+  private retryPause: number = 2000
+  private conf: Conf
+  private state: State
+  private restartTimeout?: NodeJS.Timeout
+  private sessionUrl?: string
+  private queuedCandidates: RTCIceCandidate[] = []
+  private nonAdvertisedCodecs: string[] = []
+  private flowCheck: FlowCheck
+  private httpClient: HttpClient
+  private connectionManager: ConnectionManager
+  private trackManager: TrackManager
+  private codecDetector: CodecDetector
+
+  constructor(conf: Conf) {
+    this.conf = conf
+    this.state = 'getting_codecs'
+
+    this.flowCheck = new FlowCheck({
+      interval: 5000,
+      onError: (err: WebRTCError) => this.handleError(err),
+    })
+
+    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(): void {
+    this.state = 'closed'
+    this.connectionManager.close()
+    this.trackManager.stop()
+    this.flowCheck.stop()
+    if (this.restartTimeout) {
+      clearTimeout(this.restartTimeout)
+    }
+  }
+
+  private handleError(err: Error | WebRTCError): void {
+    this.flowCheck.stop()
+
+    if (this.state === 'getting_codecs') {
+      this.state = 'failed'
+    }
+    else if (err instanceof WebRTCError && err.type === ErrorTypes.SIGNAL_ERROR) {
+      this.state = 'failed'
+    }
+    else if (this.state === 'running') {
+      this.connectionManager.close()
+      this.queuedCandidates = []
+
+      if (this.sessionUrl) {
+        fetch(this.sessionUrl, {
+          method: 'DELETE',
+        })
+        this.sessionUrl = undefined
+      }
+
+      this.state = 'restarting'
+
+      this.restartTimeout = setTimeout(() => {
+        this.restartTimeout = undefined
+        this.state = 'running'
+        this.start()
+      }, this.retryPause)
+
+      err.message = `${err.message}, retrying in some seconds`
+    }
+
+    if (this.conf.onError) {
+      if (err instanceof WebRTCError) {
+        this.conf.onError(err)
+      }
+      else {
+        this.conf.onError(new WebRTCError(ErrorTypes.OTHER_ERROR, err.message))
+      }
+    }
+  }
+
+  private handleCodecsDetected(codecs: string[]): void {
+    this.nonAdvertisedCodecs = codecs
+    this.state = 'running'
+    this.start()
+  }
+
+  private start(): void {
+    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))
+  }
+
+  private handleOfferResponse(sessionUrl: string | undefined, answer: string): Promise<void> {
+    if (sessionUrl)
+      this.sessionUrl = sessionUrl
+
+    return this.connectionManager.setAnswer(answer).then(() => {
+      if (this.state !== 'running')
+        return
+
+      if (this.queuedCandidates.length !== 0) {
+        const offerData = this.connectionManager.getOfferData()
+        if (offerData && this.sessionUrl) {
+          this.httpClient.sendLocalCandidates(this.sessionUrl, offerData, this.queuedCandidates)
+          this.queuedCandidates = []
+        }
+      }
+    })
+  }
+
+  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(candidate)
+    }
+  }
+
+  get paused(): boolean {
+    return this.trackManager.paused
+  }
+
+  pause(): void {
+    this.trackManager.pause()
+  }
+
+  resume(): void {
+    this.trackManager.resume()
+  }
+}

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;
-}

package/src/utils/observer.ts

@@ -1,28 +0,0 @@
-/**
- * 可见性监测（确保回调执行完成后再处理后续，不丢弃任务）
- */
-export default class VisibilityObserver {
-  private observer?: IntersectionObserver
-
-  start(element: HTMLElement, callback: (isIntersecting: boolean) => void) {
-    if (!element)
-      return
-
-    // 先停止之前的任务
-    this.stop()
-
-    this.observer = new IntersectionObserver(
-      ([entry]) => callback(entry.isIntersecting),
-      { threshold: 0.5 },
-    )
-
-    this.observer.observe(element)
-  }
-
-  stop() {
-    if (this.observer) {
-      this.observer.disconnect()
-      this.observer = undefined
-    }
-  }
-}