아고라 RTM 및 RTC를 사용한 Vue JS와 Flask를 활용한 비디오 통화 초대 기능

웹 애플리케이션에 비디오 통화 기능을 추가하는 방법을 궁금해하신 적이 있다면, 잘 구조화되고 명확하게 작성된 이 글을 발견하셨습니다.

이 글에서는 Agora Web SDK를 사용하여 WhatsApp Web과 유사한 비디오 통화 기능을 갖춘 애플리케이션을 구축할 것입니다.

이 글에서 기대할 수 있는 기능

• 사용자에게 비디오 통화 초대 및 수신 통화 알림 전송
• 사용자가 오프라인 상태일 경우 적절한 피드백 반환
• 통화가 응답되기 전에 종료
• 통화 거부/거절
• 통화 수락/수신

필수 조건

• Agora 개발자 계정 (자세한 내용은 Agora 시작하기를 참조하세요).
• Python 3.8 Flask 애플리케이션과 인증 기능. 시작하기 위해 다음 스타터 프로젝트를 다운로드하세요: Flask Auth Starter Project 이 스타터 프로젝트를 기반으로 구축할 것입니다.

프로젝트 설정

1. 이 프로젝트를 위해 Python 3 가상 환경을 생성하고 활성화합니다.
2. 터미널 또는 명령 프롬프트를 열고 사전 요구 사항의 일부로 다운로드한 스타터 프로젝트로 이동합니다. 폴더 이름은 agora-flask-starter입니다.
3. agora-flask 스타터의 README.md 파일의 지침에 따라 애플리케이션을 설정합니다.
4. agora_token_builder 패키지를 설치합니다:
5. pip install agora-token-builder
6. Agora RTM SDK의 최신 버전을 다운로드합니다. Agora RTM SDK

백엔드 구성

agora_rtm이라는 새로운 앱을 생성하고, 블루프린트를 등록하며, 필요한 정적 템플릿과 뷰를 생성합니다.

1. 앱에 필요한 폴더를 생성합니다:

mkdir app/agora_rtm

mkdir app/static/agora_rtm

mkdir app/templates/agora_rtm

2. 아고라 뷰 생성:

• 터미널에서 app/agora_rtm 디렉토리에 views.py 및 __init__.py 파일을 생성합니다:

touch app/agora_rtm/views.py

touch app/agora_rtm/__init__.py

다음 내용을 __init__.py 파일에 추가하세요:

3. agora_rtm 블루프린트를 등록합니다.

agora_rtm 앱을 가져오고 app/__init__.py에 블루프린트로 등록합니다:

from .agora_rtm import agora_rtm as agora_rtm_blueprintapp.register_blueprint(agora_rtm_blueprint)

위의 코드를 return app 문 앞쪽에 배치합니다.

agora_rtm/views.py의 메서드 설명

index: 비디오 통화 페이지를 표시합니다. 인증된 사용자만 페이지를 볼 수 있으며, 인증되지 않은 사용자는 로그인 페이지로 리디렉션됩니다. 등록된 모든 사용자의 목록을 반환합니다.

fetch_users: 등록된 모든 사용자를 JSON 응답으로 반환합니다.

generate_agora_token: RTM 및 RTC 연결에 사용되는 토큰을 반환합니다.

* token: RTC 토큰

* rtm_token: RTM 토큰

참고: 토큰의 만료 시간을 3600초(1시간)로 설정했습니다. 원하는 만료 시간을 사용하려면 엔드포인트를 수정할 수 있습니다.

프론트엔드 구성

비디오 통화를 만들고 수신할 수 있는 사용자 인터페이스를 생성하며, 카메라와 마이크의 켜기/끄기 상태를 토글할 수 있는 기능을 추가합니다.

수신자가 통화를 수락하거나 거절할 수 있는 수신 통화 알림을 표시합니다.

1. 다운로드한 RTM SDK를 프로젝트에 추가합니다.

• 단계 5의 “프로젝트 설정”에서 다운로드한 파일을 압축 해제합니다.
• libs 폴더로 이동하여 agora-rtm-sdk-1.4.4.js 파일을 static/agora_rtm로 복사합니다.
• 복사한 파일을 agora-rtm.js로 이름 변경합니다.

2. 인덱스 뷰용 HTML 파일을 추가합니다.

이 HTML 파일에는 Agora RTC SDK, Agora RTM SDK, Vue.js, Axios, Bootstrap(스타일링용) 및 사용자 정의 CSS 및 JavaScript의 CDN 링크가 포함됩니다.

index.html 파일은 뷰를 렌더링하는 데 사용되는 기본 템플릿을 상속받습니다:

• templates/agora_rtm 디렉토리에 index.html 파일을 생성합니다:
• app/templates/agora_rtm/index.html을 생성합니다.
• index.html 파일에 다음 코드를 추가합니다:

우리는 Flask의 템플릿 언어를 사용하여 일부 코드를 재사용합니다. 앞서 언급했듯이, 우리는 base.html이라는 기본 템플릿을 상속받습니다. 이 템플릿에는 다음과 같은 블록이 포함되어 있습니다:

