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();

// 上記の3ステップは必須ではなく、シーンのニーズに応じて必要なコードを実行します。通常は、入室済みかどうか、ストリームを公開済みかどうかの判断を追加する必要があります。より詳細なコードの例については、[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();
...