React 갈고리로 영상 채팅 응용 프로그램 구축

Tt는 API가 있는 기능 구성 요소를 쉽게 사용할 수 있습니다.이 강좌에서 우리는 RTC React Video SDKreactjs에서 영상 통화 프로그램을 구축할 것이다.
업데이트 1-2021년 12월 28일: 새로운 비디오 시리즈 참조
Video SDK React JS SDK는 실시간 화상 회의 애플리케이션 구축을 단순화합니다.Video SDK 프로세싱은 모든 브라우저와 호환되며 참가자 5000명까지 확장할 수 있으며 지연 시간이 적습니다.
Video SDK RTC React JS SDK는

월 무료 10000분

코드가 완전히 낮으며 서버가 없습니다.

라이브 오디오, 비디오 및 데이터 스트림이 있는 비디오 API

참가자 5000명 이상 지원

리치 미디어 채팅을 지원합니다.

HD 및 풀 HD 화면 공유

회의 중 실시간 비디오 재생

를 페이스북, 유튜브 등 소셜미디어(RTMP out 지원)에 연결했다.

스마트 스피커 스위치

화상 회의 기록

필요에 따라 사용자 인터페이스를 사용자 정의합니다.

인덱스

비디오 SDK에 계정 생성

설치 서버

프로젝트 구조

코드 작성 시작

1. 비디오 SDK에 계정 만들기

videosdk.live에서 프로젝트 시작

프로젝트 시작 버튼으로 이동하여 Google 계정 또는 Github을 사용하여 자신을 등록합니다.

선결 조건

Node >= 10.16
Npm >= 5.6
React ≥ 16.8

2. 서버 설치

서버는 JWT 토큰을 통해 인증을 수행해야 합니다.공식Node JS 서버 예제를 사용하겠습니다.

다음 저장소를 복제하고 서버를 실행합니다.

$ git clone https://github.com/videosdk-live/videosdk-rtc-nodejs-sdk-example
$ cd nodejs

주의: 같은 리포에서 다른 백엔드 언어의 예시를 찾을 수 있습니다.
Node JS Server Setup Guide에 따라 서버를 실행합니다.

3. 프로젝트 구조

프로젝트 템플릿이나 다른 react 템플릿을 생성할 수 있습니다.

반응 스크립트 Create react 응용 프로그램을 사용하여 새 프로젝트 만들기

npx create-react-app videosdk-react-app-v1

이것이 바로 당신의 항목 디렉터리의 외관입니다

.
├── node_modules
├── public
├── .env
├── src
│ └── api.js
│ └── App.jsx
│ └── index.css
│ └── index.jsx
├── package.json
...
.

환경 변수 구성

코드를 작성하기 전에 .env 변수를 설정하십시오.
에반 선생

REACT_APP_SERVER_URL="http://localhost:9000"

참고: 프로덕션 환경의 경우 서버를 호스팅하고 URL을 변경해야 합니다.

공식 React JS 패키지 설치

다른 작업을 시작하기 전에 비디오sdk를 설치합니다.

yarn add @videosdk.live/react-sdk

4. 코드 작성 시작

먼저 API 호출을 설정한 다음 코드 작성을 시작합니다.

API 를 호출하여 인증 토큰과 회의 ID 생성

우리는 api.js부터 코드를 작성하기 시작할 것이다.회의를 시작하기 전에 인증 token 및 meetingId를 생성해야 합니다.
응용 프로그램 프로그래밍 인터페이스.js

const API_BASE_URL = process.env.REACT_APP_SERVER_URL;

// API call to generate authentication token
export const getToken = async () => {
  const res = await fetch(`${API_BASE_URL}/get-token`, {
    method: "GET",
  });

  const { token } = await res.json();
  return token;
};

// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`${API_BASE_URL}/create-meeting`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token }),
  });

  const { meetingId } = await res.json();
  return meetingId;
};

적용부터 시작합니다.jsx

