BigBlueButton 화상회의

이 플러그인은 Discourse 인스턴스를 온라인 학습을 위해 설계된 오픈 소스 영상 회의 도구인 BigBlueButton과 통합합니다. 이 플러그인을 사용하려면 BBB 인스턴스가 실행 중인 서버가 필요하며, 자세한 내용은 http://docs.bigbluebutton.org 에서 확인하세요. Zoom, Jitsi, Whereby와 비교했을 때 BigBlueButton은 브라우저 지원이 더 우수합니다. 저의 테스트 결과 iOS의 Safari와 Android의 Chrome을 포함한 모든 최신 브라우저에서 즉시 정상 작동했습니다.

스크린샷


토픽이나 게시물에 영상 회의를 추가하려면 작성 시 옵션 드롭다운에서 “BigBlueButton 추가” 버튼을 사용하세요:

기능

  • 여러 회의실 지원
  • 스태프 사용자와 설정 가능한 그룹의 사용자는 BBB 회의에서 모더레이터로 인식됨
  • 관리자는 Discourse에 회의를 임베드(iframe)하거나 전체 페이지로 리디렉션할 수 있으며(모바일과 데스크톱 각각 별도 옵션 제공) 선택 가능
  • 참가 버튼 옆에 이미 영상 회의에 참여한 사용자의 아바타 표시

참고

BigBlueButton을 알려주었고 플러그인의 초기 버전 테스트와 피드백을 제공해 주신 @Stephen에게 감사드립니다.

41개의 좋아요

정말 놀라운 성과입니다. 이곳에는 BBB를 활용하는 교육 기관이 정말 많고, 이번 통합의 타이밍은 완벽합니다.

15개의 좋아요

매우 적시적회입니다. 우리는 새로 설립된 인터랙티브 웹 세미나의 화면으로 openmod 포럼을 활용하고 있으며, 웹 세미나 URL을 비공개 주제에서만 홍보하는 방식으로 운영하고 있습니다. 완벽하지는 않지만, 포럼 커뮤니티를 깨끗하게 유지하기 위해 최선을 다하고 있습니다. 따라서 이러한 발전에 매우 관심이 많습니다. @pmusaraj: 감사합니다!

4개의 좋아요

현재 이 어려운 시기에 제가 돕고 있는 자원봉사 단체 세 곳 모두 BigBlueButton으로 전환했습니다.

그 전환에 크게 기여한 것이 바로 이 플러그인이었습니다. Discourse 주제에서 회의실로의 전환이 완벽하게 매끄럽게 이루어지고 있으며, 평소 겪던 문제들이 전혀 발생하지 않고 있습니다.

기술 지원 역할을 하지 않아도 되니 제 일이 1000배나 더 쉬워졌습니다.

다시 한번 @pmusaraj님께 감사드립니다!

9개의 좋아요

이 작업을 해주셔서 정말 감사합니다. 테스트해 보니 아주 잘 작동합니다.

하지만 사용을 더 쉽게 만들 수 있도록 몇 가지 제안을 드리고자 합니다. 포럼 스태프가 BigBlueButton의 내부 구조에 대해 잘 알지 못하고, BigBlueButton의 인터페이스(그린라이트)를 사용하여 방을 만든 경험이 전부인 상황을 가정해 보았습니다.

