npm package: @feiyaowangluo/feiyao-sdk
Description: 菲耀直播 SDK
Author: 菲耀直播
Latest version: 1.0.10

## 安装 
在现有项目中使用，可以通过npm、yarn或pnpm安装
```
# 通过 npm 安装
npm install @feiyaowangluo/feiyao-sdk

# 通过 yarn 安装
yarn add @feiyaowangluo/feiyao-sdk

# 通过 pnpm 安装
pnpm install @feiyaowangluo/feiyao-sdk
```
## 引入
直接引入即可
```javascript
import { FeiyaoPlayer, FeiyaoChat } from '@feiyaowangluo/feiyao-sdk';
```

## 快速开始

### 1. 申请接入

在使用 SDK 前，需要先申请 `sign`。请联系菲耀直播技术支持获取。

### 2. 播放器 SDK
```javascript
import { FeiyaoPlayer } from '@feiyaowangluo/feiyao-sdk';

// 初始化播放器
const player = new FeiyaoPlayer({
  element_id: '', // 必填，播放器容器 ID
  sign: '', // 必填，接入凭证
  live_id: '', // 必填，平台直播间 ID
  userid: '', // 选填，菲耀用户标识 userid和third_unionid 不能同时为空
  third_unionid: '', // 选填，第三方用户标识 userid和third_unionid 不能同时为空
});

```
### 3. 聊天消息 SDK
```javascript
import { FeiyaoChat } from '@feiyaowangluo/feiyao-sdk';

// 初始化聊天
const chat = new FeiyaoChat({
  live_id: '', // 必填，平台直播间 ID
  sign: '', // 必填，接入凭证
  userid: '', // 选填，菲耀用户标识 userid和third_unionid 不能同时为空
  third_unionid: '', // 选填，第三方用户标识 userid和third_unionid 不能同时为空
});

```

## API 参考

### FeiyaoPlayer

#### 配置项
| 参数          | 类型   | 必填 | 说明           |
| ------------- | ------ | ---- | -------------- |
| element_id    | string | 是   | 播放器容器ID   |
| sign          | string | 是   | 接入凭证       |
| live_id       | string | 是   | 平台直播间 ID  |
| userid        | string | 否   | 菲耀用户标识   |
| third_unionid | string | 否   | 第三方用户标识 |
>**注意：** userid 和 third_unionid 必须至少传入一个，否则将无法正常创建。

#### 方法
| 方法名   | 参数         | 返回值 | 说明     |
| -------- | ------------ | ------ | -------- |
| retry    | -            | void   | 刷新     |
| seek     | time: number | void   | 跳转     |
| duration | -            | number | 获取时长 |
| play     | -            | void   | 播放     |
| pause    | -            | void   | 暂停     |

### 代码演示

#### 基础用法
```javascript
  import { useEffect, useRef } from 'react'
  import { FeiyaoPlayer } from '@feiyaowangluo/feiyao-sdk';
  export default () => {
    const videoRef = useRef<any>(null)
    useEffect(() => {
      const player = new FeiyaoPlayer({
        element_id: 'video', // 必填，播放器容器 ID
        sign: '', // 必填，接入凭证
        live_id: '', // 必填，平台直播间 ID
        userid: '', // 选填，菲耀用户标识 userid和third_unionid 不能同时为空
        third_unionid: '', // 选填，第三方用户标识 userid和third_unionid 不能同时为空
      });
      videoRef.current = player
    }, [])
    const retry = () => {
      videoRef.current.retry()
    }
    const play = () => {
      videoRef.current.play()
    }
    const pause = () => {
      videoRef.current.pause()
    }
    return (
      <div id="video" style={{ width: 500, aspectRatio: '16/9' }}></div>
    )
  }
```

### FeiyaoChat

#### 配置项
| 参数          | 类型   | 必填 | 说明           |
| ------------- | ------ | ---- | -------------- |
| element_id    | string | 是   | 播放器容器ID   |
| sign          | string | 是   | 接入凭证       |
| live_id       | string | 是   | 平台直播间 ID  |
| userid        | string | 否   | 菲耀用户标识   |
| third_unionid | string | 否   | 第三方用户标识 |
>**注意：** userid 和 third_unionid 必须至少传入一个，否则将无法正常创建。