우선 영상 통화 보기를 사용하기 전에 영패 생성과 meetingId 논리를 설정합니다.
응용 프로그램 구성 요소

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useRef, useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
  useMeeting,
  useParticipant,
} from "@videosdk.live/react-sdk";
import { getToken, validateMeeting, createMeeting } from "./api";

function MeetingGrid() {
  return <h1>Meeting Grid</h1>
}

function JoinScreen() {
  return <h1>Join Screen</h1>
}

function ParticipantView(props){
  return <h1>Participant View</h1>
}

function App() {
  const [token, setToken] = useState(null);
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingAndToken = async () => {
    const token = await getToken();
    const meetingId = await createMeeting({ token });

    setToken(token);
    setMeetingId(meetingId);
  };

  useEffect(getMeetingAndToken, []);
  return token && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: false,
        name: "Participant Name",
      }}
      token={token}
    >
      <MeetingConsumer>
        {() => <MeetingGrid />}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen />
  );
}

export default App;

React JS SDK는 다음과 같은 두 가지 중요한 갈고리 API를 제공합니다.

회의 사용: 회의 환경을 처리한다.

사용 참여자: 처리 책임

또한 공급업체와 소비자가 회의 환경의 변화에 귀를 기울일 수 있도록 한다.

MeetingProvider:MeetingProvider 는 구성 요소를 사용하여 회의 변경 사항을 구독할 수 있습니다.

Meeting Consumer: Meeting Consumer는 구독 회의 변경Context.Provider입니다.

배경컨슈머 기구 연결 스크린

화면에 가입하는 것부터 사용자가 회의를 만들 수도 있고 meetingId로 가입할 수도 있습니다.
두 가지 간단한 기능이 포함되어 있습니다.

새 모임 만들기

회의 참가

연결 화면 구성 요소

function JoinScreen() {
  <div>
    <input type="text" placeholder="Enter Meeting Id" onChange={(e) => {setMeetingId(e.target.value)}}  />
    <button  onClick={getMeetingAndToken}>
      Join
    </button>
    <button  onClick={getMeetingAndToken}>
      Create Meeting
    </button>
  </div>
}

회의 격자 구현

회의 격자에는 전체 회의 인터페이스가 포함될 것이다.다음과 같은 책임이 있습니다.

마이크 켜기 및 끄기

웹캠 켜기 및 끄기

참가자 보기

const {
   join, 
   leave,  
   toggleMic,
   toggleWebcam,
   toggleScreenShare
} = useMeeting();

하나씩 하나씩 실행해 봅시다.useMeetinghook은 join,leave,toggleMic 등의 조작을 도와줍니다.
회의 격자 구성 요소

// Helper function for participant loop.
const chunk = (arr) => {
  const newArr = [];
  while (arr.length) newArr.push(arr.splice(0, 3));
  return newArr;
};

function MeetingGrid(props) {
  const [joined, setJoined] = useState(false)
  const {
    join, 
    leave,  
    toggleMic,
    toggleWebcam,
    toggleScreenShare
  } = useMeeting()
  const { participants } = useMeeting();
  const joinMeeting = () => {
    setJoined(true)
    join()
  }
  return (
    <div>
      <header>Meeting Id: {props.meetingId}</header>
      {joined ? 
      (
        <div >
          <button  onClick={leave}>
            Leave
          </button>
          <button  onClick={toggleMic}>
            toggleMic
          </button>
          <button  onClick={toggleWebcam}>
            toggleWebcam
          </button>
          <button  onClick={toggleScreenShare}>
            toggleScreenShare
          </button> 
        </div>
      ) 
      : (<button  onClick={joinMeeting}>
        Join
      </button>)}
      <div
        className="wrapper"
      >
        {chunk([...participants.keys()]).map((k) => (
          <div className="box" key={k} style={{ display: "flex" }}>
            {k.map((l) => (
              <ParticipantView key={l} participantId={l} />
            ))}
          </div>
        ))}
      </div>

    </div>
  )
}

