@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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.8
    0
    • latest

Version History

Package Sidebar

Install

npm i @netless/react-agora

Weekly Downloads

0

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
  • cheerchen
  • l1shen
  • hyrious
  • huaguzheng