Factory Method | Parameters (? = optional) | Return Value | Reference |
---|---|---|---|
createClient | ClientConfig | A hook that gives a client object | AgoraRTC.createClient |
createMicrophoneAndCameraTracks | AudioConfig?, VideoConfig? | A hook that gives an object containg tracks (microphone and camera) and a state variable ready which is set to true when the feeds are initialised |
createMicrophoneAndCameraTracks |
createBufferSourceAudioTrack | BufferSourceAudioTrackInitConfig | A hook that gives an object containg the audio track and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createBufferSourceAudioTrack |
createCameraVideoTrack | CameraVideoTrackInitConfig? | A hook that gives an object containg the camera video track and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createCameraVideoTrack |
createCustomAudioTrack | CustomAudioTrackInitConfig | A hook that gives an object containg the custom audio track and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createCustomAudioTrack |
createCustomVideoTrack | CustomVideoTrackInitConfig | A hook that gives an object containg the custom video track and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createCustomVideoTrack |
createMicrophoneAudioTrack | MicrophoneAudioTrackInitConfig? | A hook that gives an object containg the microphone audio track and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createMicrophoneAudioTrack |
createScreenVideoTrack | ScreenVideoTrackInitConfig?, withAudio? | A hook that gives an object containg tracks (audio and video) and a state variable ready which is set to true when the feeds are initialised |
AgoraRTC.createScreenVideoTrack |
All methods take in the same parameters as the NG SDK. You can visit the official docs for each methods to know more.
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.
Note: You need to pass in the height & width for the video player using the style prop (or className/id) which is applied to the resultant div containig the video, otherwise the renderd div is of size 0px.
videoTrack: ILocalVideoTrack | IRemoteVideoTrack | ICameraVideoTrack
Example:
<AgoraVideoPlayer videoTrack={track} className="video" key={key} style={{height: '100%', width: '100%'}} />
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>
)
}
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]} style={{height: '100%', width: '100%'}} />
)
}
All other create methods use a similar pattern.
For other RTC SDK methods you can directly use them from the AgoraRTC object. Look at the example using the wrapper for group videocall here to understand better.