whepts 1.0.0 → 1.0.2

package/QWEN.md

@@ -0,0 +1,118 @@
+# 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/README.md

@@ -24,13 +24,13 @@ WebRTC WHEP (WebRTC HTTP Egress Protocol) 是一种用于从 WebRTC 服务器获
 ## 安装
 
 ```bash
-npm install
+npm i whepts
 ```
 
 或
 
 ```bash
-pnpm install
+pnpm add whepts
 ```
 
 ## 使用方法

package/dist/errors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 错误类型
+ */
+export type ErrorType = string;
+/**
+ * 错误类型常量
+ */
+export declare const ErrorTypes: {
+    SIGNAL_ERROR: string;
+    STATE_ERROR: string;
+    NETWORK_ERROR: string;
+    MEDIA_ERROR: string;
+    OTHER_ERROR: string;
+};
+/**
+ * 错误
+ */
+export declare class WebRTCError extends Error {
+    type: ErrorType;
+    constructor(type: ErrorType, message: string, options?: ErrorOptions);
+}

package/dist/index.d.ts

@@ -1,196 +1,4 @@
-/**
- * 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';
-    }
-}
-/**
- * 错误类型
- */
-export type ErrorType = string;
-/**
- * 错误类型常量
- */
-export declare const ErrorTypes: {
-    SIGNAL_ERROR: string;
-    STATE_ERROR: string;
-    NETWORK_ERROR: string;
-    MEDIA_ERROR: string;
-    OTHER_ERROR: string;
-};
-/**
- * 错误
- */
-export declare class WebRTCError extends Error {
-    type: ErrorType;
-    constructor(type: ErrorType, message: string, options?: ErrorOptions);
-}
-/** WebRTC/WHEP reader. */
-export default class WebRTCWhep {
-    private retryPause;
-    private conf;
-    private state;
-    private restartTimeout?;
-    private pc?;
-    private offerData?;
-    private sessionUrl?;
-    private queuedCandidates;
-    private nonAdvertisedCodecs;
-    private container;
-    private observer;
-    private stream?;
-    /**
-     * 断连重试参数
-     */
-    private checkInterval;
-    private lastBytesReceived;
-    private checkTimer?;
-    /**
-     * Create a WebRTCWhep.
-     * @param {Conf} conf - Configuration.
-     */
-    constructor(conf: Conf);
-    /**
-     * 媒体是否正常
-     */
-    get isRunning(): boolean;
-    /**
-     * Close the reader and all its resources.
-     */
-    close(): void;
-    /**
-     * Check if the browser supports a non-advertised codec.
-     */
-    private static supportsNonAdvertisedCodec;
-    /**
-     * Unquote a credential string.
-     */
-    private static unquoteCredential;
-    /**
-     * Convert Link header to iceServers array.
-     */
-    private static linkToIceServers;
-    /**
-     * Parse an offer SDP into iceUfrag, icePwd, and medias.
-     */
-    private static parseOffer;
-    /**
-     * Reserve a payload type.
-     */
-    private static reservePayloadType;
-    /**
-     * Enable stereo PCMA/PCMU codecs.
-     */
-    private static enableStereoPcmau;
-    /**
-     * Enable multichannel Opus codec.
-     */
-    private static enableMultichannelOpus;
-    /**
-     * Enable L16 codec.
-     */
-    private static enableL16;
-    /**
-     * Enable stereo Opus codec.
-     */
-    private static enableStereoOpus;
-    /**
-     * Edit an offer SDP to enable non-advertised codecs.
-     */
-    private static editOffer;
-    /**
-     * Generate an SDP fragment.
-     */
-    private static generateSdpFragment;
-    /**
-     * Handle errors.
-     */
-    private handleError;
-    /**
-     * Get non-advertised codecs.
-     */
-    private getNonAdvertisedCodecs;
-    /**
-     * Start the WebRTC session.
-     */
-    private start;
-    /**
-     * Generate an authorization header.
-     */
-    private authHeader;
-    /**
-     * Request ICE servers from the endpoint.
-     */
-    private requestICEServers;
-    /**
-     * Setup a peer connection.
-     */
-    private setupPeerConnection;
-    /**
-     * Send an offer to the endpoint.
-     */
-    private sendOffer;
-    /**
-     * Set a remote answer.
-     */
-    private setAnswer;
-    /**
-     * Handle local ICE candidates.
-     */
-    private onLocalCandidate;
-    /**
-     * Send local ICE candidates to the endpoint.
-     */
-    private sendLocalCandidates;
-    /**
-     * Handle peer connection state changes.
-     */
-    private onConnectionState;
-    /**
-     * 启动断流检测
-     */
-    private startFlowCheck;
-    /**
-     * 停止断流检测
-     */
-    private stopFlowCheck;
-    private checkFlowState;
-    /**
-     * Handle incoming tracks.
-     */
-    private onTrack;
-    /**
-     * 流是否为空
-     */
-    get paused(): boolean;
-    /**
-     * 暂停播放
-     */
-    pause(): void;
-    /**
-     * 恢复播放
-     */
-    resume(): void;
-}
+import { ErrorTypes, WebRTCError } from './errors';
+import WebRTCWhep, { Conf } from './whep';
+export { Conf, ErrorTypes, WebRTCError };
+export default WebRTCWhep;

