// 通常は、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 });// orconst shareStream = TRTC.createStream({ camera: true, screenAudio: true });
NotReadableError
またはNotAllowedError
のエラーをキャッチします。このとき、ブラウザの設定またはシステムの設定を行って画面共有の権限を有効化し、画面共有ストリームの初期化を再度行うよう、ユーザーに対して促す必要があります。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;}}
share_
を加え、これが画面共有用のクライアントオブジェクトだということを識別するために用いることが推奨されます。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();
profile | 解像度(幅 x 高) | フレームレート(fps) | ビットレート (kbps) |
480p | 640 x 480 | 5 | 900 |
480p_2 | 640 x 480 | 30 | 1000 |
720p | 1280 x 720 | 5 | 1200 |
720p_2 | 1280 x 720 | 30 | 3000 |
1080p | 1920 x 1080 | 5 | 1600 |
1080p_2 | 1920 x 1080 | 30 | 4000 |
// 画面共有クライアントがストリーム公開をキャンセルする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();...
getDisplayMedia must be called from a user gesture handler
というエラーが表示されます。
これは、SafariがgetDisplayMedia
スクリーンキャプチャインターフェースを制限しているためであり、ユーザーがイベントのコールバック関数をクリックして実行してから1秒以内でなければ呼び出すことができません。詳細については、webkit issueをご参照ください。// goodasync function onClick() {// onClickで実行する場合は、先にキャプチャロジックを実行することをお勧めしますconst screenStream = TRTC.createStream({ screen: true });await screenStream.initialize();await client.join({ roomId: 123123 });}// badasync function onClick() {await client.join({ roomId: 123123 });// 入室には1秒以上かかることがあり、キャプチャに失敗する可能性がありますconst screenStream = TRTC.createStream({ screen: true });await screenStream.initialize();}
// 画面共有キャプチャの成功後const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });await shareStream.initialize();// displaySurfaceによってキャプチャのタイプを判断します。const { displaySurface } = shareStream.getVideoTrack().getSettings();// 例えば、monitorは画面全体、windowはあるアプリケーションのウィンドウ、browserはChromeのあるタブ
この記事はお役に立ちましたか?