netless-react-agora

一个和 netless 白板结合 agora 组件，可以在您的白板项目中直接使用，也可以参考其中的代码逻辑自己实现。

1. 说明

本项目技术选型为：React Typescript 打包工具为： rollup

2. 安装

npm install --save @netless/react-agora

或者

yarn add @netless/react-agora

3. 接口说明

自定义类型说明

export type MemberInformation = {
    readonly id: number;
    readonly nickName: string;
    readonly isOwner: boolean;
    readonly avatar?: string;
};
// 白板的成员类型
export type RoomMember = {
    readonly memberId: number;
    readonly isRtcConnected: boolean;
    readonly information?: MemberInformation;
}
  
// 浮窗位置类型
export type BlockPosition = {
    readonly width: number;
    readonly height: number;
    readonly top?: number;
    readonly bottom?: number;
    readonly left?: number;
    readonly right?: number;
};

| 参数 | 说明 | 类型 | 默认值 | | :---------------- | :--------------------------- | :------------------------ | :-------------------------------------------------: | | userId | 用户 id | number | | | channelId | 频道 id | string | | | roomMembers | 白板的成员 | ReadonlyArray | | | agoraAppId | 声网的 appId | string | | | startBtn | 开始启动的按钮 | React.ReactNode | | | defaultStart | 是否载入自动开启音视频 | boolean | | | HidingPosition | 音视频窗口收缩的位置 | BlockPosition | {bottom: 0, left: 154, width: 32, height: 32,} | | FloatingPosition | 音视频窗口变成浮球的初始位置 | BlockPosition | {bottom: 54, left: 0, width: 90, height: 90, } | | ExtendingPosition | 音视频窗口扩展变大的初始位置 | BlockPosition | {bottom: 64, left: 0, width: 120, height: 120,} |

4. 使用概览

import * as React from "react";
import ReactAgora from "@netless/react-agora";

export type MemberInformation = {
    readonly id: number;
    readonly nickName: string;
    readonly isOwner: boolean;
    readonly avatar?: string;
};
export type RoomMember = {
    readonly memberId: number;
    readonly isRtcConnected: boolean;
    readonly information: MemberInformation;
};

const user_mock_data: RoomMember[] = [
    {
        memberId: 1,
        isRtcConnected: false,
        information:
            {
                id: 1,
                nickName: "Tom",
                isOwner: false,
                avatar: "xxx-1",
            },
    },
    {
        memberId: 2,
        isRtcConnected: false,
        information:
            {
                id: 2,
                nickName: "Jack",
                isOwner: false,
                avatar: "xxx-2",
            },
    }];
export default class RtcPage extends React.Component<{}, {}> {
    public constructor(props: RouteComponentProps<{user: string}>) {
        super(props);
    }
    public render(): React.ReactNode {
        const userId = parseInt(this.props.match.params.user);
        return (
            <div className="container">
                <ReactAgora
                    channelId={"1-xxx-2"}
                    userId={1}
                    agoraAppId={"xxxxxxxxxxxxxxx"}
                    roomMembers={user_mock_data}/>
            </div>
        );
    }
}

5. 启动项目测试案例

1. 获取源码

   git clone [email protected]:netless-io/netless-react-agora.git

2. 进入项目并安装库文件依赖

   cd netless-react-agora
   yarn

3. 启动库文件项目

       yarn start

4. 进入项目并安装 example 文件依赖

       cd example
       yarn

5. 启动 example 项目

       yarn start

6. 项目截图

   

License

MIT © alwaysmavs