Ahead of continuing, make sure that your construction surroundings meets the next necessities:

• Video SDK Developer Account
• Fundamental working out of React
• React Video SDK
• Have Node and NPM put in to your instrument
• The fundamental working out of Hooks (useState, useRef, useEffect)
• React Context API (non-compulsory)

One will have to have a Video SDK account to generate tokens. Discuss with Video SDK dashboard to generate a token.

Observe the stairs to create the surroundings important so as to add video calls on your app.

Create a brand new React App the use of the under command

$ npx create-react-app videosdk-rtc-react-app

Set up the Video SDK the use of the below-mentioned npm command. You should definitely are on your react app listing earlier than you run this command.

$ npm set up "@videosdk.are living/react-sdk"

//For the Contributors Video
$ npm set up "react-player"

Your venture construction will have to seem like this after developing the app with create-react-app

root   
   ├── node_modules
   ├── public
   ├── src
   │    ├── api.js
   │    ├── App.js
   │    ├── App.css
   │    ├── index.js
   │    ├── index.js
   .    .

We’re going to use purposeful elements to leverage React’s reusable part structure. There shall be elements for customers, movies, and controls (mic, digital camera, depart) over the video.

The app will comprise a MeetingView part that comes with ParticipantView which can render the player’s title, video, audio, and so on. We can even have a Controls part, which can permit customers to accomplish operations like depart and toggle media.

We’re going to paintings on two recordsdata:

• API.js: Accountable for dealing with API calls, similar to producing distinctive meetingId and token
• App.js: Accountable for rendering MeetingView and sign up for the assembly.

To building up a wireframe of App.js, we’re going to use Video SDK Hooks and Context Suppliers. Video SDK supplies MeetingProvider, MeetingConsumer, useMeeting and useParticipant hooks. Let’s perceive each and every of them.

First, we will be able to discover Context Supplier and Client. Context is essentially used when some information must be available through many elements at other nesting ranges.

• MeetingProvider: This can be a Context Supplier. It accepts worth config and tokens as props. The Supplier part accepts a worth prop to be handed to eating elements which can be descendants of this Supplier. One Supplier may also be hooked up to many patrons. Suppliers may also be nested to override values deeper throughout the tree.
• MeetingConsumer: It’s Context Client. All customers which can be descendants of a Supplier will re-render every time the Supplier’s worth prop adjustments.
• useMeeting: It’s assembly React hook API for a gathering. It contains the entire data associated with the assembly, similar to members, streams, and so on.
• useParticipant: It’s player hook API. useParticipant hook is accountable for dealing with the entire occasions and props similar to at least one specific player, similar to sign up for, depart, mute, and so on.

Assembly Context is helping to hear the entire adjustments when a player joins a gathering or adjustments the Mic or Digital camera, and so on.

Let’s get began with converting a few traces of code in App.js.

import "./App.css";
import React, { useEffect, useRef, useState } from "react";
import {  MeetingProvider,  MeetingConsumer,  useMeeting,  useParticipant,
} from "@videosdk.are living/react-sdk";
import { authToken, createMeeting } from "./API";

serve as JoinScreen() {  go back null;
}

serve as VideoComponent(props) {  go back null;
}

serve as Controls(props) {  go back null;
}

serve as Container(props) {  go back null;
}

