npm install --save qn-rtplayer-web

import { QNRTPlayer } from "qn-rtplayer-web";
const player = new QNRTPlayer();

const player = new QNRTPlayer.QNRTPlayer();

import { QNRTPlayer } from "qn-rtplayer-web";

// 1. 创建 QNRTPlayer 对象
const player = new QNRTPlayer();

// 2. 初始化配置信息
player.init();

// 3. 传入播放地址及容器，开始播放
player.play(
  ".../xx.whep",
  document.getElementById("container");
);

/**
 * 传入配置对象，完成初始化配置
 * @param {Config} config - 配置对象
 */
public init(config: Config): void

interface Config {
  /**
   * 配置到媒体元素上的 class 值
   */
  className?: string

  /**
   * 媒体宽度，合法的 CSS 字符串值
   */
  width?: string

  /**
   * 媒体高度，合法的 CSS 字符串值
   */
  height?: string

  /**
   * 合法的 CSS object-fit 值
   */
  objectFit?: string

  /**
   * 音量 0-1 范围
   */
  volumn?: number

  /**
   * 是否开启 video 媒体元素控制 UI
   */
  controls?: boolean

  /**
   * opens the inline mode of ios and WeChat on the mobile phone
   * see: https://webkit.org/blog/6784/new-video-policies-for-ios/
   */
  playsinline?: boolean

  /**
   * 是否只播放音频
   */
  audioOnly?: boolean
  /**
   * 是否静音播放
   */
  muted?: boolean
  /**
   * @deprecated 自{1.2.6}起废弃，后续由服务端设置延迟大小
   * 抖动延迟（设置 jitterBufferTarget 缓冲值，部分浏览器特别是 ios safari 有兼容性问题，可以通过 player.getPlayerSupport() 方法的 jitterBufferTarget 属性判断是否支持）
   */
  jitterBuffer?: number | null
  /**
   * 连接唯一标识符，由业务方自定义，可用于排障，如果未设置则由 sdk 自定义，可以通过 player.getUID() 方法获取该值
   */
  uid?: string
}

const DEFAULT_CONFIG: Required<Config> = {
  className: 'qn-rtplayer-media',
  width: '100%',
  height: '100%',
  objectFit: 'contain',
  volumn: 0.6,
  controls: false,
  playsinline: true,
  audioOnly: false,
  muted: false,
  jitterBuffer: null,
  uid: `qn_${Math.floor(Math.random() * 100)}_${Date.now()}`,
};

/**
 * 修改配置
 * @param {Partial<Config>} config
 */
public setConfig(config: Partial<Config>): void

/**
 * 获取当前播放器配置信息
 * @return {Config} config
 */
public getConfig(): Config

/**
 * 播放
 * @param {string} url 播放地址
 * @param {HTMLElement} container 容器
 */
public async play(url: string, container: HTMLElement): Promise<void>

/**
 * 暂停
 */
public pause(): void

/**
 * 恢复播放
 */
public resume(): Promise<void>

/**
 * 是否存在音频流
 * @return {boolean}
 */
public hasAudio(): boolean

/**
 * 是否存在视频流
 * @return {boolean}
 */
public hasVideo(): boolean

/**
 * 设置音量
 * @param {Number} volume - 音量，范围 0-1
 */
public setAudioVolume(volume: number)

/**
 * 获取当前音量
 * @return {number} - 音量，范围 0-1
 */
public getAudioVolume(): number

/**
 * 静音音频
 */
public muteAudio(): void

/**
 * 取消音频静音
 */
public unmuteAudio(): void

/**
 * 仅播放音频，不播放视频
 */
public muteVideo(): void

/**
 * 取消视频 mute 状态
 */
public unmuteVideo(): void

/**
 * 当前是否处于播放状态
 * @return {boolean}
 */
public isPlaying(): boolean

/**
 * 停止播放
 */
public stop(): void

/**
 * 释放状态
 */
public release(): void

/**
 * 获取支持信息
 * @return {Promise<PlayerSupport>}
 */
public async getPlayerSupport(): Promise<PlayerSupport>

interface PlayerSupport {
  /**
   * 是否支持 RTC
   */
  peerConnection: boolean

  /**
   * 是否支持 H264
   */
  H264: boolean

  /**
   * 是否支持获取流状态
   */
  getStats: boolean
  /**
   * 是否支持抖动缓存
   */
  jitterBufferTarget: boolean
}

public static setLogLevel(level: LogLevel)

/**
 * 获取 SDK 版本号
 */
public get version(): string

/**
 * 获取连接唯一标识符，由业务方通过 init 传入 config 自定义，可用于排障，如果未设置则由 sdk 自定义
 */
public get getUID(): string

player.on('playerStateChanged', (state: PlayerState) => {
  // ...
});

export enum PlayerState {
  /**
   * 播放器默认状态，release 后也回到该状态
   */
  STATE_IDLE = 0,

  /**
   * 播放器已完成初始化，init 之后进入该状态
   */
  STATE_INIT = 1,

  /**
   * 播放器连接完成状态，完成和媒体服务连接后进入该状态
   */
  STATE_READY = 2,

  /**
   * 播放器正在播放状态，当有音视频帧渲染后进入该状态
   */
  STATE_PLAYING = 3,

  /**
   * 播放器停止状态，stop 之后进入该状态
   */
  STATE_STOP = 4,

  /**
   * 播放器错误状态，当播放发生错误进入该状态
   */
  STATE_ERROR = 5,
}

player.on('stats', (data: StatReport) => {
  // ...
});

interface StatReport {
  /**
   * 音频码率（kbps）
   */
  audioBitrate: number;

  /**
   * 视频码率（kbps）
   */
  videoBitrate: number;

  /**
   * 视频流宽
   */
  frameWidth: number;

  /**
   * 视频流高
   */
  frameHeight: number;

  /**
   * 帧率
   */
  frameRate: number;
}

player.on('error', (error: SDKError) => {
  // ...
});

interface SDKError {
  code: number;
  errorType: string;
  msg: string;
}

player.on('log', (data: SDKLogInfo) => {
    // ...
});

interface SDKLogInfo {
  time: string;
  level: LogLevel;
  msg: string;
  id: string;
}

type LogLevel = 'disable' | 'error' | 'warning' | 'debug' | 'log';