agora.io SDK의 화면 공유 (ScreenSharing) 구현 예 (그 2)

현재, agora.io VideoSDK 화면 공유(ScreenSharing)에 대해서는, 다음의 데모가 준비되어 있습니다.
공유 The Screen

이 기사에서는 화면 공유(ScreenSharing)와 영상을 모두 표시하는 샘플로 개조합니다.

참조 참조 : Share the Screen

샘플

여기 를 이용해 주십시오.
(버전 3은 AgoraIO-Screen-Sharing-Web-WithCamera-v3,
버전 4는 AgoraIO-Screen-Sharing-Web-WithCamera-v4)

다음은 버전 4용 샘플에서 설명합니다.

기능 목록

※추가・변경 기능만 표시
[추가]
・카메라 디바이스 선택 풀다운 : 카메라 ID 취득
・마이크 디바이스 선택 풀다운: 마이크 ID 취득
・SCREENSHARING 버튼 :(join 후의) 화면 공유 다이얼로그 기동
[변경]
· Join 버튼 : 화면 공유의 Join 처리 추가

개발 환경

・agora.io VideoSDK(Web)

agora.io VideoSDK 영상과 화면 공유를 모두 표시하는 구현 예

구현 포인트

영상, 화면 공유(ScreenSharing)를 모두 표시하려면 영상, 화면 공유가 각각 join하고 트랙을 만드는 것이 포인트입니다.

다양한 장치 선택 추가

카메라 장치 선택, 마이크 장치 선택 풀다운을 추가합니다.

./index.html

<div class="select-group mb-2">
 <div class="audio mb-2">
   <select name="audioSource" id="audioSource" class="form-select form-select-sm w-25" >
   </select>
 </div>
   <div class="microphone mb-2">
   <select name="videoSource" id="videoSource" class="form-select form-select-sm w-25">
 </select>
 </div>
</div>

버튼 추가

버튼을 추가합니다.

./index.html

<button id="screensharing" type="button" class="btn btn-primary btn-sm">SCREENSHARING</button>

Join 버튼 클릭 시

영상용, 화면 공유용의 Join 처리를 각각 실시합니다.

./shareTheScreen.js

async function join() {

  await join_camera(); //映像用
  await join_screen(); //画面共有用

}

화면 공유의 Join 처리

화면 공유에서는 createScreenVideoTrack()을 이용합니다.

./shareTheScreen.js

async function join_screen() {

  //省略
  [ options.uid_s, localTracks.screenTrack] = await Promise.all([
    // join the channel
    client2.join(options.appid, options.channel, options.token || null),
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
　//省略
}

screensharing 버튼 클릭 시

Join 후에 화면 공유를 다시 실행할 때의 처리입니다.

./shareTheScreen.js

async function screensharing() {

  [ localTracks.screenTrack ] = await Promise.all([
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
  localTracks.screenTrack.on("track-ended", handleTrackEnded);
  localTracks.screenTrack.play("local-player");
  $("#local-player-name").text(`localVideo(${options.uid_screen})`);

  // publish local tracks to channel
  await client2.publish(localTracks.screenTrack);
  console.log("publish success");
}

동작 확인

그럼 동작 확인해 보겠습니다.

1. 화면 시작

화면을 시작합니다. (index.html 클릭)

2. 각종 선택·입력

카메라, 마이크를 선택하고 appId, channel을 입력합니다.

3. Join

Join을 클릭합니다.

영상이 표시됩니다.

(주) 이미지의 영상은 실제 카메라 영상이 아닙니다.

4. 화면 공유 Join

그런 다음 화면 공유 대화 상자가 표시됩니다.

5. 화면 공유 다시 표시

(공유 정지 후) SCREENSHARING 버튼을 클릭하여 다시 화면 공유 대화 상자를 시작합니다.

화면 공유 대화상자가 표시됩니다.

6. 화면 공유 시작

공유 버튼을 클릭하여 공유를 시작합니다.


영상과 화면 공유를 표시할 수 있었습니다.

※참고 사이트
agora.io VideoSDK 화면 공유 (ScreenSharing) 구현 예 (그 1)

마지막으로

agora.io에 관한 문의는 이쪽으로부터