package/dist/index.js

@@ -1 +1 @@
-class e{start(e,t){e&&(this.stop(),this.observer=new IntersectionObserver(([e])=>t(e.isIntersecting),{threshold:.5}),this.observer.observe(e))}stop(){this.observer&&(this.observer.disconnect(),this.observer=void 0)}}const t={SIGNAL_ERROR:"SignalError",STATE_ERROR:"StateError",NETWORK_ERROR:"NetworkError",MEDIA_ERROR:"MediaError",OTHER_ERROR:"OtherError"};class s extends Error{constructor(e,t,s){super(t,s),this.type=e}}class r{constructor(t){this.retryPause=2e3,this.queuedCandidates=[],this.nonAdvertisedCodecs=[],this.checkInterval=5e3,this.lastBytesReceived=0,this.conf=t,this.state="getting_codecs",this.container=t.container,this.observer=new e,this.getNonAdvertisedCodecs()}get isRunning(){return"running"===this.state}close(){this.state="closed",this.pc?.close(),this.observer.stop(),this.stopFlowCheck(),this.restartTimeout&&clearTimeout(this.restartTimeout)}static async supportsNonAdvertisedCodec(e,n){return new Promise(i=>{const a=new RTCPeerConnection({iceServers:[]}),c="audio";let o="";a.addTransceiver(c,{direction:"recvonly"}),a.createOffer().then(i=>{if(!i.sdp)throw new s(t.SIGNAL_ERROR,"SDP not present");if(i.sdp.includes(` ${e}`))throw new s(t.SIGNAL_ERROR,"already present");const h=i.sdp.split(`m=${c}`),p=h.slice(1).map(e=>e.split("\r\n")[0].split(" ").slice(3)).reduce((e,t)=>[...e,...t],[]);o=r.reservePayloadType(p);const l=h[1].split("\r\n");return l[0]+=` ${o}`,l.splice(l.length-1,0,`a=rtpmap:${o} ${e}`),void 0!==n&&l.splice(l.length-1,0,`a=fmtp:${o} ${n}`),h[1]=l.join("\r\n"),i.sdp=h.join(`m=${c}`),a.setLocalDescription(i)}).then(()=>a.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:`v=0\r\no=- 6539324223450680508 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=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\nm=${c} 9 UDP/TLS/RTP/SAVPF ${o}\r\nc=IN IP4 0.0.0.0\r\na=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\na=ice-ufrag:29e036dc\r\na=sendonly\r\na=rtcp-mux\r\na=rtpmap:${o} ${e}\r\n${void 0!==n?`a=fmtp:${o} ${n}\r\n`:""}`}))).then(()=>i(!0)).catch(()=>i(!1)).finally(()=>a.close())})}static unquoteCredential(e){return JSON.parse(`"${e}"`)}static linkToIceServers(e){return e?e.split(", ").map(e=>{const n=e.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);if(!n)throw new s(t.SIGNAL_ERROR,"Invalid ICE server link format");const i={urls:[n[1]]};return n[3]&&(i.username=r.unquoteCredential(n[3]),i.credential=r.unquoteCredential(n[4]),i.credentialType="password"),i}):[]}static parseOffer(e){const t={iceUfrag:"",icePwd:"",medias:[]};for(const s of e.split("\r\n"))s.startsWith("m=")?t.medias.push(s.slice(2)):""===t.iceUfrag&&s.startsWith("a=ice-ufrag:")?t.iceUfrag=s.slice(12):""===t.icePwd&&s.startsWith("a=ice-pwd:")&&(t.icePwd=s.slice(10));return t}static reservePayloadType(e){for(let t=30;t<=127;t++)if((t<=63||t>=96)&&!e.includes(t.toString())){const s=t.toString();return e.push(s),s}throw new s(t.SIGNAL_ERROR,"unable to find a free payload type")}static enableStereoPcmau(e,t){const s=t.split("\r\n");let n=r.reservePayloadType(e);return s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} PCMU/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} PCMA/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),s.join("\r\n")}static enableMultichannelOpus(e,t){const s=t.split("\r\n");let n=r.reservePayloadType(e);return s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/3`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,2,1;num_streams=2;coupled_streams=1`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/4`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/5`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/6`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/7`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} multiopus/48000/8`),s.splice(s.length-1,0,`a=fmtp:${n} channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),s.join("\r\n")}static enableL16(e,t){const s=t.split("\r\n");let n=r.reservePayloadType(e);return s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} L16/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} L16/16000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),n=r.reservePayloadType(e),s[0]+=` ${n}`,s.splice(s.length-1,0,`a=rtpmap:${n} L16/48000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${n} transport-cc`),s.join("\r\n")}static enableStereoOpus(e){let t="";const s=e.split("\r\n");for(let e=0;e<s.length;e++)if(s[e].startsWith("a=rtpmap:")&&s[e].toLowerCase().includes("opus/")){t=s[e].slice(9).split(" ")[0];break}if(""===t)return e;for(let e=0;e<s.length;e++)s[e].startsWith(`a=fmtp:${t} `)&&(s[e].includes("stereo")||(s[e]+=";stereo=1"),s[e].includes("sprop-stereo")||(s[e]+=";sprop-stereo=1"));return s.join("\r\n")}static editOffer(e,t){const s=e.split("m="),n=s.slice(1).map(e=>e.split("\r\n")[0].split(" ").slice(3)).reduce((e,t)=>[...e,...t],[]);for(let e=1;e<s.length;e++)if(s[e].startsWith("audio")){s[e]=r.enableStereoOpus(s[e]),t.includes("pcma/8000/2")&&(s[e]=r.enableStereoPcmau(n,s[e])),t.includes("multiopus/48000/6")&&(s[e]=r.enableMultichannelOpus(n,s[e])),t.includes("L16/48000/2")&&(s[e]=r.enableL16(n,s[e]));break}return s.join("m=")}static generateSdpFragment(e,t){const s={};for(const e of t){const t=e.sdpMLineIndex;t&&(void 0===s[t]&&(s[t]=[]),s[t].push(e))}let r=`a=ice-ufrag:${e.iceUfrag}\r\na=ice-pwd:${e.icePwd}\r\n`,n=0;for(const t of e.medias){if(void 0!==s[n]){r+=`m=${t}\r\na=mid:${n}\r\n`;for(const e of s[n])r+=`a=${e.candidate}\r\n`}n++}return r}handleError(e){this.stopFlowCheck(),"getting_codecs"===this.state||e instanceof s&&e.type===t.SIGNAL_ERROR?this.state="failed":"running"===this.state&&(this.pc?.close(),this.pc=void 0,this.offerData=void 0,this.queuedCandidates=[],this.sessionUrl&&(fetch(this.sessionUrl,{method:"DELETE"}),this.sessionUrl=void 0),this.state="restarting",this.restartTimeout=setTimeout(()=>{this.restartTimeout=void 0,this.state="running",this.start()},this.retryPause),e.message=`${e.message}, retrying in some seconds`),this.conf.onError&&(e instanceof s?this.conf.onError(e):this.conf.onError(new s(t.OTHER_ERROR,e.message)))}getNonAdvertisedCodecs(){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(e=>r.supportsNonAdvertisedCodec(e[0],e[1]).then(t=>!!t&&e[0]))).then(e=>e.filter(e=>!1!==e)).then(e=>{if("getting_codecs"!==this.state)throw new s(t.STATE_ERROR,"closed");this.nonAdvertisedCodecs=e,this.state="running",this.start()}).catch(e=>this.handleError(e))}start(){this.requestICEServers().then(e=>this.setupPeerConnection(e)).then(e=>this.sendOffer(e)).then(e=>this.setAnswer(e)).catch(e=>this.handleError(e))}authHeader(){if(this.conf.user&&""!==this.conf.user){return{Authorization:`Basic ${btoa(`${this.conf.user}:${this.conf.pass}`)}`}}return this.conf.token&&""!==this.conf.token?{Authorization:`Bearer ${this.conf.token}`}:{}}async requestICEServers(){return this.conf.iceServers&&this.conf.iceServers.length>0?this.conf.iceServers:fetch(this.conf.url,{method:"OPTIONS",headers:{...this.authHeader()}}).then(e=>r.linkToIceServers(e.headers.get("Link")))}async setupPeerConnection(e){if("running"!==this.state)throw new s(t.STATE_ERROR,"closed");const n=new RTCPeerConnection({iceServers:e,sdpSemantics:"unified-plan"});this.pc=n;const i="recvonly";return n.addTransceiver("video",{direction:i}),n.addTransceiver("audio",{direction:i}),n.onicecandidate=e=>this.onLocalCandidate(e),n.onconnectionstatechange=()=>this.onConnectionState(),n.ontrack=e=>this.onTrack(e),n.createOffer().then(e=>{if(!e.sdp)throw new s(t.SIGNAL_ERROR,"Failed to create offer SDP");return e.sdp=r.editOffer(e.sdp,this.nonAdvertisedCodecs),this.offerData=r.parseOffer(e.sdp),n.setLocalDescription(e).then(()=>e.sdp)})}sendOffer(e){if("running"!==this.state)throw new s(t.STATE_ERROR,"closed");return fetch(this.conf.url,{method:"POST",headers:{...this.authHeader(),"Content-Type":"application/sdp"},body:e}).then(e=>{switch(e.status){case 201:break;case 404:throw new s(t.NETWORK_ERROR,"stream not found");case 406:throw new s(t.NETWORK_ERROR,"stream not supported");case 400:return e.json().then(e=>{throw new s(t.NETWORK_ERROR,e.error)});default:throw new s(t.NETWORK_ERROR,`bad status code ${e.status}`)}const r=e.headers.get("Location");return r&&(this.sessionUrl=new URL(r,this.conf.url).toString()),e.text()})}setAnswer(e){if("running"!==this.state)throw new s(t.STATE_ERROR,"closed");return this.pc.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:e})).then(()=>{"running"===this.state&&0!==this.queuedCandidates.length&&(this.sendLocalCandidates(this.queuedCandidates),this.queuedCandidates=[])})}onLocalCandidate(e){"running"===this.state&&e.candidate&&(this.sessionUrl?this.sendLocalCandidates([e.candidate]):this.queuedCandidates.push(e.candidate))}sendLocalCandidates(e){this.sessionUrl&&this.offerData&&fetch(this.sessionUrl,{method:"PATCH",headers:{"Content-Type":"application/trickle-ice-sdpfrag","If-Match":"*"},body:r.generateSdpFragment(this.offerData,e)}).then(e=>{switch(e.status){case 204:break;case 404:throw new s(t.NETWORK_ERROR,"stream not found");default:throw new s(t.NETWORK_ERROR,`bad status code ${e.status}`)}}).catch(e=>this.handleError(e))}onConnectionState(){"running"===this.state&&this.pc&&("failed"===this.pc.connectionState||"closed"===this.pc.connectionState?this.handleError(new s(t.OTHER_ERROR,"peer connection closed")):"connected"===this.pc.connectionState&&this.startFlowCheck())}startFlowCheck(){this.stopFlowCheck(),this.checkTimer=setInterval(()=>this.checkFlowState(),this.checkInterval)}stopFlowCheck(){this.checkTimer&&(clearInterval(this.checkTimer),this.checkTimer=void 0)}async checkFlowState(){if(!this.pc)return;const e=await this.pc.getStats();let r=0;e.forEach(e=>{const t=e;"inbound-rtp"===e.type&&"video"===t.kind&&(r=t.bytesReceived||0)}),r!==this.lastBytesReceived||"connected"!==this.pc.connectionState?this.lastBytesReceived=r:this.handleError(new s(t.NETWORK_ERROR,"data stream interruption"))}onTrack(e){this.stream=e.streams[0],this.observer.start(this.container,e=>{e?this.resume():this.pause()})}get paused(){return null===this.container.srcObject}pause(){this.container.srcObject=null}resume(){this.stream&&this.paused&&(this.container.srcObject=this.stream)}}export{t as ErrorTypes,s as WebRTCError,r as default};
+const e={SIGNAL_ERROR:"SignalError",STATE_ERROR:"StateError",NETWORK_ERROR:"NetworkError",MEDIA_ERROR:"MediaError",OTHER_ERROR:"OtherError"};class t extends Error{constructor(e,t,s){super(t,s),this.type=e}}class s{start(e,t){e&&(this.stop(),this.observer=new IntersectionObserver(([e])=>t(e.isIntersecting),{threshold:.5}),this.observer.observe(e))}stop(){this.observer&&(this.observer.disconnect(),this.observer=void 0)}}class r{constructor(e){this.lastBytesReceived=0,this.checkInterval=e.interval,this.onError=e.onError}setPeerConnection(e){this.pc=e}start(){this.stop(),this.checkTimer=setInterval(()=>this.checkFlowState(),this.checkInterval)}stop(){this.checkTimer&&(clearInterval(this.checkTimer),this.checkTimer=void 0)}async checkFlowState(){if(!this.pc)return;const s=await this.pc.getStats();let r=0;s.forEach(e=>{const t=e;"inbound-rtp"===e.type&&"video"===t.kind&&(r=t.bytesReceived||0)}),r!==this.lastBytesReceived||"connected"!==this.pc.connectionState?this.lastBytesReceived=r:this.onError(new t(e.NETWORK_ERROR,"data stream interruption"))}}class n{static parseOffer(e){const t={iceUfrag:"",icePwd:"",medias:[]};for(const s of e.split("\r\n"))s.startsWith("m=")?t.medias.push(s.slice(2)):""===t.iceUfrag&&s.startsWith("a=ice-ufrag:")?t.iceUfrag=s.slice(12):""===t.icePwd&&s.startsWith("a=ice-pwd:")&&(t.icePwd=s.slice(10));return t}static reservePayloadType(e){for(let t=30;t<=127;t++)if((t<=63||t>=96)&&!e.includes(t.toString())){const s=t.toString();return e.push(s),s}throw new Error("unable to find a free payload type")}static enableStereoPcmau(e,t){const s=t.split("\r\n");let r=n.reservePayloadType(e);return s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} PCMU/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} PCMA/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),s.join("\r\n")}static enableMultichannelOpus(e,t){const s=t.split("\r\n");let r=n.reservePayloadType(e);return s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/3`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,2,1;num_streams=2;coupled_streams=1`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/4`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,1,2,3;num_streams=2;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/5`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,4,1,2,3;num_streams=3;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/6`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,4,1,2,3,5;num_streams=4;coupled_streams=2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/7`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,4,1,2,3,5,6;num_streams=4;coupled_streams=4`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} multiopus/48000/8`),s.splice(s.length-1,0,`a=fmtp:${r} channel_mapping=0,6,1,4,5,2,3,7;num_streams=5;coupled_streams=4`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),s.join("\r\n")}static enableL16(e,t){const s=t.split("\r\n");let r=n.reservePayloadType(e);return s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} L16/8000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} L16/16000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),r=n.reservePayloadType(e),s[0]+=` ${r}`,s.splice(s.length-1,0,`a=rtpmap:${r} L16/48000/2`),s.splice(s.length-1,0,`a=rtcp-fb:${r} transport-cc`),s.join("\r\n")}static enableStereoOpus(e){let t="";const s=e.split("\r\n");for(let e=0;e<s.length;e++)if(s[e].startsWith("a=rtpmap:")&&s[e].toLowerCase().includes("opus/")){t=s[e].slice(9).split(" ")[0];break}if(""===t)return e;for(let e=0;e<s.length;e++)s[e].startsWith(`a=fmtp:${t} `)&&(s[e].includes("stereo")||(s[e]+=";stereo=1"),s[e].includes("sprop-stereo")||(s[e]+=";sprop-stereo=1"));return s.join("\r\n")}static editOffer(e,t){const s=e.split("m="),r=s.slice(1).map(e=>e.split("\r\n")[0].split(" ").slice(3)).reduce((e,t)=>[...e,...t],[]);for(let e=1;e<s.length;e++)if(s[e].startsWith("audio")){s[e]=n.enableStereoOpus(s[e]),t.includes("pcma/8000/2")&&(s[e]=n.enableStereoPcmau(r,s[e])),t.includes("multiopus/48000/6")&&(s[e]=n.enableMultichannelOpus(r,s[e])),t.includes("L16/48000/2")&&(s[e]=n.enableL16(r,s[e]));break}return s.join("m=")}static generateSdpFragment(e,t){const s={};for(const e of t){const t=e.sdpMLineIndex;t&&(void 0===s[t]&&(s[t]=[]),s[t].push(e))}let r=`a=ice-ufrag:${e.iceUfrag}\r\na=ice-pwd:${e.icePwd}\r\n`,n=0;for(const t of e.medias){if(void 0!==s[n]){r+=`m=${t}\r\na=mid:${n}\r\n`;for(const e of s[n])r+=`a=${e.candidate}\r\n`}n++}return r}}class i{static async supportsNonAdvertisedCodec(e,t){return new Promise(s=>{const r=new RTCPeerConnection({iceServers:[]}),n="audio";let a="";r.addTransceiver(n,{direction:"recvonly"}),r.createOffer().then(s=>{if(!s.sdp)throw new Error("SDP not present");if(s.sdp.includes(` ${e}`))throw new Error("already present");const o=s.sdp.split(`m=${n}`),c=o.slice(1).map(e=>e.split("\r\n")[0].split(" ").slice(3)).reduce((e,t)=>[...e,...t],[]);a=i.reservePayloadType(c);const h=o[1].split("\r\n");return h[0]+=` ${a}`,h.splice(h.length-1,0,`a=rtpmap:${a} ${e}`),void 0!==t&&h.splice(h.length-1,0,`a=fmtp:${a} ${t}`),o[1]=h.join("\r\n"),s.sdp=o.join(`m=${n}`),r.setLocalDescription(s)}).then(()=>r.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:`v=0\r\no=- 6539324223450680508 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=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\nm=${n} 9 UDP/TLS/RTP/SAVPF ${a}\r\nc=IN IP4 0.0.0.0\r\na=ice-pwd:7c3bf4770007e7432ee4ea4d697db675\r\na=ice-ufrag:29e036dc\r\na=sendonly\r\na=rtcp-mux\r\na=rtpmap:${a} ${e}\r\n${void 0!==t?`a=fmtp:${a} ${t}\r\n`:""}`}))).then(()=>s(!0)).catch(()=>s(!1)).finally(()=>r.close())})}static unquoteCredential(e){return JSON.parse(`"${e}"`)}static linkToIceServers(s){return s?s.split(", ").map(s=>{const r=s.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);if(!r)throw new t(e.SIGNAL_ERROR,"Invalid ICE server link format");const n={urls:[r[1]]};return r[3]&&(n.username=i.unquoteCredential(r[3]),n.credential=i.unquoteCredential(r[4]),n.credentialType="password"),n}):[]}static reservePayloadType(e){for(let t=30;t<=127;t++)if((t<=63||t>=96)&&!e.includes(t.toString())){const s=t.toString();return e.push(s),s}throw new Error("unable to find a free payload type")}}class a{constructor(e){this.retryPause=2e3,this.queuedCandidates=[],this.nonAdvertisedCodecs=[],this.conf=e,this.state="getting_codecs",this.observer=new s,this.flowCheck=new r({interval:5e3,onError:e=>this.handleError(e)}),this.getNonAdvertisedCodecs()}get isRunning(){return"running"===this.state}close(){this.state="closed",this.pc?.close(),this.observer.stop(),this.flowCheck.stop(),this.restartTimeout&&clearTimeout(this.restartTimeout)}handleError(s){this.flowCheck.stop(),"getting_codecs"===this.state||s instanceof t&&s.type===e.SIGNAL_ERROR?this.state="failed":"running"===this.state&&(this.pc?.close(),this.pc=void 0,this.offerData=void 0,this.queuedCandidates=[],this.sessionUrl&&(fetch(this.sessionUrl,{method:"DELETE"}),this.sessionUrl=void 0),this.state="restarting",this.restartTimeout=setTimeout(()=>{this.restartTimeout=void 0,this.state="running",this.start()},this.retryPause),s.message=`${s.message}, retrying in some seconds`),this.conf.onError&&(s instanceof t?this.conf.onError(s):this.conf.onError(new t(e.OTHER_ERROR,s.message)))}getNonAdvertisedCodecs(){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(e=>i.supportsNonAdvertisedCodec(e[0],e[1]).then(t=>!!t&&e[0]))).then(e=>e.filter(e=>!1!==e)).then(s=>{if("getting_codecs"!==this.state)throw new t(e.STATE_ERROR,"closed");this.nonAdvertisedCodecs=s,this.state="running",this.start()}).catch(e=>this.handleError(e))}start(){this.requestICEServers().then(e=>this.setupPeerConnection(e)).then(e=>this.sendOffer(e)).then(e=>this.setAnswer(e)).catch(e=>this.handleError(e))}authHeader(){if(this.conf.user&&""!==this.conf.user){return{Authorization:`Basic ${btoa(`${this.conf.user}:${this.conf.pass}`)}`}}return this.conf.token&&""!==this.conf.token?{Authorization:`Bearer ${this.conf.token}`}:{}}async requestICEServers(){return this.conf.iceServers&&this.conf.iceServers.length>0?this.conf.iceServers:fetch(this.conf.url,{method:"OPTIONS",headers:{...this.authHeader()}}).then(e=>i.linkToIceServers(e.headers.get("Link")))}async setupPeerConnection(s){if("running"!==this.state)throw new t(e.STATE_ERROR,"closed");const r=new RTCPeerConnection({iceServers:s,sdpSemantics:"unified-plan"});this.pc=r,this.flowCheck.setPeerConnection(r);const i="recvonly";return r.addTransceiver("video",{direction:i}),r.addTransceiver("audio",{direction:i}),r.onicecandidate=e=>this.onLocalCandidate(e),r.onconnectionstatechange=()=>this.onConnectionState(),r.ontrack=e=>this.onTrack(e),r.createOffer().then(s=>{if(!s.sdp)throw new t(e.SIGNAL_ERROR,"Failed to create offer SDP");return s.sdp=n.editOffer(s.sdp,this.nonAdvertisedCodecs),this.offerData=n.parseOffer(s.sdp),r.setLocalDescription(s).then(()=>s.sdp)})}sendOffer(s){if("running"!==this.state)throw new t(e.STATE_ERROR,"closed");return fetch(this.conf.url,{method:"POST",headers:{...this.authHeader(),"Content-Type":"application/sdp"},body:s}).then(s=>{switch(s.status){case 201:break;case 404:throw new t(e.NETWORK_ERROR,"stream not found");case 406:throw new t(e.NETWORK_ERROR,"stream not supported");case 400:return s.json().then(s=>{throw new t(e.NETWORK_ERROR,s.error)});default:throw new t(e.NETWORK_ERROR,`bad status code ${s.status}`)}const r=s.headers.get("Location");return r&&(this.sessionUrl=new URL(r,this.conf.url).toString()),s.text()})}setAnswer(s){if("running"!==this.state)throw new t(e.STATE_ERROR,"closed");return this.pc.setRemoteDescription(new RTCSessionDescription({type:"answer",sdp:s})).then(()=>{"running"===this.state&&0!==this.queuedCandidates.length&&(this.sendLocalCandidates(this.queuedCandidates),this.queuedCandidates=[])})}onLocalCandidate(e){"running"===this.state&&e.candidate&&(this.sessionUrl?this.sendLocalCandidates([e.candidate]):this.queuedCandidates.push(e.candidate))}sendLocalCandidates(s){this.sessionUrl&&this.offerData&&fetch(this.sessionUrl,{method:"PATCH",headers:{"Content-Type":"application/trickle-ice-sdpfrag","If-Match":"*"},body:n.generateSdpFragment(this.offerData,s)}).then(s=>{switch(s.status){case 204:break;case 404:throw new t(e.NETWORK_ERROR,"stream not found");default:throw new t(e.NETWORK_ERROR,`bad status code ${s.status}`)}}).catch(e=>this.handleError(e))}onConnectionState(){"running"===this.state&&this.pc&&("failed"===this.pc.connectionState||"closed"===this.pc.connectionState?this.handleError(new t(e.OTHER_ERROR,"peer connection closed")):"connected"===this.pc.connectionState&&this.flowCheck.start())}onTrack(e){this.stream=e.streams[0],this.observer.start(this.conf.container,e=>{e?this.resume():this.pause()})}get paused(){return null===this.conf.container.srcObject}pause(){this.conf.container.srcObject=null}resume(){this.stream&&this.paused&&(this.conf.container.srcObject=this.stream)}}export{e as ErrorTypes,t as WebRTCError,a as default};