참여자 뷰 구현

참여자 격자를 실현하기 위해 우리는 react-simple-flex-grid을 사용할 것이다.이것은 영상 격자를 유지하는 데 도움이 될 것이다.
이 가방을 먼저 추가합시다.

yarn add react-simple-flex-grid

응용 프로그램 구성 요소에서 간단한 flex 격자 가져오기

import { Row, Col } from 'react-simple-flex-grid';
import "react-simple-flex-grid/lib/main.css";

참여자 보기에는 다음과 같은 세 가지 주요 기능이 포함됩니다.

웹캠 활성화/비활성화

마이크 사용/비활성화

당신의 화면을 공유합니다.

우리 하나하나 토론해 봅시다.시작하기 전에, 우리는 useRef 오디오, 동영상, 화면 공유 요소를 알아야 한다

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

이외에도 useParticipant 연결은 마이크, 웹캠, 화면 공유를 처리할 수 있도록 도와줍니다.

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

스트림을 얻은 후 MediaStream API를 사용하여 추적을 추가할 수 있습니다.예를 들어, 웹캠에 대한 참조를 추가하려면 아래 코드를 확인하십시오.

 const mediaStream = new MediaStream();
 mediaStream.addTrack(webcamStream.track);

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

구성 요소의 마운트 상태에 인용을 추가하면
ParticipantView 구성 요소

function ParticipantView(props) {
  const webcamRef = useRef(null);
  const micRef = useRef(null);
  const screenShareRef = useRef(null);

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

  useEffect(() => {
    if (webcamRef.current) {
      if (webcamOn) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(webcamStream.track);

        webcamRef.current.srcObject = mediaStream;
        webcamRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        webcamRef.current.srcObject = null;
      }
    }
  }, [webcamStream, webcamOn]);

  useEffect(() => {
    if (micRef.current) {
      if (micOn) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(micStream.track);

        micRef.current.srcObject = mediaStream;
        micRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        micRef.current.srcObject = null;
      }
    }
  }, [micStream, micOn]);

  useEffect(() => {
    if (screenShareRef.current) {
      if (screenShareOn) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(screenShareStream.track);

        screenShareRef.current.srcObject = mediaStream;
        screenShareRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        screenShareRef.current.srcObject = null;
      }
    }
  }, [screenShareStream, screenShareOn]);


  return (
    <div key={props.participantId} >
      <audio ref={micRef} autoPlay />
      {webcamRef ||  micOn ? (<div>
      <h2>{displayName}</h2>
      <video
        height={"100%"}
        width={"100%"}
        ref={webcamRef}
        autoPlay
      />
      </div>) : null }
      {screenShareOn ? (
      <div>
        <h2>Screen Shared</h2>
        <video
          height={"100%"}
          width={"100%"}
          ref={screenShareRef}
          autoPlay
        />
      </div>) : null }
      <br/>
      <span>Mic:{micOn ? "Yes": "No"}, Camera: {webcamOn ? "Yes" : "No"}, Screen Share: {screenShareOn ? "Yes" : "No"}</span>
    </div>
  );
}

공식 가이드 를 참조하면 클라우드 레코드, 채팅, 화이트보드, 소셜 미디어 라이브 방송 등 다양한 기능을 사용할 수 있습니다.
전체 코드 찾기 Video SDK
videosdk-react-sdk-tutorial-example

결론

이것이 바로 우리가 어떻게 React JS 갈고리 통합 영상을 사용하여 API를 호출하는 방법입니다.또한 공식 예제 를 참고하여 이 응용 프로그램을 확장하고 놀라운 많은 기능을 제공할 수 있습니다.
너는 이 기본적인 비디오 채팅 프로그램을 사용할 수 있으며, 실시간 오디오/비디오 흐름을 위해 몇 줄의 코드를 변경할 수 있다.