編集

Chrome 132

#Chrome

Chrome 132 がリリースされた。

https://developer.chrome.com/blog/new-in-chrome-132

#Element Capture

Chrome 132 では、現在のタブのキャプチャに加えて、要素のキャプチャが可能になった。

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

キャプチャ対象

次のようにして、要素をキャプチャすることが出来る。

js
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [videoTrack] = stream.getVideoTracks();
const target = document.getElementById("rt-ElCap");
const restrictionTarget = await RestrictionTarget.fromElement(target);

await videoTrack.restrictTo(restrictionTarget);
video.srcObject = stream;

ただし、キャプチャ対象の要素はスタッキングコンテキストを持っている必要がある。

#dialog 要素の toggle イベント

Chrome 132 では、dialog要素が開閉した際に発火するtoggleイベントが追加された。また、開閉直前に発火するbeforetoggleイベントも追加された。

js
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog opened");
  }
});

#File System API が Android や WebView でも利用可能に

File System API は、今まで Safari や Firefox に加えて Chrome でもモバイルでは利用出来なかったが、Chrome 132 から Android では利用可能になった。

File System API（File System Access API）は、ローカルにあるファイルやディレクトリへのアクセス権のユーザーへのリクエストや、許可されたファイルやディレクトリへの操作を提供する API。

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API

js
const fileHandles = await window.showOpenFilePicker();
const file = await fileHandles[0].getFile();
編集