Reactjs, Vue.js, Angular.js를 사용하여 iframe에서 BigBlueButton 실행하기

Big Blue Meeting Cloud Hosting, Dedicated Server 및 Dedicated Private Cloud는 iframe에 BigBlueButton 포함을 지원합니다.

BigBlueButton 3.0을 iframe에 삽입하는 방법

클라우드 호스팅 서비스를 이용하시는 경우, 별도의 설정 없이 API 키를 바로 사용하실 수 있습니다.

다른 호스팅 옵션을 사용 중인 경우, 저희 지원팀에 문의해 주세요. iframe 삽입을 활성화하기 위해 서버 설정을 약간 변경해야 합니다.

애플리케이션 개발 중에 통합 기능을 테스트하기 위해 무료 체험 계정에 가입할 수도 있습니다.

SSL이 필요합니다

너의 <iframe> WebRTC 기능은 HTTPS(SSL/TLS)를 통해 제공되는 웹사이트에서 호스팅되어야 합니다. 웹캠, 마이크, 화면 공유와 같은 WebRTC 기능은 보안 환경을 필요로 합니다. 웹사이트가 SSL로 호스팅되지 않으면 사용자는 필요한 권한을 부여할 수 없습니다.

allowRequestsWithoutSession을 활성화합니다.

회의를 만들 때는 다음 사항을 설정해야 합니다. allowRequestsWithoutSession 에 매개 변수 true.

이 매개변수를 사용하면 사용자가 세션 쿠키 유효성 검사 없이 회의에 참여할 수 있습니다. 세션 쿠키 유효성 검사는 사용자가 iframe 내에 로드된 API 생성 참여 URL을 통해 참여할 때 필요합니다.

해당 매개변수는 BigBlueButton 2.4.3 버전에 추가되었으며 기본값은 다음과 같습니다. false이 매개변수를 생략하거나 그대로 두면 false사용자는 내장된 iframe을 통해 회의에 참여하지 못할 수 있습니다.

iframe용 조인 URL을 생성합니다.

회의를 만들려면 다음을 사용하세요. create API 호출 및 포함 allowRequestsWithoutSession=true.
회의가 시작될 때까지 약 5초 정도 기다리거나, 폴링하세요. getMeetingInfo 회의가 가능해질 때까지 API 엔드포인트를 사용하세요.
회의가 시작되는 동안 로딩 화면을 표시합니다.
다음을 사용하여 참여 URL을 생성합니다. join API 호출.
생성된 참여 URL을 사용하세요. src iframe의 속성입니다.

중대한

회의 생성 직후 참가 URL을 생성할 수 있지만, iframe을 표시하기 전에 회의가 준비될 때까지 기다려야 합니다. iframe을 너무 일찍 로드하면 오류 페이지가 표시될 수 있습니다.

Vue.js, React, Angular는 각각 iframe을 렌더링하는 고유한 방법을 제공합니다. 구현 세부 사항은 해당 프레임워크의 문서를 참조하세요.

iframe 권한을 올바르게 설정하세요

The allow 카메라, 마이크 및 화면 공유 기능을 활성화하려면 속성을 아래와 같이 정확하게 구성해야 합니다.

<iframe
 src="https://manager.bigbluemeeting.com/bigbluebutton/api/join?..."
 width="100%"
 height="700"
 allow="camera *; microphone *; display-capture *;"
 allowfullscreen
></iframe>

올바르게 설정되면 iframe은 사용자를 자동으로 회의에 참여시킵니다.