React와 Jitsi로 화상회의 만들기!
이 결정의 배경에는 다음과 같은 확실한 이유가 있었습니다.
그래서 무엇보다도 우리는 도구에 대해 배우고 실제 응용 프로그램 내에서 이를 구현할 수 있는 방법을 배우기 위해 작은 PoC를 만들어야 했습니다. 웹용 Jitsi에 대한 추가 정보가 필요하면 저장소를 확인하십시오.
가장 먼저 해야 할 일은 Jitsi를 얻는 것입니다. 현재 공식 NPM 패키지가 없기 때문에 예전처럼 스크립트 태그를 사용해야 합니다. 성능상의 이유로 태그를 HTML 안에 넣지 않고 대신 React 컴포넌트 안에 넣습니다.
자, 손을 들어봅시다.
먼저 jitsi 인스턴스 변수 상태를 만듭니다.
그런 다음 구성 요소가 마운트될 때 스크립트를 추가해야 합니다.
<스크립트 아이디="gist-ltag"src="https://gist.github.com/gugadev/d70d25179357b521dd2cb46c2ea64123.js?file=b.tsx"/>
loadScript 함수는 본문에 스크립트를 삽입하고 스크립트가 로드된 후 해결될 약속을 반환합니다.
<스크립트 아이디="gist-ltag"src="https://gist.github.com/gugadev/d70d25179357b521dd2cb46c2ea64123.js?file=c.ts"/>
jitsi 스크립트가 로드되면 다음 매개변수를 사용하여 JitsiMeetExternalAPI 클래스를 인스턴스화해야 합니다.
<울>
예를 들어 roomName 및 displayName 를 사용할 것입니다. 첫 번째는 우리가 참여하려는 방의 이름이고 두 번째는 사용자의 마메입니다. 두 값 모두 소품으로 수신됩니다.
<스크립트 아이디="gist-ltag"src="https://gist.github.com/gugadev/d70d25179357b521dd2cb46c2ea64123.js?file=d.tsx"/>
parentNode 옵션은 Jitsi iframe을 삽입하는 데 사용할 요소를 알려줍니다. 따라서 반환하는 div도 제공했습니다.
마지막 단계는 JitsiMeetExternalAPI 인스턴스를 jitsi 변수 상태에 저장하고 구성 요소가 마운트 해제되면 인스턴스를 파괴하는 방법입니다.
<스크립트 아이디="gist-ltag"src="https://gist.github.com/gugadev/d70d25179357b521dd2cb46c2ea64123.js?file=e.tsx"/>
그런 다음 화상 회의에 참여하려면 회의실과 이름을 전달하는 구성 요소를 호출하기만 하면 됩니다.
<JitsiMeet roomName="MyRoonName" displayName="Gus" />
그게 다야! 아주 간단하죠? 이 코드가 작동하는지 확인하는 데모가 아래에 있습니다. https://meet.jit.si을 사용하여 모임을 만들고 구성 요소를 사용하여 연결해야 합니다 😜
<iframe src="https://codesandbox.io/embed/jitsi-react-demo-rmw0d"style="width:100%; height:calc(300px + 8vw); border:0; border-radius : 4px; 오버플로:숨김;"allow="geolocation; 마이크; 카메라; midi; vr; 가속도계; 자이로스코프; 지불; 주변광 센서; 암호화된 미디어; usb"loading="lazy"sandbox="allow-modals 허용 양식 허용 팝업 허용- 스크립트 allow-same-origin">
</iframe>
Reference
이 문제에 관하여(React와 Jitsi로 화상회의 만들기!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gugadev/making-videoconferences-with-react-and-jitsi-4en1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