package/dist/utils/flow-check.d.ts

@@ -0,0 +1,29 @@
+import { WebRTCError } from '~/errors';
+export interface FlowCheckParams {
+    interval: number;
+    onError: (err: WebRTCError) => void;
+}
+/**
+ * Flow checking logic (断流检测)
+ */
+export declare class FlowCheck {
+    private checkInterval;
+    private lastBytesReceived;
+    private checkTimer?;
+    private pc?;
+    private onError;
+    constructor(params: FlowCheckParams);
+    setPeerConnection(pc: RTCPeerConnection): void;
+    /**
+     * 启动断流检测
+     */
+    start(): void;
+    /**
+     * 停止断流检测
+     */
+    stop(): void;
+    /**
+     * 检测流状态（通过接收字节数判断是否断流）
+     */
+    private checkFlowState;
+}

package/dist/utils/sdp.d.ts

@@ -0,0 +1,43 @@
+/** Type for parsed offer data */
+export interface ParsedOffer {
+    iceUfrag: string;
+    icePwd: string;
+    medias: string[];
+}
+/**
+ * SDP processing utilities
+ */
+export declare class SdpUtils {
+    /**
+     * Parse an offer SDP into iceUfrag, icePwd, and medias.
+     */
+    static parseOffer(sdp: string): ParsedOffer;
+    /**
+     * Reserve a payload type.
+     */
+    static reservePayloadType(payloadTypes: string[]): string;
+    /**
+     * Enable stereo PCMA/PCMU codecs.
+     */
+    static enableStereoPcmau(payloadTypes: string[], section: string): string;
+    /**
+     * Enable multichannel Opus codec.
+     */
+    static enableMultichannelOpus(payloadTypes: string[], section: string): string;
+    /**
+     * Enable L16 codec.
+     */
+    static enableL16(payloadTypes: string[], section: string): string;
+    /**
+     * Enable stereo Opus codec.
+     */
+    static enableStereoOpus(section: string): string;
+    /**
+     * Edit an offer SDP to enable non-advertised codecs.
+     */
+    static editOffer(sdp: string, nonAdvertisedCodecs: string[]): string;
+    /**
+     * Generate an SDP fragment.
+     */
+    static generateSdpFragment(od: ParsedOffer, candidates: RTCIceCandidate[]): string;
+}