그렇다면, 다음과 같은 제안을 드립니다:

  1. 원본 게시물에서 “회의 시작” 버튼을 만드는 방법을 설명하세요
    설치 후 BigBlueButton 버튼을 추가하려면 텍스트 편집기의 “옵션”(톱니바퀴 아이콘)을 통해 해야 한다는 것을 파악하는 데 꽤 오랜 시간이 걸렸습니다. 사용 설명서에 이 부분을 언급하면 혼란을 줄일 수 있을 것입니다.

  2. 비밀번호 생성을 더 쉽게 만드세요

    • 무작위 비밀번호 생성 버튼: 누구나 알다시피 사람들은 게을러서 대충 비밀번호를 설정하는 경향이 있습니다. 따라서 사용자에게 실제로는 더 안전하지만 더 게으른 옵션을 제공할 수 있습니다.
    • 비밀번호를 "(선택 사항)"으로 표시 (대안)하고, 설정하지 않으면 무작위 비밀번호를 생성합니다. 하지만 대신 무작위 비밀번호가 생성된다는 점을 사용자에게 노트로 안내해야 합니다.
  3. 비밀번호 옵션을 “고급” 설정에 숨기는 것을 고려하세요
    대부분의 사용자는 다른 애플리케이션으로 만든 방과 연결하는 것이 아니라 discourse 내에서 방을 만들고 싶어 할 것이므로, 이 옵션들은 숨겨도 될 것 같습니다.

  4. 기술 용어를 언급하지 마세요

  • discourse가 항상 iframe을 언급하는 것을 알지만, 일반 사용자는 그것이 무엇인지 모릅니다. 라벨을 "게시물 내부에 표시"로 변경하면 더 명확해질 것입니다.
  • Meeting ID는 BigBlueButton의 전문 용어입니다. 대부분의 사용자에게는 "회의 이름"이 더 좋을 것 같습니다. 그리고 아래에 회색으로 "회의 ID"임을 설명하는 지침을 추가하는 것도 좋습니다.

아래 이미지는 아래에 설명된 일부 "기능"을 보여줍니다. (기능은 없는 목업입니다)

하지만 다시 한번 말씀드리자면, 특히 교육 분야에서 일하는 사람들에게 매우 유용한 플러그인입니다. 다시 한번 감사합니다!

6개의 좋아요

BigBlueButton에 이 통합이 그들의 웹사이트(BigBlueButton LMS Integrations | Designed for Schools | BigBlueButton)에 등재될 수 있는지 확인하기 위해 이메일을 보냈습니다.

업데이트가 있으면 여기에 공유하겠습니다.

2개의 좋아요

피드백을 남겨주셔서 감사합니다 @core (그리고 홍보도 감사드립니다). 게시글에서 제안하신 세심한 사항들 중 일부는 구현했습니다.

비밀번호 생성은 이제 무작위로 이루어지며 사용자에게 숨겨집니다. (고급 사용자는 마크다운을 수정하여 원할 경우 비밀번호를 변경할 수 있습니다.) 또한 옵션 메뉴에서 해당 버튼에 접근하는 방법에 대한 설명과 스크린샷을 포함하여 원글(OP)도 업데이트했습니다.

이 변경은 하지 않을 예정입니다. iframe이 기술 용어라는 것은 알지만, 이 경우 변경하는 것이 도움이 되지 않는다고 생각합니다. 오히려 "게시글 안에"라고 하는 것이 더 혼란을 줄 수 있다고 봅니다. 다만… 자신의 인스턴스에서는 Customize > Text에서 "bbb.modal"로 필터링하여 이 라벨을 직접 커스터마이즈할 수 있습니다. 아래 스크린샷과 같습니다:

5개의 좋아요

제 생각엔 당신의 해결책이 완벽해 보입니다. 미니멀리즘이 정말 큰 차이를 만들더라고요. 시간 내주셔서 감사합니다 :slight_smile:

훌륭한 절충안입니다. 감사합니다!

1개의 좋아요

@pmusaraj 아직 BBB 웹사이트에 discourse 플러그인을 추가하는 것에 대한 답변이 없습니다. 앞으로 며칠 안에 그들의 메일링리스트에서 한번 시도해볼 생각입니다.

1개의 좋아요

@pmusaraj 메일링리스트 가입 요청이 거부되었습니다(이유는 모르겠어요). 그래서 통합 관련해서 그들에게 연락할 방법을 거의 찾지 못하고 있어요. GitHub 이슈를 여는 것도 생각해 봤지만, BBB 코드베이스와 관련이 없는 문제라 꽤 귀찮게 될 수 있을 것 같더라고요.


수정: 이 글은 bigbluebutton-users 목록에 게시해야 하는 것이었던 것 같습니다. 그래서 거부된 것이었네요.

1개의 좋아요

설명문에 있는 지침을 따르셨나요? 님의 통합을 확인했으며, 제가 본 유사한 사례 목록에 추가하고 있습니다. 문서에 커뮤니티 페이지를 만들어서 우리가 만든 것들을 공유할 수 있도록 할 계획입니다.

