音视频播放

更新时间：2025-08-20 16:55:16

音视频播放器，包括：视频直播，暂停、销毁等功能。

接口与类型定义详见sdk中dist目录下index.d.ts文件

/**
 * 对外Web播放器接口
 * @public
 */
declare interface IRTCXWebPlayer {
    /**
     * 销毁播放器
     */
    destroy(): Promise<void> | void;
    /**
     * 播放直播
     */
    play(): Promise<void> | void;
    /**
     * 暂停播放
     */
    pause(): Promise<void> | void;
   
    /**
     * 添加播放器事件监听
     * @param event - 事件
     * @param listener  - 回调
     */
    on(event: RTCXWebPlayerEventEnum, listener: (...args: any[]) => void): void;
    /**
     * 移除播放器事件监听
     * @param event - 事件
     * @param listener  - 回调
     */
    off(event: RTCXWebPlayerEventEnum, listener: (...args: any[]) => void): void;
}

播放器创建

/**
 * web播放器初始化选项
 * @public
 */
declare interface IRTCXWebPlayerOption {
    /**
     * 播放器所在父容器（需要有高宽），播放器自适应父容器高度，宽度
     */
    videoWrapper: string | HTMLMediaElement;
    /**
     * 播放设备信息，由设备列表接口返回
     */
    deviceInfo: PlayDeviceInfo;
    /**
     * 调试日志开关
     */
    debug?: boolean;
    /**
     * 无数据最大等待时长，超时上抛error。单位毫秒
     */
    bufferWaitTimeMS?: number;
    /**
     * 流类型，播放主码流或子码流
     */
    streamType?: StreamTypeEnum;
    /**
     * 镜头id 仅当多目设备播放时使用
     */
    lensId?: number;
}


/**
 * 错误用法： const rtcxWebPlayer =  ref<RTCXWebPlayer>()
 * 不使用 ref 或改为使用 shallowRef
 */
let rtcxWebPlayer: RTCXWebPlayer | null = null
const deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo   = {...}
rtcxWebPlayer = new RTCXWebPlayer({
    videoWrapper: '.player-display-area',
    deviceInfo: deviceInfo,
})

直播【流转发和P2P】

播放器创建后，收到 RTCXWebPlayerTypes.RTCXWebPlayerEventEnum.inited事件可播放

import { RTCXDeviceMgrTypes, RTCXWebPlayer, RTCXWebPlayerTypes } from '@rtcx/websdk'

rtcxWebPlayer?.on(RTCXWebPlayerTypes.RTCXWebPlayerEventEnum.inited, () => {
    console.info('rtcxWebPlayer inited')
    rtcxWebPlayer?.play()
  })

暂停

rtcxWebPlayer?.pause()

销毁播放器

rtcxWebPlayer?.destroy()

完整播放示例

import { RTCXDeviceMgrTypes, RTCXWebPlayer, RTCXWebPlayerTypes } from '@rtcx/websdk'
/**
 * 错误用法： const rtcxWebPlayer =  ref<RTCXWebPlayer>()
 * 不能使用 ref 或改为使用 shallowRef
 */
let rtcxWebPlayer: RTCXWebPlayer | null = null
function initPlayer(deviceInfo: RTCXDeviceMgrTypes.PlayDeviceInfo) {
  rtcxWebPlayer?.destroy()

  rtcxWebPlayer = new RTCXWebPlayer({
    videoWrapper: '.player-display-area',
    deviceInfo: deviceInfo,
    // disableCMS: true
  })

  rtcxWebPlayer.on(RTCXWebPlayerTypes.RTCXWebPlayerEventEnum.inited, () => {
    console.info('rtcxWebPlayer inited')
    rtcxWebPlayer.play()
    isPause.value = false
  })


  rtcxWebPlayer.on(RTCXWebPlayerTypes.RTCXWebPlayerEventEnum.error, (...args) => {
    console.info('rtcxWebPlayer error', args)
  })

  rtcxWebPlayer.on(RTCXWebPlayerTypes.RTCXWebPlayerEventEnum.pause, (...args) => {
    console.info('rtcxWebPlayer pause', args)
    isPause.value = true
  })
}

const isPause = ref<boolean>(false)

function onPlayPause() {
  if (!rtcxWebPlayer) return
  if (isPause.value) {
    rtcxWebPlayer.play()
  } else {
    rtcxWebPlayer.pause()
  }
  isPause.value = !isPause.value
}