Web

// 일반적으로 userId에 'share_'를 접두사로 붙여 화면 공유 클라이언트 객체로 식별하는 것이 좋습니다.
const userId = 'share_userId';
const roomId = 'roomId';

// good 정확한 사용법
// 화면 비디오 스트림만 캡처
const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// or 마이크 오디오 및 화면 비디오 스트림 캡처
const shareStream = TRTC.createStream({ audio: true, screen: true, userId });
// or 시스템 오디오 및 화면 비디오 스트림 캡처
const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });

// bad 오류 사용법
const shareStream = TRTC.createStream({ camera: true, screen: true });
// or
const shareStream = TRTC.createStream({ camera: true, screenAudio: true });


try {
  await shareStream.initialize();
} catch (error) {
  // 화면 공유 스트림 초기화 실패 시 사용자에게 알리고 후속 방 입장 배포 프로세스 중지
  switch (error.name) {
    case 'NotReadableError':
      // 시스템에서 현재 브라우저가 화면 내용을 가져올 수 있도록 사용자에게 알림
      return;
    case 'NotAllowedError':
      if (error.message.includes('Permission denied by system')) {
        // 시스템에서 현재 브라우저가 화면 내용을 가져올 수 있도록 사용자에게 알림
      } else {
        // 사용자가 화면 공유를 거부/취소
      }
      return;
    default:
      // 화면 공유 스트림을 초기화할 때 알 수 없는 오류가 발생했으며 사용자에게 다시 시도하라는 메시지 표시됨
      return;
  }
}

const shareClient = TRTC.createClient({
  mode: 'rtc',
  sdkAppId,
  userId, // 예시: ‘share_teacher’
  userSig
});
// 클라이언트 객체 방 입장
try {
  await shareClient.join({ roomId });
  // ShareClient join room success
} catch (error) {
  // ShareClient join room failed
}


try {
  await shareClient.publish(shareStream);
} catch (error) {
  // ShareClient failed to publish local stream
}

// 일반적으로 userId에 'share_'를 접두사로 붙여 화면 공유 클라이언트 객체로 식별하는 것이 좋습니다.
const userId = 'share_userId';
const roomId = 'roomId';
// 화면 비디오 스트림만 캡처
const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// or 마이크 오디오 및 화면 비디오 스트림 캡처
// const shareStream = TRTC.createStream({ audio: true, screen: true, userId });
// or 시스템 오디오 및 화면 비디오 스트림 캡처
// const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });
try {
  await shareStream.initialize();
} catch (error) {
  // 화면 공유 스트림 초기화 실패 시 사용자에게 알리고 후속 방 입장 배포 프로세스 중지
  switch (error.name) {
    case 'NotReadableError':
      // 시스템에서 현재 브라우저가 화면 내용을 가져올 수 있도록 사용자에게 알림
      return;
    case 'NotAllowedError':
      if (error.message.includes('Permission denied by system')) {
        // 시스템에서 현재 브라우저가 화면 내용을 가져올 수 있도록 사용자에게 알림
      } else {
        // 사용자가 화면 공유를 거부/취소
      }
      return;
    default:
      // 화면 공유 스트림을 초기화할 때 알 수 없는 오류가 발생했으며 사용자에게 다시 시도하라는 메시지 표시됨
      return;
  }
}
const shareClient = TRTC.createClient({
  mode: 'rtc',
  sdkAppId,
  userId, // 예시: ‘share_teacher’
  userSig
});
// 클라이언트 객체 방 입장
try {
  await shareClient.join({ roomId });
  // ShareClient join room success
} catch (error) {
  // ShareClient join room failed
}
try {
  await shareClient.publish(shareStream);
} catch (error) {
  // ShareClient failed to publish local stream
}

const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// setScreenProfile()은 initialize() 전에 호출되어야 합니다.
shareStream.setScreenProfile('1080p');
await shareStream.initialize();

const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// setScreenProfile()은 initialize() 전에 호출되어야 합니다.
shareStream.setScreenProfile({ width: 1920, height: 1080, frameRate: 5, bitrate: 1600 /* kbps */});
await shareStream.initialize();

// 화면 공유 클라이언트 배포 스트림 취소
await shareClient.unpublish(shareStream);
// 화면 공유 스트림 비활성화
shareStream.close();
// 화면 공유 클라이언트 방 퇴장
await shareClient.leave();

// 상기 세 단계는 선택사항이며 시나리오의 필요에 따라 필요한 코드를 실행할 수 있습니다. 일반적으로 방 입장 여부와 스트림 해제 여부에 대한 판단을 추가해야 합니다. 자세한 내용은 코드 예시는 [demo 소스 코드](https://github.com/LiteAVSDK/TRTC_Web/blob/main/base-js/js/share-client.js)를 참고하십시오.

// 화면 공유 스트림의 화면 공유 중지 이벤트 수신
shareStream.on('screen-sharing-stopped', event => {
  // 화면 공유 클라이언트의 스트림 푸시 중지
  await shareClient.unpublish(shareStream);
  // 화면 공유 스트림 비활성화
  shareStream.close();
  // 화면 공유 클라이언트 방 퇴장
  await shareClient.leave();
});

const client = TRTC.createClient({ mode: 'rtc', sdkAppId, userId, userSig });
// 원격 스트림에 대한 자동 구독을 비활성화하려면 shareClient를 설정해야 합니다. 즉: autoSubscribe: false
const shareClient = TRTC.createClient({ mode: 'rtc', sdkAppId, `share_${userId}`, userSig, autoSubscribe: false,});

// 로컬 멀티미디어 스트림 배포를 담당하는 client는 shareClient에서 배포한 스트림의 구독을 취소해야 합니다.
client.on('stream-added', event => {
  const remoteStream = event.stream;
  const remoteUserId = remoteStream.getUserId();
  if (remoteUserId === `share_${userId}`) {
    // 자신의 화면 공유 스트림 구독 취소
    client.unsubscribe(remoteStream);
  } else {
    // 기타 일반 원격 스트림 구독
    client.subscribe(remoteStream);
  }
});

await client.join({ roomId });
await shareClient.join({ roomId });

const localStream = TRTC.createStream({ audio: true, video: true, userId }); 
const shareStream = TRTC.createStream({ audio: false, screen: true, userId });

// ... 초기화 및 관련 코드 배포를 생략하고 필요에 따라 스트림을 배포합니다.


// 화면 공유 스트림 screenAudio 생성 시 true로 설정하십시오. 시스템 및 마이크 볼륨 동시 수집을 지원하지 않으며, audio 속성을 동시에 true로 설정하지 마십시오.
const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });
await shareStream.initialize();
...