#### 事件
| 事件名                  | 参数 | 说明             |
| ----------------------- | ---- | ---------------- |
| chat_message            | data | 聊天消息         |
| live_status_change      | data | 直播状态变化     |
| live_push_status_change | data | 直播推流状态变化 |

### 代码演示

#### 基础用法
```javascript
  import { useEffect, useRef } from 'react'
  import { FeiyaoChat } from '@feiyaowangluo/feiyao-sdk';
  export default () => {
    const ChatRef = useRef<any>(null)
    useEffect(() => {
      const Chat = new FeiyaoChat({
        element_id: 'video', // 必填，播放器容器 ID
        sign: '', // 必填，接入凭证
        live_id: '', // 必填，平台直播间 ID
        userid: '', // 选填，菲耀用户标识 userid和third_unionid 不能同时为空
        third_unionid: '', // 选填，第三方用户标识 userid和third_unionid 不能同时为空
      });
      Chat.on('chat_message', (data: any) => {
        console.log(data)
      })
      Chat.on('live_push_status_change', (data: any) => {
        console.log(data)
      })
      Chat.on('live_status_change', (data: any) => {
        console.log(data)
      })
      ChatRef.current = Chat
    }, [])
  }
```

#### socket 消息返回示例
```JSON
// 聊天消息 chat_message
{
  "content":"bbb",
  "created_at":"2023-08-16 16:01:26",
  "id":13,
  "ip":"127.0.0.1",
  "is_passed":1, // is_passed: -1:待审核  1:通过 0:不通过 
  "room_id":20011,
  "sid":"",
  "to":{ //表示回复的互动消息内容,如果为null 曾表示正常的互动消息，非回复某个消息
    "id":9,
    "room_id":0,
    "content":"ccc",
    "created_at":"2023-08-16 15:54:14",
    "ip":"127.0.0.1",
    "sid":"",
    "user_id":97327349,
    "is_passed":1,
    "user":{
      "avatar":"https://test-1317106427.cos.ap-guangzhou.myqcloud.com/sys/managerHead.svg",
      "nickname":"wwf",
      "user_type":2  //用户类型 1:普通用户 2:管理员/主持人 3:机器人
    }
  },
  "user":{
    "avatar":"https://test-1317106427.cos.ap-guangzhou.myqcloud.com/sys/page/managerHead.svg",
     "nickname":"wwf",
       "user_type":2 //用户类型 1:普通用户 2:管理员/主持人 3:机器人
     },
    "user_id":97327349
  }
// 直播状态变化 live_status_change
{
  "is_record": 1,//1 开启了回放设置 2未开启回放配置
  "status": 2 //1 开始直播 2结束直播
}
// 直播推流状态变化 live_push_status_change
{
  "push_status": 2,     //推流状态 0:未开始 1:推流中 2:已停止 3:已结束
  "stream": "0b3aca7458728ff95ac00915bb9740bc"
}
```

## 注意事项

1. 必须先申请 `sign` 才能使用 SDK
2. 播放器和聊天功能可以独立使用
3. 确保使用 HTTPS 协议

## 常见问题

1. 如何获取 sign？
   - 请联系菲耀直播技术支持申请

2. 播放器无法播放？
   - 检查 sign 是否正确
   - 确认直播间 ID 是否有效
   - 查看控制台错误信息

3. 聊天连接失败？
   - 检查网络连接
   - 确认 WebSocket 连接是否被阻止
   - 验证 sign 权限

## 更新日志

### v1.0.3
- 新增直播状态变化事件
- 新增直播推流状态变化事件

### v1.0.2
- 初始版本发布
- 支持直播播放
- 支持聊天功能

## 技术支持

如有问题，请联系菲耀直播技术支持：
- 邮箱：feiyaowangluo@163.com
- 电话：400-6699-293