Numerous Pulsating Martians

    @netless/react-agora
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.8 • Public • Published

    netless-react-agora

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

    NPM JavaScript Style Guide

    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 git@github.com: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. 项目截图

      react-agora-1 react-agora-2

    License

    MIT © alwaysmavs

    Keywords

    none

    Install

    npm i @netless/react-agora

    DownloadsWeekly Downloads

    10

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    3.64 MB

    Total Files

    25

    Last publish

    Collaborators

    • vince-hz
    • alic_zhang
    • straybugs
    • moskize
    • netless-rick
    • yleaf
    • herewhite
    • black_hole
    • cheerchen
    • l1shen
    • hyrious
    • huaguzheng