# @ray-js/ray-ipc-player > ray小程序播放器 Latest version **2.1.3** (published 2026-06-12) · MIT license · 0 weekly downloads ## Install ```sh npm install @ray-js/ray-ipc-player pnpm add @ray-js/ray-ipc-player yarn add @ray-js/ray-ipc-player bun add @ray-js/ray-ipc-player ``` ## Health **Score 50/100 (C)** — status: active. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. ## Facts | | | |---|---| | Version | 2.1.3 | | Published | 2026-06-12 | | First published | 2022-09-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 193.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | tuyafe | | Keywords | tuya-miniapp, ray | ## Links - npm: https://www.npmjs.com/package/@ray-js/ray-ipc-player - npm.io page: https://npm.io/package/@ray-js/ray-ipc-player ## Dependencies (5) - [clsx](https://npm.io/package/clsx.md) ^1.2.1 - [immer](https://npm.io/package/immer.md) ^9.0.15 - [use-immer](https://npm.io/package/use-immer.md) ^0.5.1 - [@ray-js/panel-sdk](https://npm.io/package/@ray-js/panel-sdk.md) ^1.13.1 - [@ray-js/ray-ipc-utils](https://npm.io/package/@ray-js/ray-ipc-utils.md) ^1.1.13 ## Recent versions - 2.1.3 (latest) — 2026-06-12 - 2.1.2-beta.1 (beta) — 2026-05-29 - 2.1.2 — 2026-05-29 - 2.1.1 — 2026-05-28 - 2.1.1-beta.3 — 2026-05-13 - 2.1.1-beta.2 — 2026-05-09 - 2.1.1-beta.1 — 2026-05-09 - 2.1.0 — 2026-03-04 - 2.1.0-beta.2 — 2026-02-06 - 2.1.0-beta.1 — 2026-02-02 - 2.0.31 — 2026-01-04 - 2.0.30 — 2025-11-12 - 2.0.29 — 2025-10-30 - 2.0.29-beta-2 — 2025-10-27 - 2.0.29-beta-1 — 2025-10-23 - … 68 more at https://npm.io/package/@ray-js/ray-ipc-player/versions ## README English | [简体中文](./README-zh_CN.md) # ray-ipc-player Encapsulates basic ipc-player capabilities, including loading, device exception, and offline prompts ### property ```ts export type IProps = { /** * @description.en devId * @default "" */ devId: string; /** * @description.en Whether the device is online * @default true */ onlineStatus: boolean; /** * @description.en Privacy mode * @default false */ privateState?: boolean; /** * @description.en defaultMute * @default true */ defaultMute?: boolean; /** * @description.en clarity * @default "normal" */ clarity?: 'normal' | 'hd'; /** * @description.en Notifying the view of updates, each time you need to set a different value * @default "" */ updateLayout?: any; /** * @description.en Notifies the video stream that the state has changed * @default (data) => void */ onChangeStreamStatus?: (data) => void; /** * @description.en Obtain ipcPlayer instance ctx and retry method Retry * @default (playerRef) => void */ onCtx?: (playerRef) => void; /** * @description.en Fired when the native view layer finishes initialization; ipcCtx APIs can be safely called after this * @default undefined */ onInitDone?: () => void; /** * @description.en The initialization preview is successful * @default (devId) => void */ onInitPreview?: (data) => void; /** * @description.en Click events in the player area * @default (devId) => void */ onPlayerTap?: (data) => void; /** * @description.en Scalable or not * @default true */ scalable?: boolean; /** * @description.en Scale of scale * @default 0 */ scaleMultiple?: number; /** * @description.en Camera rotation Angle * @default 0 */ rotateZ?: number; /** * @description.en Whether to enable the video area cradle head control * @default true */ ptzControllable?: boolean; /** * @description.en playerStyle * @default {} */ playerStyle?: { bgColor?: string; borderRadius?: number | string; borderStyle?: 'solid' | 'dashed'; borderColor?: string; borderWidth?: string | number; }; /** * @description.en Loading copy * @default "Getting a video stream..." */ loadText?: string; /** * @description.en objectFit：contain|fillCrop * @description.zh contain: The long side of the image will fill the screen, the short side area will be filled with black, fillCrop: The image will fill the screen * @default "contain" */ objectFit?: string; /** * @description.en Extended Attributes * @default {} */ extend?: Record; }; ``` #### onChangeStreamStatus instructions It mainly exposes some status events during the pull flow: the initialization preview is successful: - -1000: Unknown anomaly - 1001: Connection successful - -1001: Connection failure - 1002: preview successful - -1002: preview failure - -1010: The network status is unavailable - -1012: The device is removed. - 1009: disconnect successful - -1009: disconnect failure ### usage ```tsx import React, { useState, useCallback } from 'react'; import Player from '@ray-js/ray-ipc-player'; import { Button, View } from '@ray-js/components'; const PlayerDemo = () => { const [updateLayout, setUpdateLayout] = useState(''); const [state, setState] = useState({}); const [playerWidth, setPlayerWidth] = useState('200px'); /** onCtx usage * playerCtx.ctx: The instance of ipc-player,includes preview, definition, mute, video, screenshot and other methods * playerCtx.retry: retry */ const onCtx = playerCtx => { setState(playerCtx); }; // Clarity of switching const handleClarity = useCallback(() => { if (previewStatus) { state.ctx.setClarity({ clarity: 'hd', success: res => { console.log('Succeeded in switching clarity:', res); }, fail: e => { console.log('Failed to switch clarity:', e); }, }); } }, [previewStatus]); const handleChangeWidth = () => { setPlayerWidth(playerWidth); // Update the player view with a synchronous notification when the width style of the outer parent node is updated setUpdateLayout(Math.random().toString()); }; return ( ); }; export default PlayerDemo; ``` --- _Source: https://npm.io/package/@ray-js/ray-ipc-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._