[English](./README.md) | 简体中文

# @ray-js/robot-data-stream

[![latest](https://img.shields.io/npm/v/@ray-js/robot-data-stream/latest.svg)](https://www.npmjs.com/package/@ray-js/robot-data-stream) [![download](https://img.shields.io/npm/dt/@ray-js/robot-data-stream.svg)](https://www.npmjs.com/package/@ray-js/robot-data-stream)

> 扫地机P2P数据流标准化组件

## 安装

```sh
$ npm install @ray-js/robot-data-stream
// 或者
$ yarn add @ray-js/robot-data-stream
```

## 开发

```sh
# 实时编译组件代码
yarn watch
# 实时编译Demo代码
yarn start:tuya
```

## 使用

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';
import { useP2PDataStream, StreamDataNotificationCenter } from '@ray-js/robot-data-stream';
import styles from './index.module.less';

const DemoBlock = ({ devId }) => {
  const onReceiveMapData = (data: string) => {
    StreamDataNotificationCenter.emit('receiveMapData', data);
  };

  const onReceivePathData = (data: string) => {
    StreamDataNotificationCenter.emit('receivePathData', data);
  };

  const onReceiveAIPicData = (data: string) => {
    StreamDataNotificationCenter.emit('receiveAIPicData', data);
  };

  const onReceiveAIPicHDData = (data: string) => {
    StreamDataNotificationCenter.emit('receiveAIPicHDData', data);
  };

  const { appendDownloadStreamDuringTask } = useP2PDataStream(
    devId,
    onReceiveMapData,
    onReceivePathData,
    {
      logTag: 'Robot_Stream',
      onReceiveAIPicData,
      onReceiveAIPicHDData
    }
  );

  return (
    <View className={styles.demoBlock}>
      <View className={styles.demoBlockTitle}>
        <Text className={styles.demoBlockTitleText}>{devId}</Text>
      </View>
    </View>
  );
};

export default function Home() {
  return (
    <View className={styles.view}>
      <DemoBlock devId="" />
    </View>
  );
}


```