rajansurani

const ParticipantView = ({ participantId }) => {
  //...useParticipant hook
  //...mic stream setup
  const mediaStream = useMemo(() => {
    if (webcamOn) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(webcamStream.track);
      return mediaStream;
    }
  }, [webcamStream, webcamOn]);

rajansurani

const ParticipantView = ({ participantId }) => {
  //...useParticipant hook
  const micRef = useRef(null);
  useEffect(() => {
    if (micRef.current) {
      if (micOn) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(micStream.track);
        micRef.current.srcObject = mediaStream;
        micRef.current

rajansurani

const ParticipantView = ({ participantId }) => {
  const {
    displayName,
    participant,
    webcamStream,
    micStream,
    webcamOn,
    micOn,
    isLocal,
  } = useParticipant(participantId);

rajansurani

const ParticipantView = ({ participantId }) => {
  return <div className="participant-view"></div>;
};

rajansurani

//...function App(){}
//This function will accumulate the list of particiapnts and generate the ParticipantView for each participant in the meeting
const ParticipantsView = () => {
  //Get the list of participants
  const { participants } = useMeeting();
  return (
    <>
      <h2 style={{ color: "#3E84F6" }}>Participants</h2>
      <div
        style={{

rajansurani

//...function App(){}
const MeetingView = ({ onMeetingLeave }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column"
      }}
    >
      <div>

rajansurani

//...function App(){}
const MeetingView = ({ onMeetingLeave }) => {
  function onParticipantJoined(participant) {
    console.log(" onParticipantJoined", participant);
  }
  function onParticipantLeft(participant) {
    console.log(" onParticipantLeft", participant);
  }
  function onMeetingJoined() {
    console.log("onMeetingJoined");

rajansurani

//Replace your sampleToken from the VideoSDK dashboard here
const sampleToken = "";
export const getToken = () => {
  return sampleToken;
};
const getMeetingId = async ({ token }) => {
  try {
    const VIDEOSDK_API_ENDPOINT = "https://api.videosdk.live/v1/meetings";
    const options = {
      method: "POST",

rajansurani

function App() {
  //This state will contain the meeting id after generating one or adding in the textfield
  const [meetingId, setMeetingId] = useState();
  const [token, setToken] = useState();
  //Initializing the token on page load
  useEffect(() => {
    setToken(getToken());
  }, []);
  //...return method
}

rajansurani

function App() {
  function JoinScreen(){
    return <>
      <button onClick={async () => setMeetingId( await getMeetingId({ token }))} className="button">Create Meeting</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" id="meetingId" name="meetingId" placeholder='Enter MeetingId'/>&nbsp;
      <button onClick={() => {
        if(!document.getElementById("meetingId").value){
          alert("Meeting Id is required");
          return;