• head_scripts: 이 블록에는 Agora RTC 및 RTM SDK의 링크와 비디오 통화 페이지의 스타일을 지정하는 index.css 파일이 포함됩니다.
• content: 이 콘텐츠 블록에는 비디오 스트림과 제어 버튼을 렌더링하는 사용자 인터페이스가 포함됩니다.
• bottom_scripts: 이 블록에는 AJAX 요청을 전송하기 위한 Axios의 CDN 링크와 비디오 채팅 애플리케이션의 클라이언트 측 논리를 작성하기 위한 Vue.js의 CDN 링크가 포함됩니다. 또한 맞춤형 JavaScript 코드를 위한 index.js도 포함됩니다.

3. 정적 파일 생성

우리는 맞춤형 스타일링을 위한 index.css와 통화 논리를 처리하는 스크립트인 index.js를 가지고 있습니다.

터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 파일을 생성합니다:

touch app/static/agora_rtm/index.js
touch app/static/agora_rtm/index.css

다음 내용을 index.js에 추가하세요:

다음 내용을 index.css에 추가하세요:

아고라 콜 페이지 구성

비디오 콜 페이지(app/templates/agora_rtm/index.html)에서는 각 등록된 사용자의 이름과 현재 온라인/오프라인 상태를 표시하는 버튼을 표시합니다.

콜 연결

콜을 연결하려는 사용자의 버튼을 클릭합니다. 콜 연결 인터페이스가 표시되며, 콜을 취소할 수 있는 기능이 포함됩니다:

‍

수신자는 착신 알림을 받게 되며, 이 알림에서 전화를 거절하거나 수락할 수 있습니다:

기술 설명 동영상

다음 동영상은 영상 통화 기능의 작동 원리를 설명합니다:

4. Set the environment variables in .flaskenv:

FLASK_APP=app.py
FLASK_ENV=development
SECRET_KEY=
SQLALCHEMY_DATABASE_URI=sqlite:///db.sqlite
SQLALCHEMY_TRACK_MODIFICATIONS=False
TEMPLATES_AUTO_RELOAD=True
SEND_FILE_MAX_AGE_DEFAULT=0
ENABLE_DEBUG=True
AGORA_APP_ID=
AGORA_APP_CERTIFICATE=

테스트

1. 터미널에서 Flask 개발 서버를 실행합니다:

flask run

2. 두 개의 다른 웹 브라우저 또는 동일한 브라우저의 두 개의 인스턴스를 열고, 그 중 하나는 인코그니토 모드로 실행한 후 등록 페이지로 이동합니다: http://127.0.0.1:5000/register

3. 브라우저 중 하나에서 네 번 등록하여 네 개의 사용자를 생성합니다.

4. 각 브라우저의 로그인 페이지(http://127.0.0.1:5000/login)에서 방금 생성한 계정 정보로 로그인합니다.

5. http://127.0.0.1:5000/agora_rtm로 이동합니다.

6. 열린 각 브라우저에서 해당 애플리케이션에 등록된 다른 사용자들이 표시됩니다.

7. 한 브라우저에서 이름이 표시된 버튼을 클릭하여 온라인 사용자를 호출할 수 있습니다.

8. 다른 사용자는 통화를 완전히 연결하기 위해 ‘수락’ 버튼을 클릭하도록 안내됩니다.

비디오 통화 데모

데모가 정상적으로 작동하는지 확인하려면, 완성된 프로젝트의 모습과 기능을 예시로 보여주는 제 데모 비디오를 참고하세요:

결론

아고라 RTM 및 RTC SDK는 완전한 기능을 갖춘 비디오 통화 애플리케이션을 개발할 수 있는 기능을 제공합니다. RTM SDK를 사용하여 앱 내 메시징 기능을 구현할 수도 있습니다.

테스트 과정에서 가장 눈에 띄었던 점은 통화 중 한쪽 또는 양쪽의 인터넷 연결이 일시적으로 끊겼을 때 통화가 자동으로 재연결되는 기능이었습니다.

온라인 데모 링크: https://watermark-remover.herokuapp.com/auth/login?next=%2Fagora_rtm

완성된 프로젝트 리포지토리:

https://github.com/Mupati/agora-call-invitation

참고: 데모 링크 또는 생산 버전은 HTTPS를 통해 제공되어야 하며 경로는 /agora_rtm이어야 합니다.

테스트 계정:

foo@example.com: DY6m7feJtbnx3ud

bar@example.com: Me3tm5reQpWcn3Q

기타 리소스

• 아고라 RTC Client에서 사용할 수 있는 이벤트.
• 아고라 RTM Web API Reference.
• 아고라 애플리케이션에 대한 자세한 내용은 아고라 Quickstart Guides를 참고하세요.
• 위에서 논의된 기능 및 기타 많은 기능에 대한 완전한 문서는 아고라 Web SDK API를 참고하세요.

또한 아고라 Developer Slack Community에 참여해 주시기를 초대합니다.

‍