package/dist/utils/webrtc.d.ts

@@ -0,0 +1,21 @@
+/**
+ * WebRTC utilities
+ */
+export declare class WebRtcUtils {
+    /**
+     * Check if the browser supports a non-advertised codec.
+     */
+    static supportsNonAdvertisedCodec(codec: string, fmtp?: string): Promise<boolean>;
+    /**
+     * Unquote a credential string.
+     */
+    static unquoteCredential(v: string): string;
+    /**
+     * Convert Link header to iceServers array.
+     */
+    static linkToIceServers(links: string | null): RTCIceServer[];
+    /**
+     * Reserve a payload type.
+     */
+    static reservePayloadType(payloadTypes: string[]): string;
+}

package/dist/whep.d.ts

@@ -0,0 +1,117 @@
+import { 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;
+}
+/** 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;
+    private conf;
+    private state;
+    private restartTimeout?;
+    private pc?;
+    private offerData?;
+    private sessionUrl?;
+    private queuedCandidates;
+    private nonAdvertisedCodecs;
+    private observer;
+    private stream?;
+    private flowCheck;
+    /**
+     * Create a WebRTCWhep.
+     * @param {Conf} conf - Configuration.
+     */
+    constructor(conf: Conf);
+    /**
+     * 媒体是否正常
+     */
+    get isRunning(): boolean;
+    /**
+     * Close the reader and all its resources.
+     */
+    close(): void;
+    /**
+     * Handle errors.
+     */
+    private handleError;
+    /**
+     * Get non-advertised codecs.
+     */
+    private getNonAdvertisedCodecs;
+    /**
+     * Start the WebRTC session.
+     */
+    private start;
+    /**
+     * Generate an authorization header.
+     */
+    private authHeader;
+    /**
+     * Request ICE servers from the endpoint.
+     */
+    private requestICEServers;
+    /**
+     * Setup a peer connection.
+     */
+    private setupPeerConnection;
+    /**
+     * Send an offer to the endpoint.
+     */
+    private sendOffer;
+    /**
+     * Set a remote answer.
+     */
+    private setAnswer;
+    /**
+     * Handle local ICE candidates.
+     */
+    private onLocalCandidate;
+    /**
+     * Send local ICE candidates to the endpoint.
+     */
+    private sendLocalCandidates;
+    /**
+     * Handle peer connection state changes.
+     */
+    private onConnectionState;
+    /**
+     * Handle incoming tracks.
+     */
+    private onTrack;
+    /**
+     * 流是否为空
+     */
+    get paused(): boolean;
+    /**
+     * 暂停播放
+     */
+    pause(): void;
+    /**
+     * 恢复播放
+     */
+    resume(): void;
+}

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "whepts",
   "type": "module",
-  "version": "1.0.0",
-  "packageManager": "pnpm@10.26.1",
-  "description": "",
+  "version": "1.0.2",
+  "packageManager": "pnpm@10.26.2",
+  "description": "基于 mediamtx 的 WebRTC WHEP 播放器，支持 ZLM 和 Mediamtx 的播放地址",
   "author": "mapleafgo",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/mapleafgo/whepts.git"
+  },
   "keywords": [
     "webrtc",
     "whep",

package/src/errors.ts

@@ -0,0 +1,27 @@
+/**
+ * 错误类型
+ */
+export type ErrorType = string
+
+/**
+ * 错误类型常量
+ */
+export const ErrorTypes = {
+  SIGNAL_ERROR: 'SignalError', // 信令异常
+  STATE_ERROR: 'StateError', // 状态异常
+  NETWORK_ERROR: 'NetworkError',
+  MEDIA_ERROR: 'MediaError',
+  OTHER_ERROR: 'OtherError',
+}
+
+/**
+ * 错误
+ */
+export class WebRTCError extends Error {
+  type: ErrorType
+
+  constructor(type: ErrorType, message: string, options?: ErrorOptions) {
+    super(message, options)
+    this.type = type
+  }
+}