2개의 좋아요

그 부분을 놓치고 있었습니다. 죄송합니다. 하지만 어쨌든 기여자들에게 전달된 걸 보니 다행입니다! 확인해 주셔서 감사합니다!

훌륭한 플러그인입니다, 감사합니다!
기존 회의(다른 도구로 계획된 회의)를 여는 방법은 무엇인가요? 회의 ID를 어떻게 확인할 수 있나요? 이 필드에 아무 내용을 입력해도 항상 새로운 회의가 시작됩니다.

이것은 BBB에 대한 질문에 더 가깝지만, 이론적으로 다른 도구와 동일한 방 ID를 사용하면 동일한 회의가 로드되어야 합니다.

1개의 좋아요

한 번 해본 적이 있지만, 조금 복잡했습니다. BBB API를 사용해야 합니다.

몇 일 안에 이에 대한 가이드를 작성해 보겠습니다.

핵심 문제는 가장 많이 사용되는 도구(Greenlight)가 이러한 저수준 정보를 실제로 표시하지 않는다는 점일 수 있습니다.

3개의 좋아요

고마워요, 정말 좋겠어요!

1개의 좋아요

기존 회의에 “BigBlueButton 추가”

이 플러그인은 “BigBlueButton 추가” 버튼을 클릭하면 자동으로 방을 생성해 줍니다. 하지만 이 플러그인을 설치하기 전에 미리 생성해 둔 기존 방을 사용하고 싶을 수 있습니다. 그렇게 하고 싶은 두 가지 예시를 소개합니다.

  • 이미 방을 생성한 경우 - (예: greenlight를 사용하여) 방을 만들었고, 사람들이 discourse에서도 참여할 수 있도록 허용하고 싶은 경우

  • 링크를 통한 참여도 허용하는 경우 - greenlight(기본 프론트엔드)를 사용하면 통화에 참여할 수 있는 공유 링크가 생성됩니다. 이를 통해 사람들은 discourse를 통해서든 링크를 통해서든 참여할 수 있습니다.

:warning: 이 과정은 시스템에 상당한 영향을 미치므로, 자신이 무엇을 하고 있는지 반드시 정확히 이해했는지 확인하십시오

설명서

사용 중인 프론트엔드(greenlight?)는 회의 ID나 attendeePW와 같은 낮은 수준의 정보를 제공하지 않을 가능성이 높습니다. (참고: attendeePW는 방의 액세스 코드와 다릅니다. 혼동하기 쉽지만요.) 따라서 이러한 정보를 얻기 위해 BBB API를 사용하여 모든 회의 정보를 나열해야 합니다.

참고: 더 나은 방법이 있을 수 있지만, 저에게는 알려져 있지 않습니다. 만약 더 나은 방법이 있다면 알려 주십시오.

선행 조건

  • BBB 서버에 터미널 접근 권한 (예: ssh를 통해)
  • 기본적인 python 지식 (제 코드를 검증하기 위해)
  • BBB API 사용 시 보안 위험에 대한 이해

1. BBB 시크릿과 API 엔드포인트 획득

BBB 서버가 실행 중인 셸(ssh를 통해)에 접근하여 다음을 실행합니다.

sudo bbb-conf --secret

이렇게 하면 URL과 Secret이 표시됩니다. 이 값들은 나중에 유용하게 사용됩니다.

:warning: 이 시크릿을 가진 사람은 서버에 해로운 행위를 할 수 있습니다. 따라서 안전하게 보관하십시오.

2. 회의 정보를 가져오기 위한 python3 스크립트 생성

아래는 1단계에서 제공된 URL과 Secret을 받아 회의 정보를 가져오기 위한 API를 생성하는 간단한 python 3 스크립트입니다:

:warning: 인터넷에서 찾은 임의의 스크립트(이 스크립트도 포함)를 그대로 붙여 넣지 마십시오. 내용을 확인하고 합리적으로 보이는지, 필요할 경우 API 문서를 참고하십시오.

import hashlib
from urllib.parse import urljoin

