React 갈고리로 영상 채팅 응용 프로그램 구축
44308 단어 webdevreactshowdevjavascript
업데이트 1-2021년 12월 28일: 새로운 비디오 시리즈 참조
Video SDK React JS SDK는 실시간 화상 회의 애플리케이션 구축을 단순화합니다.Video SDK 프로세싱은 모든 브라우저와 호환되며 참가자 5000명까지 확장할 수 있으며 지연 시간이 적습니다.
Video SDK RTC React JS 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를 제공합니다.배경컨슈머 기구 연결 스크린
화면에 가입하는 것부터 사용자가 회의를 만들 수도 있고 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();
하나씩 하나씩 실행해 봅시다.useMeeting
hook은 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를 호출하는 방법입니다.또한 공식 예제 를 참고하여 이 응용 프로그램을 확장하고 놀라운 많은 기능을 제공할 수 있습니다.
너는 이 기본적인 비디오 채팅 프로그램을 사용할 수 있으며, 실시간 오디오/비디오 흐름을 위해 몇 줄의 코드를 변경할 수 있다.
Reference
이 문제에 관하여(React 갈고리로 영상 채팅 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/videosdk/build-video-calling-app-using-react-hooks-1a79텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)