serve as App() {  const [meetingId, setMeetingId] = useState(null);
  const getMeetingAndToken = async (identification) => {    const meetingId =      identification == null ? anticipate createMeeting({ token: authToken }) : identification;    setMeetingId(meetingId);  };
  go back authToken && meetingId ? (    <MeetingProvider      config={{        meetingId,        micEnabled: true,        webcamEnabled: false,        title: "C.V. Raman",      }}      token={authToken}    >      <MeetingConsumer>        {() => <Container meetingId={meetingId} />}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

The sign up for display screen will paintings as a medium to both time table a brand new assembly or to sign up for an present assembly.

serve as JoinScreen({ getMeetingAndToken }) {  const [meetingId, setMeetingId] = useState(null);  const onClick = async () => {    anticipate getMeetingAndToken(meetingId);  };  go back (    <div>      <enter        sort="textual content"        placeholder="Input Assembly Identity"        onChange={(e) => {          setMeetingId(e.goal.worth);        }}      />
      <button onClick={onClick}>Sign up for</button>
      {" or "}      <button onClick={onClick}>Create Assembly</button>
    </div>
  );
}

The next move is to create MeetingView and Controls elements to control options similar to sign up for, depart, mute, and unmute.

serve as MeetingView(props) {  const [joined, setJoined] = useState(null);  //Get the process which shall be used to sign up for the assembly.  //We can additionally get the members checklist to show all members  const { sign up for, members } = useMeeting({    //callback for when assembly is joined effectively    onMeetingJoined: () => {      setJoined("JOINED");    },    //callback for when assembly is left    onMeetingLeft: () => {      props.onMeetingLeave();    },  });  const joinMeeting = () => {    setJoined("JOINING");    sign up for();  };
  go back (    <div className="container">      <h3>Assembly Identity: {props.meetingId}</h3>
      {joined && joined == "JOINED" ? (        <div>          <Controls />          //For rendering the entire members within the assembly          {[...participants.keys()].map((participantId) => (            <ParticipantView              participantId={participantId}              key={participantId}            />
          ))}        </div>
      ) : joined && joined == "JOINING" ? (        <p>Becoming a member of the assembly...</p>
      ) : (        <button onClick={joinMeeting}>Sign up for</button>
      )}    </div>
  );
}

Aside from that, a Keep watch over Part shall be required to take care of person movements.

serve as Controls() {  const { depart, toggleMic, toggleWebcam } = useMeeting();  go back (    <div>      <button onClick={depart}>Depart</button>
      <button onClick={toggleMic}>toggleMic</button>
      <button onClick={toggleWebcam}>toggleWebcam</button>
    </div>
  );
}

Ahead of enforcing the video part, We want to perceive a few ideas.

1. Forwarding Ref for Mic and Digital camera

Ref forwarding is a method for mechanically passing a ref thru an element to considered one of its kids. We’re going to use Refs to connect audio and video tracks with elements.

const webcamRef = useRef(null);
const micRef = useRef(null);

2. useParticipant Hook

useParticipant hook is accountable for dealing with the entire homes and occasions of 1 specific player who joined within the assembly. It’s going to take members as an issue.

const { webcamStream, micStream, webcamOn, micOn } = useParticipant(  props.participantId
);

3. MediaStream API

MediaStream turns out to be useful so as to add MediaTrack to the audio/video tag to play the audio or video.

const webcamRef = useRef(null);
const mediaStream = new MediaStream();
mediaStream.addTrack(webcamStream.monitor);

webcamRef.present.srcObject = mediaStream;
webcamRef.present  .play()  .catch((error) => console.error("videoElem.present.play() failed", error));

Now, let’s use a lot of these APIs to create ParticipantView

serve as ParticipantView(props) {  const micRef = useRef(null);  const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =    useParticipant(props.participantId);
  const videoStream = useMemo(() => {    if (webcamOn && webcamStream) {      const mediaStream = new MediaStream();      mediaStream.addTrack(webcamStream.monitor);      go back mediaStream;    }  }, [webcamStream, webcamOn]);
  useEffect(() => {    if (micRef.present) {      if (micOn && micStream) {        const mediaStream = new MediaStream();        mediaStream.addTrack(micStream.monitor);
        micRef.present.srcObject = mediaStream;        micRef.present          .play()          .catch((error) =>            console.error("videoElem.present.play() failed", error)          );      } else {        micRef.present.srcObject = null;      }    }  }, [micStream, micOn]);
  go back (    <div>      <p>        Player: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}        {micOn ? "ON" : "OFF"}      </p>
      <audio ref={micRef} autoPlay playsInline muted={isLocal} />
      {webcamOn && (        <ReactPlayer          //          playsinline // very very imp prop          pip={false}          gentle={false}          controls={false}          muted={true}          enjoying={true}          //          url={videoStream}          //          top={"300px"}          width={"300px"}          onError={(err) => {            console.log(err, "player video error");          }}        />
      )}    </div>
  );
}

We’re finished with the implementation of a custom designed video-calling app in React.js the use of Video SDK.