# 여기에 변수를 입력하세요
base_url = "PASTE_HERE_YOUR_URL" + "api/"
secret = "PASTE_HERE_YOUR_SECRET"

# 보안 체크섬 생성
plaintext = "getMeetings" + secret
sha1 = hashlib.sha1()
sha1.update(plaintext.encode('utf-8'))
checksum = sha1.hexdigest()

# 회의 정보 나열을 위한 API url 획득
url = urljoin(base_url, "getMeetings?checksum=" + checksum)
print("open the following URL to see the meeting's information")
print(url)

PASTE_HERE_YOUR_URL을 이전에 획득한 API URL로, PASTE_HERE_YOUR_SECRET을 시크릿으로 교체한 후 스크립트를 실행합니다.

실행 후 다음과 같은 url이 출력되어야 합니다: https://example.com/bigbluebutton/api/getMeetings?checksum=20e928e8928e8e9f919928e829d999df82882818

:warning: 이 URL을 가진 사람은 해로운 행위를 할 수 있습니다!

그들은 현재 진행 중인 모든 회의, 각 회의에 있는 사용자 수, 그리고 회의에 참여하기 위한 자격 증명을 확인할 수 있습니다.

3. URL 열기

위 경고에 따라 브라우저 히스토리에 URL이 저장되지 않도록 비공개 브라우저 모드에서 열어야 합니다.

추가하려는 회의를 시작하고 API URL이 포함된 페이지를 새로고침하십시오. 그러면 다음과 같은 내용을 볼 수 있어야 합니다.

<response>
<returncode>SUCCESS</returncode>
<meetings>
<meeting>
<meetingName>Your room name</meetingName>
<meetingID>XXXXXXXXXXXXXXXXXXXXXXXXXXX</meetingID>
...
<attendeePW>YYYYYYY</attendeePW>
<moderatorPW>ZZZZZZZ</moderatorPW>
...

원하는 회의 아래 줄을 찾아 다음 값을 기록하십시오:

  • meetingID
  • attendeePW
  • moderatorPW

이 값들을 획득한 후, 모든 파일을 삭제하고 API에 접근할 수 있는 모든 탭을 닫으십시오.
보안 사고를 원하지 않으므로!

4. 게시글에 “BigBlueButton 추가”

일반적인 “BigBlueButton 추가” 인터페이스를 통해 추가하는 대신, 게시글에 다음을 붙여 넣으십시오:

[wrap=discourse-bbb meetingID="XXXXX" attendeePW="YYYYY" moderatorPW="ZZZZZ"  mobileIframe="false" desktopIframe="false"][/wrap] 

그리고 3단계에서 획득한 값으로 교체하십시오.

  • XXXXX는 meetingID 내용으로
  • YYYYY는 atendeePW 내용으로
  • ZZZZZZ는 moderatorPW 내용으로

그리고 게시글을 저장하십시오.

6. 이제 작동해야 합니다 \o/

이제 discourse와 이전에 사용하던 다른 프론트엔드 모두에서 참여할 수 있어야 합니다. greenlight를 사용했다면, 이제 링크를 통해서도 참여할 수 있습니다.

3개의 좋아요

안녕하세요,

플러그인 정말 잘 만드셨네요! 정말 마음에 듭니다!

아직 개선이 필요한 몇 가지 사항을 발견해서 여기에 기록해 둡니다:

  1. 화면 공유가 작동하지 않습니다.
    (권한을 요청하는 팝업이 뜨지 않고, 프로세스가 단순히 실패합니다)

  2. 세션을 iframe으로 임베드하면 미팅을 녹화할 수 없습니다.

이러한 문제를 보고할 곳이 있는지 궁금합니다. GitHub 저장소는 이슈 기능이 비활성화된 것 같습니다.

화면 공유는 작동하며, 우리는 이를 광범위하게 사용하고 있습니다. Chrome은 프라이버시 및 보안을 이유로 iFrame에 대한 화면 공유를 지원하지 않습니다.

Chrome는 프라이버시/보안을 이유로 iFrame에 대한 화면 공유를 지원하지 않습니다.

그래서 Firefox에서도 작동하지 않는 것 같습니다.