TRTC Web SDK画面共有のサポートレベルについて、ブラウザのサポート状況をご参照ください。また、SDKは現在のブラウザが画面共有をサポートしているかどうかを判断するためのTRTC.isScreenShareSupportedインターフェースを提供します。
このドキュメントでは、以下のような異なるシーンで実装プロセスを説明します。
注意:
- Web端末ではセカンダリストリームの公開が現時点でサポートされていません。画面共有の公開はプライマリストリームの公開によって実現されます。リモート画面共有ストリームがWebユーザーからのものである場合は、RemoteStream.getType()は'main'を返し、通常、Web端末からの画面共有ストリームであることはuserIdによって識別されます。
- Native(iOS、Android、Mac、Windowsなど)端末ではセカンダリストリームの公開をサポートし、画面共有の公開はセカンダリストリームの公開によって実現されます。リモート画面共有ストリームがNativeユーザーからのものである場合は、RemoteStream.getType()は'auxiliary'を返します。
注意:画面共有ストリームを作成および公開するコードは、以下の順序で厳密に実行してください。
画面共有ストリームには、ビデオストリームとオーディオストリームが含まれます。このうち、オーディオストリームは、マイクオーディオまたはシステムオーディオに分けられます。
// 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 });
注意:
- audio属性とscreenAudio属性を同時にtrueに設定することはできません。camera属性とscreenAudio属性を同時にtrueに設定することはできません。screenAudioの詳細については、本ドキュメントのパート5で説明します。
- camera属性とscreen属性を同時にtrueに設定することはできません。
初期化時にブラウザはユーザーに画面共有の内容と権限を要求します。ユーザーが許可を拒否した場合、またはシステムがブラウザに画面共有の権限を付与しなかった場合は、コードはNotReadableError
またはNotAllowedError
のエラーをキャッチします。この場合、ユーザーがブラウザ設定またはシステム設定で画面共有の権限をオンにするように指示してください。
注意:Safariの制限により、画面共有ストリームの初期化操作は、クリックイベントのコールバックで行わなければなりません。この問題の詳細については、このドキュメントよくあるご質問をご参照ください。
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;
}
}
通常、画面共有のクライアントオブジェクトであることを示すために、userIdには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
}
ステップ1で作成されたクライアントオブジェクトにより公開されます。公開が成功すると、リモート端末で画面共有ストリームを受信できます。
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
設定可能なパラメータには、解像度、フレームレートおよびコードレートがあります。必要に応じてsetScreenProfile()インターフェースを使用してprofileを指定できます。各profileは解像度、フレームレートおよびコードレートのセットに対応しています。SDKはデフォルトで'1080p'の構成を使用します。
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 | 解像度(幅 × 高さ) | フレームレート(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();
});
1つのClientでは、最大1チャネルのオーディオと1チャネルのビデオを同時に公開することができます。カメラビデオと画面共有を同時に公開するには、2つのClientを作成して、それらを「それぞれの役割」に任せてください。
例えば、次のように2つのClientを作成します。
注意:
- 画面共有を行うshareClientは、自動サブスクリプションをオフにする必要があります。そうしないと、リモートストリームの重複サブスクリプションが発生します。APIの説明をご参照ください。
- ローカルのオーディオビデオストリームを公開するclientは、shareClientが公開するストリームのサブスクリプションを取り消してください。そうでないばあい、自分で自分をサブスクリプションするケースが発生する可能性があります。
サンプルコード:
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 });
// ... 関連コードの初期化や公開を省略し、必要に応じてストリームを公開できます。
現時点でシステム音声のキャプチャはChrome M74+のみサポートしており、WindowsおよびChrome OS上ではシステム全体のオーディオをキャプチャすることができ、LinuxおよびMacではタブのオーディオのみキャプチャできます。その他のChromeのバージョン、その他のシステム、その他のブラウザはいずれもサポートしていません。
// 画面共有ストリームの作成screenAudioはtrueに設定してください。システムとマイクの音量の同時収集がサポートされていませんので、同時にaudio属性をtrueに設定しないでください
const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });
await shareStream.initialize();
...
表示されるダイアログで「オーディオ共有」にチェックを入れると、公開されたストリームにシステムサウンドが付きます。
Safari画面共有でgetDisplayMedia must be called from a user gesture handler
というエラーが報告されました
SafariではgetDisplayMedia
画面収集用インターフェースが制限されているため、ユーザークリックイベントのコールバック関数が実行される1秒以内に呼び出してください。webkit issueをご参照ください。
// good
async function onClick() {
// onClickの実行時に、最初に収集ロジックを実行することをお勧めします。
const screenStream = TRTC.createStream({ screen: true });
await screenStream.initialize();
await client.join({ roomId: 123123 });
}
// bad
async function onClick() {
await client.join({ roomId: 123123 });
/// ルームに入るのに1s以上かかることがあり、収集に失敗する可能性があります。
const screenStream = TRTC.createStream({ screen: true });
await screenStream.initialize();
}
WebRTC画面共有の既知の問題と回避方法をご参照ください。
この記事はお役に立ちましたか?