轻量播放器

轻量播放器基于 Ray 的 IpcPlayer 封装，整合了基础通用组件和拉流能力，便于业务快速接入 IPC 播放功能。

业务匹配

如果您的业务场景不需要融合播放器提供的丰富内置能力，且希望对 UI 和交互进行一定程度的定制，同时无需关注拉流控制等底层逻辑，推荐按以下步骤接入轻量播放器，快速构建符合业务需求的播放器。

安装依赖

yarn add @ray-js/ray-ipc-player

使用示例

注意: 目前 IDE 开发暂不支持视频流的实时播放，还需通过真机进行调试。

import IpcPlayer from '@ray-js/ray-ipc-player';

function Page() {

  const deviceId = '1234567890xxxxxx';
  // 设备在线状态
  const onlineStatus = true; 
  // 获取播放器实例, 可以调用播放器实例上的方法
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // 监听播放器状态
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
  };

  return (
    // playerContainer 为播放器容器, 设置播放器的区域大小
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />
     </View>    
  )
}

播放器容器样式

.playerContainer {
  width: 100%;
  height: 300px;
}

参数说明

参数名	类型	必填	描述
devId	`string`	是	设备 ID
onlineStatus	`bool`	是	设备在线状态
objectFit	`fillCrop` 或 `contain`	否	视频填充模式 (tips: 横竖屏切换时，可匹配不同的填充模式)
privateState	`bool`	否	隐私模式
rotateZ	`number`	否	画面旋转角度
clarity	`ClarityType`	否	画面清晰度
muted	`bool`	否	是否静音
scalable	`bool`	否	是否允许画面手动缩放
ptzControllable	`bool`	否	是否支持画面云台转动控制
onCtx	`function`	否	获取播放器实例
onChangeStreamStatus	`function`	否	监听播放器状态
onVideoTap	`function`	否	点击视频画面事件
extend	`object`	否	动态扩展参数(默认值为), 适用于随 APP 升级，新增属性使用

更多通用属性使用可参考 IpcPlayer

播放器推送状态主要说明 status

参数名	说明
1001	建立连接成功
-1001	建立连接失败
1002	拉流成功
-1002	拉流失败

组件实现

提示: 当然您也可以通过基础 IpcPlayer 与 createIpcPlayerContext 自主控制播放流程。

IpcPlayer

import { IpcPlayer } from '@ray-js/ray';

用于渲染视频画面的核心组件。详细用法可参考官方文档：IpcPlayer

IpcContext

import { createIpcPlayerContext } from '@ray-js/api';

用于创建播放器实例, 建立设备绑定关系, 更多说明请参见: createIpcPlayerContext

用于管理播放器生命周期和控制指令的上下文对象。更多说明请参见：IpcContext

#轻量播放器

#业务匹配

#安装依赖

#使用示例

#参数说明

#组件实现

#IpcPlayer

#IpcContext