目次
1. はじめに
2. SharedArrayBuffer
3. cross-origin isolation
4.SharedArrayBufferのみを有効にする
はじめに
はじめまして、株式会社TechoesのK（入社1年目、エンジニア歴3年目）と申します
今回は、現在担当しているプロジェクトでの機能実装に際してSharedArrayBufferの設定について学んだことを記したいと思います
SharedArrayBuffer
ZoomVideoSDKで以下の機能を実装するためには、SharedArrayBufferを有効にする必要があるようです。
- 仮想背景
- １キャンバスに複数のビデオの分割表示（例：配信画面の視聴者ビデオ等）
参考:https://developers.zoom.us/docs/video-sdk/web/sharedarraybuffer/
ということでGoogleChromeでのSharedArrayBufferを有効にする方法を調べました
cross-origin isolation
参考サイトによると、Google ChromeでSharedArrayBufferを有効にするためには、ページをcross-origin isolationの状態に設定する必要があるそうです。具体的には、レスポンスヘッダーに以下の設定を追加します。
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
参考:https://developer.chrome.com/blog/enabling-shared-array-buffer/?hl=ja
また、対象ページのmetaタグに以下のように追加することもできます。
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp"/>
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin"/>
cross-origin isolationが有効になっているかどうかは、ブラウザコンソールで以下のコマンドを実行して確認できます。
crossOriginIsolated
結果がtrueならOK
さらに、SharedArrayBufferが有効かどうかについても、ブラウザコンソールで以下のコマンドで確認できます。
typeof SharedArrayBuffer === 'function';
結果がtrueならSharedArrayBufferは有効になっている
リソースが表示されなくなる場合
ただし、上記の設定を行うと、サーバーへのリクエスト時に認証が必要なリソースが表示されなくなる場合があるため、以下の設定が推奨されます。
Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Embedder-Policy: require-corpを上記の通りに書き換えれば良い
参考:Cross-origin isolation の条件を緩和する
SharedArrayBufferのみを有効にする
cross-origin isolationにせずにSharedArrayBufferのみを有効にしたい場合は、Google Origin Trialsの「SharedArrayBuffers in non-isolated pages on Desktop platforms」にドメインを登録する方法があります。
リンクはこちら↓
Google Origin Trials
以下画面の、項目「SharedArrayBuffers in non-isolated pages on Desktop platforms」の「REGISTER」を選択
以下画面にドメインを登録
ドメイン登録後に発行されたトークンをmetaタグに追加することで、SharedArrayBufferを有効にできます。
<meta http-equiv="origin-trial" content="ここにトークンを追加" />
注意点
ただし、これは暫定的な対応であり、Googleからcross-origin isolationの緩和策が発表された場合は、それに合わせて対応する必要があります。(期限は2024年6月24日とされていますが、緩和策が出るまでは期限切れにはならないとのこと)
参考:https://developer.chrome.com/blog/enabling-shared-array-buffer/?hl=ja