Google ChromeでのSharedArrayBufferの有効化

Techoes-HR

2024年4月11日 09:50

はじめに

はじめまして、株式会社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日とされていますが、緩和策が出るまでは期限切れにはならないとのこと)