크리스 봉거스는 네덜란드 출신 풀스택 개발자입니다. 그는 멋진 웹 프로젝트 작업과 커뮤니티를 위한 튜토리얼 블로그 작성에 열정을 가지고 있습니다. 트위터(@DailyDevTips1)와 그의 웹사이트(https://chrisbongers.com/)에서 그를 팔로우하세요.
많은 전통적인 인간 상호작용이 온라인으로 이동했습니다. 이 전환을 가능하게 하는 기술이 널리 보급됨에 따라, 많은 산업에서 이 전환이 불가피해 보입니다. 지난 한 해 동안 많은 기업과 개발자들이 전통적인 인간 상호작용을 대체할 수 있는 디지털 솔루션을 출시했습니다. 그리고 라이브 비디오 스트리밍과 채팅 웹 앱을 구축하는 것이 생각보다 훨씬 쉬울 수 있습니다.
이 튜토리얼에서는 자신만의 1대1 비디오 회의 도구를 만드는 방법을 보여드리겠습니다. 이 과정을 마치면 얼마나 쉬운지 직접 확인할 수 있을 것입니다.
이 도구의 잠재적 용도:
- 환자-의사 비디오 통화
- 멘토-멘티 비디오 통화
- 고객-계약자 비디오 통화
- 일대일 컨설턴트 비디오 통화
우리는 아고라를 사용하여 두 사람을 연결해 비디오 회의를 진행할 것입니다. 이 프로젝트는 순수 JavaScript로 구현될 것입니다. 멋진 점은 코드를 따라 입력하며 자신의 버전을 만들 수 있다는 것입니다!
최종 결과는 이 데모와 유사할 것입니다:
필수 조건
이 프로젝트를 진행하려면 Agora 계정이 필요합니다. 계정은 이 가이드를 따라 생성할 수 있습니다. JavaScript와 HTML에 대한 기본 지식이 필요합니다. 하지만 걱정하지 마세요 — 이 과정을 단계별로 안내해 드리겠습니다.
이 튜토리얼을 진행하기 위해 Visual Studio Code 라이브 서버 플러그인을 사용할 것입니다.
프로젝트 설정
이 프로젝트를 위해 컴퓨터에 폴더를 생성해야 합니다. 이 폴더를 agora-demo라고 이름지겠습니다.
프로젝트 구조를 생성한 후 Visual Studio Code에서 폴더를 열면 VSCode의 프로젝트 구조는 다음과 같을 것입니다:
이 튜토리얼은 프레임워크를 전혀 사용하지 않는 순수 JavaScript 기반의 튜토리얼입니다. 우리는 SCSS 파일을 CSS 파일로 변환하기 위해 SASS 컴파일러를 사용할 것입니다.
또한 프로젝트를 시작하기 위해 Live Server를 사용할 것입니다.
Live Server가 실행 중이면 프로젝트를 127.0.0.1:5500/index.html에서 확인할 수 있습니다.
먼저 Agora부터 시작해 보겠습니다. 계정을 설정하는 방법은 다음 문서에서 확인할 수 있습니다:
일대일 비디오 회의 도구 만들기
Visual Studio로 돌아가서 도구를 만들기 시작하겠습니다.
참고: 데모에서는 단일 채널만 제공됩니다. Agora는 필요한 만큼의 채널을 생성할 수 있지만, 이 가이드에서는 사용자가 자체 채널을 생성할 수 있도록 UI를 제공하지 않습니다.
HTML 구조
index.html에서 HTML 설정을 시작합니다. 이번에는 매우 기본적인 디자인을 만들며, 사용자는 중앙에 원격 사용자의 스트림이 표시되는 화면을 볼 수 있습니다. 자신의 스트림은 오른쪽 하단에 위치하며, 하단에는 일부 제어 버튼이 있습니다.
우리는 프로젝트에 Fontawesome과 Agora를 로드하기 위해 CDN을 사용했습니다. 또한 CSS 스타일시트와 JavaScript 파일에도 링크를 연결했습니다. HTML 부분은 여기까지입니다. 이제 다음과 같은 모양이 되어야 합니다:
그건 별로 매력적이지 않아 보이죠?
다음 단계에서는 이 모습을 더 나아 보이도록 스타일링을 추가할 것입니다.
응용 프로그램 스타일링
먼저 모든 패딩과 마진을 초기화할 것입니다.
그런 다음 컨테이너에 기본적인 유동 레이아웃 스타일을 적용하고 헤더에 패딩을 추가하여 너무 밀집되지 않도록 합니다.
또한 시작 및 중지 버튼을 숨기기 위해 숨겨진 클래스가 필요합니다.
그런 다음 두 개의 홀더(비디오용 하나, 버튼용 하나)를 스타일링할 수 있습니다.
비디오 스타일링은 다음과 같습니다:
이 스타일링은 비디오에 충분한 공간을 확보하고, 비디오 내부에 배치된 요소들이 적절히 위치하도록 합니다.
:before 가상 요소를 발견하셨을 수도 있습니다. 이 요소는 사용자에게 현재 발생 중인 사항에 대한 피드백을 제공하기 위해 사용됩니다.
그 다음 버튼 바에는 다음과 같은 스타일링이 필요합니다:
이 방법은 박스 그림자(box-shadow)를 적용하고 버튼 사이에 간격을 두어 버튼에 멋진 디자인을 부여합니다. 또한 활성 상태를 표시하기 위해 ‘active’ 클래스를 추가합니다.
우리 애플리케이션은 다음과 같이 보일 것입니다:
좋아요, 이제 회의 도구처럼 보이기 시작했어요. 하지만 아직은 아무것도 하지 않을 거예요.
아고라에 연결하기
Agora에 연결해 보겠습니다. 이를 위해 script.js 파일에서 몇 가지 단계를 수행해야 합니다.
먼저 몇 가지 변수를 생성합니다. 앱 ID와 토큰을 저장할 옵션이 필요하며, 여기에도 채널을 추가할 것입니다.
또 다른 변수는 사용자의 자체 로컬 스트림을 저장합니다.
Then let’s add all of the front-end elements we want to access at one point.
The next step is to create a join function that will connect us to Agora.
비디오 회의 시스템 만들기
Agora를 설정했으니 이제 이 앱을 작동시키고 버튼을 연결하여 비디오 채팅을 시작할 수 있도록 해보겠습니다!
첫 번째로 연결할 버튼은 ‘참가’ 버튼입니다.
이 버튼을 클릭하면 startBasicCall 함수가 실행되어야 합니다.
이 함수는 join 함수를 호출하고, 비디오와 오디오를 시작하며, 스트림에 구독을 등록합니다.
보시다시피, 우리는 join 함수를 호출하고, 콜백에서 start video 및 start audio 함수를 호출합니다. 그 다음 스트림에 연결하여 다른 사용자가 연결될 때까지 기다립니다. 만약 연결되면 해당 스트림을 업데이트하여 수신을 시작합니다.
remoteVideoTrack.play()는 remote 인수를 받아, 해당 div에 렌더링해야 할 ID를 참조합니다.
마지막으로 join 버튼을 숨기고 leave 버튼을 표시합니다.
이제 startVideo 함수를 생성해 보겠습니다.
첫 번째 단계는 연결 클래스를 추가하는 것입니다. 이로써 사용자에게 작업이 진행 중임을 알릴 수 있습니다. 다음으로 rtc 변수를 설정하여 Agora에 연결된 비디오 트랙으로 localVideoTrack을 업데이트합니다. 이후 이 트랙을 게시하고 연결 클래스를 제거합니다.
rtc.localVideoTrack.play(“me”);를 통해 ID가 “me”인 div에 이 사용자의 로컬 스트림을 재생하도록 지시합니다. 마지막으로 카메라 버튼에 active 클래스를 추가합니다.
startAudio 함수에서는 동일한 작업을 수행하지만, AgoraRTC.createMicrophoneAudioTrack 메서드를 사용합니다.
스트림을 중지할 수 있도록 하려면 중지 버튼에 연결해 보겠습니다.
휴가 기능은 다음과 같이 표시됩니다:
이 기능은 동영상과 오디오를 중지하고 채널을 나갑니다. 또한 ‘나가기’ 버튼을 ‘가입하기’ 버튼으로 교체합니다.
이제 이 중지 기능을 만들어 보겠습니다.
우리는 로컬 오디오 연결을 닫고 다른 수신기에서 해당 연결을 비공개로 설정합니다. 그 다음 버튼에서 활성 클래스를 제거합니다.
비디오도 마찬가지입니다.
이 경우 전체 스트림을 중단했습니다. 하지만 비디오 또는 오디오를 일시적으로만 연결을 끊고 싶다면 어떻게 해야 할까요?
오디오 또는 비디오 중 활성화된 클래스에 따라 해당 시작 또는 중지 함수를 호출합니다.
1대1 통화 확인
통화가 1대1이며 다른 사용자가 채널에 참여하지 않도록 확인하기 위해 Agora RTC를 사용하여 일부 검사를 추가하겠습니다.
사용자가 이 채널에 참여하면 클라이언트가 가진 사용자 수를 확인합니다. 이 숫자가 1보다 크면 무효로 처리하고 해당 사용자를 제거해야 합니다.
사용자가 게시한 콜백을 수정해 보겠습니다:
roomFull 함수는 모든 논리를 처리해줍니다:
이 코드는 이전에 만든 leave 함수를 호출하고 원격 사용자의 div에 전체 클래스를 추가합니다.
이제 이 div에 스타일을 추가하면 됩니다:
이 데모 코드는 GitHub에서 확인할 수 있습니다.
테스트
응용 프로그램을 테스트하려면 GitHub에서 파일을 다운로드하세요. script.js 파일을 열고 클라이언트 정보를 추가하세요. 그런 다음 한 브라우저 탭에서 index.html 파일을 열고 다른 탭에 복사하세요.
이제 자신을 두 번 볼 수 있어야 합니다. 마이크를 음소거하는 것이 좋습니다. 에코가 발생할 수 있기 때문입니다.
결론
이제 Agora와 순수 JavaScript를 사용한 상호작용형 회의 도구를 완성했습니다!
Agora 덕분에 이러한 상호작용형 회의 도구를 만드는 것이 이제보다 더 쉬워졌습니다. Agora를 활용해 다른 방법을 생각해보고 자신만의 비디오 솔루션을 만들어 보세요.
