이 블로그는 Akshat Gupta Agora 개발자 에반젤리스트 인턴으로, Agora에서 Superstar로 시작해 경력을 쌓아온 개발자입니다. Agora Superstar 프로그램은 전 세계 개발자들이 열정과 기술 전문성을 공유하고, Agora의 맞춤형 SDK를 활용해 혁신적인 실시간 통신 앱과 프로젝트를 개발할 수 있도록 지원합니다.
저는 친구들과 함께 정기적인 워크숍을 진행해 왔으며 여러 라이브 스트리밍 플랫폼을 탐색해 보았습니다. 온라인 워크숍을 진행하는 데 가장 선호하는 플랫폼은 Airmeet입니다.
가장 눈에 띄고 인상 깊었던 기능은 Airmeet가 주최자가 참석자의 역할을 관객에서 호스트로, 호스트에서 관객으로 동적으로 변경하여 무대에 초대할 수 있다는 점이었습니다.
이 기능은 세션이 상호작용이 필요할 때 유용합니다. 사용자는 호스트로 무대에 초대되어 질문을 하거나 연사와 대화하며 세션을 더 흥미롭게 만들 수 있습니다. 사용자가 상호작용을 마치면 역할이 다시 관객으로 변경됩니다. 이 튜토리얼에서는 Agora Web SDK와 Agora RTM SDK를 사용하여 라이브 스트리밍 애플리케이션에서 원격 사용자의 역할을 변경하는 웹 애플리케이션을 개발할 것입니다.
필수 조건
- 자바스크립트, JQuery, Bootstrap, Font Awesome 사용 경험
- Agora 개발자 계정 (자세한 내용은 Agora 시작하기 참조)
- Agora Web SDK
- Agora RTM SDK
프로젝트 설정
먼저 기본 HTML 구조를 설정해 보겠습니다. 로컬 오디오 스트림의 UID, 원격 오디오 스트림의 UID, 원격 사용자 목록, 참여 및退出 버튼 등 몇 가지 UI 요소가 필요합니다. 또한 필요한 CDN을 임포트하고 커스텀 CSS 및 JS 파일을 연결했습니다.
색상 추가
기본 레이아웃이 준비되었으니 이제 CSS를 추가할 때입니다.
HTML에 사이트를 보기 좋게 만들기 위해 기본 Bootstrap 클래스를 이미 추가했지만, 사이트를 파란색 Agora 기반 테마와 일치시키기 위해 사용자 정의 CSS를 사용할 것입니다.
핵심 기능 (JS)
HTML/DOM 구조가 마련되었으니 이제 Agora Web SDK를 사용하는 JS를 추가할 수 있습니다. 처음에는intimidating해 보일 수 있지만, Agora의 공식 문서와 데모를 참고하고 조금만 연습하면 쉽게 이해할 수 있습니다.
다음 코드 조각에서는 먼저 클라이언트를 생성합니다.
호스트나 시청자가 버튼을 클릭하여 채널에 참여하면 사용자의 역할을 설정하고 클라이언트를 생성할 때 지정된 트랙을 재생할 수 있습니다. 사용자의 스트림은 구독되고 게시됩니다.
마지막으로 사용자에게 스트림을 종료하고 채널을 떠날 수 있는 옵션을 제공합니다.
이제 우리 애플리케이션이 라이브 스트리밍을 지원하게 되었으니, 주요 기능을 구현할 때입니다: Agora RTM SDK를 사용하여 원격 사용자의 역할을 변경하는 기능입니다.
RTM을 사용하여 원격 사용자의 역할 변경
RTMJoin() 함수를 호출하여 RTM 클라이언트를 생성합니다. RTM 문서에 따라 RTM에 로그인(8행)하고 채널에 참여(16행)하여 RTM SDK를 시작합니다.
channel.getMembers() (19행)를 사용하여 RTM 채널에 있는 모든 사용자의 목록을 가져옵니다. 이 사용자 이름은 프론트엔드에서 각 버튼에 전달된 사용자 고유 ID를 통해 받습니다.
getMembers 함수는 한 번만 호출되므로 사용자가 채널을 떠나거나 가입할 때 목록이 업데이트되지 않습니다. 이 데이터 불일치를 방지하기 위해 RTM SDK에서 제공하는 MemberLeft(120행) 및 MemberJoined(98행) 콜백을 사용합니다.
호스트와 청중 역할 변경 버튼(39행)의 클릭을 확인합니다. 사용자가 버튼을 클릭하면 RTM을 통해 원격 사용자에게 역할 변경 유형(호스트 또는 청중)을 알리는 피어-투-피어 메시지를 전송합니다.
피어가 메시지를 수신하면(75행), RTC 채널 내 모든 사용자의 역할이 변경됩니다. 역할 변경이 청중에서 호스트로 변경된 경우 트랙이 게시됩니다. 호스트에서 청중으로 역할이 변경된 경우 모든 로컬 트랙이 중지됩니다.
마지막으로 로그아웃 기능을 추가합니다(줄 148). 웹 SDK와 달리 RTM SDK는 채널을 떠나는 것 외에도 사용자가 로그아웃해야 하기 때문입니다.
이제 응용 프로그램을 실행하고 테스트할 수 있습니다.
참고: 테스트를 위해 여러 브라우저 탭을 사용하여 통화 중 여러 사용자를 시뮬레이션할 수 있습니다.
응용 프로그램의 작동 방식 데모.
결론
성공했습니다!
우리는 원격 역할 변경 서비스를 갖춘 자체 라이브 스트리밍 응용 프로그램을 성공적으로 개발했습니다. 코딩을 따라하지 않았거나 완성된 제품을 한 번에 확인하고 싶다면, 모든 코드를 GitHub에 업로드했습니다:
데모를 직접 확인해 보고 싶으신 경우, 코드가 실행되는 데모를 확인해 보세요:
튜토리얼을 읽어주셔서 감사합니다. 질문이 있다면 댓글로 알려주시기 바랍니다. 개선할 점이 있다면 리포지토리를 포크하고 pull request를 제출해 주시면 감사하겠습니다!
기타 자료
아고라 Web SDK 및 기타 사용 사례에 대해 더 알고 싶으시면 개발자 가이드 여기를 참고해 주세요.
