개요

현재, agora.io VideoSDK 화면 공유(ScreenSharing)에 대해서는, 다음의 데모가 준비되어 있습니다.
이 샘플의 경우 Join 버튼 클릭 시 화면 공유(ScreenSharing) 대화상자가 표시되며, 취소할 때는 한 번 leave해야 합니다.
Share The Screen

이 기사에서는 (Join 후) leave하지 않고 화면 공유 대화 상자를 반복해서 표시할 수 있는 샘플로 개조합니다.

참조 참조 : Share the Screen

샘플

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

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

기능 목록

※추가 기능만 표시
・SCREENSHARING 버튼

개발 환경

・agora.io VideoSDK(Web)

agora.io VideoSDK 화면 공유 대화 상자 재 표시 구현 예

SCREENSHARING 버튼 추가

시작 화면 공유 대화 상자를 시작하는 버튼을 추가합니다.

./index.html

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

SCREENSHARING 버튼 클릭 시

그런 다음 SCREENSHARING 버튼을 클릭할 때 처리를 추가합니다.

./index.js

$("#screensharing").click(function (e) {
  screensharing();
})

SCREENSHARING 버튼 클릭시의 상세 처리

SCREENSHARING 버튼 클릭 후 화면 공유 대화 상자를 시작하는 과정을 추가합니다.

./index.js

async function screensharing() {

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

  // publish local tracks to channel
  await client.publish(Object.values(localTracks));
  console.log("publish success");

}

공유 정지 버튼 클릭시 처리

화면 공유를 정지했을 때에 표시하고 있는 영상을 정지하는 처리가 됩니다.

./index.js

function handleTrackEnded() {
  var track = localTracks["videoTrack"];
  if(track) {
    track.stop();
    track.close();
    localTracks["videoTrack"] = undefined;
  }
  $("#local-player-name").text("");
  client.unpublish(track);
  console.log("handleTrackEnded");
}

공유 화면 다이얼로그의 취소시 대응

공유 화면 대화 상자를 취소하더라도 Join 처리가 성공할 수 있도록,
(화면 공유 용) VideoTrack 취득 처리를 나누고 있습니다.

./index.js

async function join() {
　//省略
　/*JoinおよびAudioTrack取得処理*/
  [ options.uid, localTracks.audioTrack] = await Promise.all([
    // join the channel
    client.join(options.appid, options.channel, options.token || null),
    // ** create local tracks, using microphone and screen
    AgoraRTC.createMicrophoneAudioTrack()
  ]);
  console.log(options.uid);

　/*(画面共有用)VideoTrack取得処理*/
  [ localTracks.videoTrack ] = await Promise.all([
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
  localTracks.videoTrack.on("track-ended", handleTrackEnded);

　//省略
}

동작 확인

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

1. 화면 시작

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

2. 각종 선택·입력

appId, 채널 이름을 입력합니다.

(주)appId는 실물의 것이 아닙니다.

3. Join (화면 공유 대화 상자 시작)

Join을 클릭합니다. (화면 공유 대화상자가 시작됨)


Join 후에 화면 공유 대화 상자가 시작됩니다.

4. 화면 공유 대화상자 취소

화면 공유 대화 상자를 취소했기 때문에 VideoTrack을 가져올 수 없어 오류가 발생합니다.

5. 화면 공유 대화상자 다시 표시

(Join 후에 다시 화면 공유 대화상자를 시작하기 위해) SCREENSHARING 버튼을 클릭합니다.


화면 공유 대화상자가 다시 나타납니다.

6. 공유 시작

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

7. 공유 중지

공유를 중지합니다.

8. 화면 공유 대화상자 다시 표시

다시 SCREENSHARING 버튼을 클릭합니다.
다시 화면 공유 대화 상자가 나타납니다.


SCREENSHARING 버튼을 클릭하면 Join 후에 반복 화면 공유 대화 상자를 표시할 수 있습니다.

마지막으로

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