Initial Commit

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,5 @@
+build/
+dist/
+node_modules/
+.snapshots/
+*.min.js

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "prettier/standard",
+    "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended"
+  ],
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "legacyDecorators": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "16"
+    }
+  },
+  "rules": {
+    "space-before-function-paren": 0,
+    "react/prop-types": 0,
+    "react/jsx-handler-names": 0,
+    "react/jsx-fragments": 0,
+    "react/no-unused-prop-types": 0,
+    "jsx-uses-vars": true,
+    "jsx-uses-react": true,
+    "import/export": 0
+  }
+}

.gitignore

@@ -0,0 +1,22 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+# dist hosts the github release
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - 12
+  - 10

README.md

@@ -0,0 +1,36 @@
+# Agora RTC SDK React Wrapper
+
+A react wrapper for [Agora RTC NG SDK](https://www.npmjs.com/package/agora-rtc-sdk-ng).
+This wrapper supports **React >= v16.8**
+
+## Install
+```bash
+npm install git://github.com/AgoraIO-Community/agora-rtc-react#v1.0.0
+```
+
+## Usage
+```tsx
+import React from "react";
+import { AgoraVideoPlayer, createClient, createMicrophoneAndCameraTracks } from "agora-rtc-react";
+
+const config = {mode: "rtc", codec: "vp8"}
+
+const useClient = createClient(config);
+const useMicrophoneAndCameraTracks = createMicrophoneAndCameraTracks();
+
+const App = () => {
+  const client = useClient();
+  const { ready, tracks } = useMicrophoneAndCameraTracks();
+
+  return (
+    ready && <AgoraVideoPlayer videoTrack={tracks[1]} />
+  )
+}
+
+``` 
+
+## Example
+A full videocall example using the wrapper can be found [here](example.md).
+
+## Reference 
+You can view the methods in the wrapper [here](api.md).

api.md

@@ -0,0 +1,72 @@
+# API Reference
+
+## Wrapper Functions
+
+| Factory Method | Parameters (? = optional)| Return Value | Reference
+| ----- | ---- | ---- | ---- |
+| createClient | [ClientConfig](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/clientconfig.html) | A hook that gives a [client object](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartcclient.html) | [AgoraRTC.createClient](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createclient) |
+| createMicrophoneAndCameraTracks | [AudioConfig?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/microphoneaudiotrackinitconfig.html), [VideoConfig?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/cameravideotrackinitconfig.html) | A hook that gives an object containg tracks ([microphone](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/imicrophoneaudiotrack.html) and [camera](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/icameravideotrack.html)) and a state variable `ready` which is set to true when the feeds are initialised | [createMicrophoneAndCameraTracks](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createmicrophoneandcameratracks) |
+| createBufferSourceAudioTrack | [BufferSourceAudioTrackInitConfig](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/buffersourceaudiotrackinitconfig.html) | A hook that gives an object containg the [audio track](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ibuffersourceaudiotrack.html) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createBufferSourceAudioTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createbuffersourceaudiotrack) |
+| createCameraVideoTrack | [CameraVideoTrackInitConfig?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/cameravideotrackinitconfig.html)| A hook that gives an object containg the [camera video track](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/icameravideotrack.html) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createCameraVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createcameravideotrack) |
+| createCustomAudioTrack |[CustomAudioTrackInitConfig](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/customaudiotrackinitconfig.html)| A hook that gives an object containg the [custom audio track](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ilocalaudiotrack.html) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createCustomAudioTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createcustomaudiotrack) |
+| createCustomVideoTrack |[CustomVideoTrackInitConfig](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/customvideotrackinitconfig.html)| A hook that gives an object containg the [custom video track](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ilocalvideotrack.html) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createCustomVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createcustomvideotrack) |
+| createMicrophoneAudioTrack |[MicrophoneAudioTrackInitConfig?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/microphoneaudiotrackinitconfig.html)| A hook that gives an object containg the [microphone audio track](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/imicrophoneaudiotrack.html) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createMicrophoneAudioTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createmicrophoneaudiotrack) |
+| createScreenVideoTrack |[ScreenVideoTrackInitConfig?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/screenvideotrackinitconfig.html), [withAudio?](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createscreenvideotrack)|  A hook that gives an object containg tracks ([audio](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ilocalaudiotrack.html) and [video](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ilocalvideotrack.html)) and a state variable `ready` which is set to true when the feeds are initialised | [AgoraRTC.createScreenVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html#createscreenvideotrack) |
+
+All methods take in the same parameters as the NG SDK. You can visit the official docs for each methods to know more.
+
+## Components
+
+### AgoraVideoPlayer
+This component lets you display a video track in the DOM.
+You can pass in the `videoTrack` as prop along with other props that get passed to the rendered div containing your video.
+#### ***Required Prop***
+videoTrack: [ILocalVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/ilocalvideotrack.html) | [IRemoteVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iremotevideotrack.html) | [ICameraVideoTrack](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/icameravideotrack.html)
+
+Example:
+```tsx
+<AgoraVideoPlayer videoTrack={track} className="video" key={key} style={{height: '100px'}} />
+```
+## Wrapper Functions Examples
+
+### createClient
+```tsx
+import React from "react";
+import { createClient } from "agora-rtc-react";
+
+const config = {mode: "rtc", codec: "vp8"}
+const useClient = createClient(config);
+
+const App = () => {
+  const client = useClient();
+
+  useEffect(() => {
+    client.join(appId, name, token, null);
+  }, [])
+
+  return (
+    <p>{client.uid}</p>
+  )
+}
+```
+
+### createMicrophoneAndCameraTracks
+```tsx
+import React from "react";
+import { createMicrophoneAndCameraTracks, AgoraVideoPlayer } from "agora-rtc-react";
+
+const useMicrophoneAndCameraTracks = createMicrophoneAndCameraTracks();
+
+const App = () => {
+  const { ready, tracks } = useMicrophoneAndCameraTracks();
+
+  return (
+    ready && <AgoraVideoPlayer videoTrack={tracks[1]} />
+  )
+}
+```
+All other create methods use a similar pattern.
+
+## Other AgoraRTC Methods
+
+For other RTC SDK methods you can directly use them from the [AgoraRTC](https://docs.agora.io/en/Video/API%20Reference/web_ng/interfaces/iagorartc.html) object. Look at the example using the wrapper for group videocall [here](example.md) to understand better.

dist/index.css

@@ -0,0 +1,9 @@
+/* add css module styles here (optional) */
+
+._3ybTi {
+  margin: 2em;
+  padding: 0.5em;
+  border: 2px solid #000;
+  font-size: 2em;
+  text-align: center;
+}

dist/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BufferSourceAudioTrackInitConfig, CameraVideoTrackInitConfig, ClientConfig, CustomAudioTrackInitConfig, CustomVideoTrackInitConfig, IAgoraRTCClient, IBufferSourceAudioTrack, ICameraVideoTrack, ILocalAudioTrack, ILocalVideoTrack, IMicrophoneAudioTrack, IRemoteVideoTrack, MicrophoneAudioTrackInitConfig, ScreenVideoTrackInitConfig } from 'agora-rtc-sdk-ng';
+export declare const createClient: (config: ClientConfig) => () => IAgoraRTCClient;
+export declare function createMicrophoneAndCameraTracks(audioConfig?: MicrophoneAudioTrackInitConfig | undefined, videoConfig?: CameraVideoTrackInitConfig | undefined): () => {
+    ready: boolean;
+    tracks: [IMicrophoneAudioTrack, ICameraVideoTrack] | null;
+};
+export declare function createBufferSourceAudioTrack(config: BufferSourceAudioTrackInitConfig): () => {
+    ready: boolean;
+    track: IBufferSourceAudioTrack | null;
+};
+export declare function createCameraVideoTrack(config?: CameraVideoTrackInitConfig): () => {
+    ready: boolean;
+    track: ICameraVideoTrack | null;
+};
+export declare function createCustomAudioTrack(config: CustomAudioTrackInitConfig): () => {
+    ready: boolean;
+    track: ILocalAudioTrack | null;
+};
+export declare function createCustomVideoTrack(config: CustomVideoTrackInitConfig): () => {
+    ready: boolean;
+    track: ILocalVideoTrack | null;
+};
+export declare function createMicrophoneAudioTrack(config?: MicrophoneAudioTrackInitConfig): () => {
+    ready: boolean;
+    track: IMicrophoneAudioTrack | null;
+};
+export declare function createScreenVideoTrack(config: ScreenVideoTrackInitConfig, withAudio?: 'enable' | 'disable' | 'auto'): () => {
+    ready: boolean;
+    tracks: ILocalVideoTrack | [ILocalVideoTrack, ILocalAudioTrack];
+};
+export declare const AgoraVideoPlayer: (props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    videoTrack: ILocalVideoTrack | IRemoteVideoTrack | ICameraVideoTrack;
+}) => JSX.Element;