whepts 1.0.0

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.vscode/settings.json

@@ -0,0 +1,38 @@
+{
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // The following is optional.
+  // It's better to put under project setting `.vscode/settings.json`
+  // to avoid conflicts with working with different eslint configs
+  // that does not support all formats.
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

package/README.md

@@ -0,0 +1,177 @@
+# WhepTS Player
+
+基于 [mediamtx](https://github.com/bluenviron/mediamtx) 的 WebRTC WHEP 播放器，支持 ZLM 和 Mediamtx 的播放地址。
+
+## 简介
+
+本项目基于 [mediamtx 的 reader.js](https://github.com/bluenviron/mediamtx/blob/main/internal/servers/webrtc/reader.js) 编写，实现了对 ZLM (ZLMediaKit) 和 Mediamtx 的 WebRTC WHEP 协议播放地址的支持。
+
+WebRTC WHEP (WebRTC HTTP Egress Protocol) 是一种用于从 WebRTC 服务器获取媒体流的协议，允许客户端通过 HTTP 请求获取实时音视频流。
+
+## 功能特性
+
+- 支持 ZLMediaKit 的 WHEP 播放地址
+- 支持 Mediamtx 的 WHEP 播放地址
+- 基于 WebRTC 的低延迟播放
+- TypeScript 编写，类型安全
+- 支持事件监听和错误处理
+- 可配置的连接参数
+- 自动断流检测与重连
+- 支持多种音视频编解码器
+- 支持仅可视区域播放控制
+- 在 Chrome 上根据硬件支持 G711 和 H265 编解码器
+
+## 安装
+
+```bash
+npm install
+```
+
+或
+
+```bash
+pnpm install
+```
+
+## 使用方法
+
+### 基本用法
+
+```typescript
+import WebRTCWhep from 'whepts'
+
+// 配置参数
+const config = {
+  url: 'https://your-server:port/index/api/whep?app={app}&stream={stream}', // WHEP 服务器地址
+  container: document.getElementById('video') as HTMLMediaElement, // 视频播放容器
+  onError: (error) => {
+    console.error('播放错误:', error)
+  }
+}
+
+// 创建播放器实例
+const player = new WebRTCWhep(config)
+
+// 播放器会自动开始播放
+```
+
+### 高级用法
+
+```typescript
+import WebRTCWhep from 'whepts'
+
+// 配置参数
+const config = {
+  url: 'http://localhost:8889/{stream}/whep', // WHEP 服务器地址
+  container: document.getElementById('video') as HTMLMediaElement, // 视频播放容器
+  user: 'username', // 认证用户名（可选）
+  pass: 'password', // 认证密码（可选）
+  token: 'token', // 认证令牌（可选）
+  iceServers: [ // ICE 服务器配置（可选）
+    {
+      urls: ['stun:stun.l.google.com:19302']
+    }
+  ],
+  onError: (error) => {
+    console.error('播放错误:', error)
+  }
+}
+
+// 创建播放器实例
+const player = new WebRTCWhep(config)
+
+// 检查流状态
+console.log('流状态:', player.isRunning)
+
+// 暂停播放
+player.pause()
+
+// 恢复播放
+player.resume()
+
+// 关闭播放器
+// player.close();
+```
+
+## 支持的播放地址格式
+
+### ZLMediaKit
+
+```text
+https://zlmediakit.com/index/api/whep?app={app}&stream={stream}
+```
+
+### Mediamtx
+
+```text
+http://localhost:8889/{stream}/whep
+```
+
+## API
+
+### WebRTCWhep 类
+
+#### 构造函数
+
+```typescript
+WebRTCWhep(conf)
+```
+
+- `conf`: 配置对象
+  - `url`: WHEP 服务器地址
+  - `container`: HTML 媒体元素容器
+  - `user`: 认证用户名（可选）
+  - `pass`: 认证密码（可选）
+  - `token`: 认证令牌（可选）
+  - `iceServers`: ICE 服务器配置（可选）
+  - `onError`: 错误回调函数（可选）
+
+#### 属性
+
+- `isRunning`: 流是否正在运行
+- `paused`: 播放器是否已暂停
+
+#### 方法
+
+- `close()`: 关闭播放器和所有资源
+- `pause()`: 暂停播放
+- `resume()`: 恢复播放
+
+#### 错误类型
+
+- `ErrorTypes.SIGNAL_ERROR`: 信令异常
+- `ErrorTypes.STATE_ERROR`: 状态异常
+- `ErrorTypes.NETWORK_ERROR`: 网络错误
+- `ErrorTypes.MEDIA_ERROR`: 媒体错误
+- `ErrorTypes.OTHER_ERROR`: 其他错误
+
+## 构建
+
+```bash
+npm run build
+```
+
+## 开发
+
+```bash
+npm run dev
+```
+
+## 项目结构
+
+```text
+src/
+├── index.ts          # 主要的 WebRTCWhep 类实现
+└── utils/
+    └── observer.ts   # 可见性监测工具
+```
+
+## 依赖
+
+- TypeScript
+- WebRTC API
+- 相关构建工具 (Rollup, ESLint)
+
+## 许可证
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,196 @@
+/**
+ * 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;
+}

package/dist/index.js

@@ -0,0 +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};

package/dist/utils/observer.d.ts

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

package/eslint.config.ts

@@ -0,0 +1,13 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    formatters: true,
+    pnpm: true,
+  },
+  {
+    rules: {
+      'n/prefer-global/process': ['error', 'always'],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "whepts",
+  "type": "module",
+  "version": "1.0.0",
+  "packageManager": "pnpm@10.26.1",
+  "description": "",
+  "author": "mapleafgo",
+  "license": "MIT",
+  "keywords": [
+    "webrtc",
+    "whep",
+    "player",
+    "streaming",
+    "mediamtx",
+    "zlmediakit",
+    "typescript",
+    "video",
+    "audio",
+    "realtime",
+    "low-latency",
+    "media"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup --config --environment NODE_ENV:production",
+    "build:debug": "rollup --config",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^6.7.3",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-eslint": "^9.2.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^25.0.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-format": "^1.1.0",
+    "rollup": "^4.54.0",
+    "rollup-plugin-delete": "^3.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}

package/rollup.config.ts

@@ -0,0 +1,37 @@
+import commonjs from '@rollup/plugin-commonjs'
+import eslint from '@rollup/plugin-eslint'
+import terser from '@rollup/plugin-terser'
+import typescript from '@rollup/plugin-typescript'
+import del from 'rollup-plugin-delete'
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'es',
+      sourcemap: !isProduction,
+    },
+  ],
+  external: [],
+  plugins: [
+    del({ targets: 'dist' }),
+    commonjs(),
+    eslint({
+      fix: true,
+    }),
+    typescript({
+      importHelpers: true,
+      sourceMap: !isProduction,
+    }),
+    isProduction && terser({
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+      mangle: true,
+    }),
+  ].filter(Boolean),
+}