現在、Chrome 87 の安定版のリリースが開始されます。
フォーマットの詳細については次をご覧ください。
- Chrome Dev Summit が 12 月 9 日と 10 日に開催されます。
- パン、傾斜、ズームに対応するウェブカメラで操作できるようになりました。
- 範囲リクエストと Service Worker の場合、必要な回避策はそれほど多くありません。
- font Access API がオリジン トライアルを開始します。
- その他にも、多くのアプリがあります。
私は Pete LePage です。自宅で仕事をしています。では、Chrome 87 でリリースされたデベロッパー向けの新機能を見てみましょう。
Chrome Dev Summit
Chrome Dev Summit が 12 月 9 日と 10 日に開催され、第 8 章を開催します。今回は皆さんが登場します。最新のアップデートと 多くの新しいコンテンツが導入されています
魅力的な講演、ワークショップ、オフィスアワーなどが満載です。YouTube チャットで皆様からのご質問にお答えします。視聴するだけでなく参加する方法についても、詳細でご確認ください。
カメラのパン、チルト、ズーム
Google のほとんどの会議室には、会議室内の人物にカメラを向けることができるように、パン、チルト、ズームの機能を備えたカメラが搭載されています。パン、チルト、ズームといった高性能な会議用カメラだけでなく、多くのウェブカメラでも PTZ がサポートされています。
Chrome 87 以降では、ユーザーが権限を付与すると、カメラの PTZ 機能を制御できるようになりました。
特徴検出は、使い慣れたものとは若干異なります。navigator.mediaDevices.getSupportedConstraints()
を呼び出して、ブラウザが PTZ に対応しているかどうかを確認する必要があります。
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
その後、他のすべての強力な API と同様に、ユーザーはカメラだけでなく PTZ 機能にも権限を付与する必要があります。
PTZ 機能の権限をリクエストするには、PTZ 制約を指定して navigator.mediaDevices.getUserMedia()
を呼び出します。これにより、ユーザーは通常のカメラとカメラの両方に PTZ 権限を付与するように求められます。
try {
const opts = {video: {pan: true, tilt: true, zoom: true}};
const stream = await navigator.mediaDevices.getUserMedia(opts);
document.querySelector("#video").srcObject = stream;
} catch (error) {
// User denies prompt, or
// matching media is not available.
}
最後に、MediaStreamTrack.getSettings()
を呼び出して、カメラでサポートされている機能を確認します。
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();
if ('pan' in settings) {
enablePan(capabilities, settings);
}
// Similar for tilt and zoom...
ユーザーが権限を付与したら、videoTrack.applyConstraints()
を呼び出してパン、傾斜、ズームを調整できます。
function enablePan(capabilities, settings) {
const input = document.getElementById('rangePan');
input.min = capabilities.pan.min;
input.max = capabilities.pan.max;
input.step = capabilities.pan.step;
input.value = settings.pan;
input.addEventListener('input', async () => {
const opts = { advanced: [{ pan: input.value }] };
await videoTrack.applyConstraints(opts);
});
}
個人的には、面倒なキッチンを隠すことができる PTZ がすごく楽しみだけど、 詳しくは動画を見てね!
Francois 氏は カメラのパン、チルト、ズームを制御するという優れた投稿を web.dev で公開しています。コードサンプル、権限をリクエストする最適な方法、デモを使用して、実際に試し、ウェブカメラが PTZ に対応しているかどうかを確認できます。
範囲リクエストと Service Worker
数年前から主要なブラウザで提供されている HTTP 範囲リクエストを使用すると、サーバーはリクエストされたデータをチャンク単位で送信できます。これは、スムーズな再生、スクラブの強化、一時停止と再開の機能の向上によりユーザー エクスペリエンスが向上するため、大きなメディア ファイルで特に役立ちます。
これまで、範囲リクエストとサービス ワーカーはうまく連携せず、デベロッパーは回避策を構築する必要がありました。Chrome 87 以降では、Service Worker 内から範囲のリクエストをネットワークに渡すだけで、
self.addEventListener('fetch', (event) => {
// The Range: header will pass through
// in browsers that behave correctly.
event.respondWith(fetch(event.request));
});
範囲リクエストの問題と Chrome 87 での変更点については、web.dev にアクセスして Jeff の Service Worker での範囲リクエストを処理するをご覧ください。
オリジン トライアル: Font Access API
Figma、Gravit Designer、Photopea などのデザインアプリをウェブに導入するのは素晴らしいことです。今後さらに多くのデザインアプリを導入する予定です。ウェブでは多数のフォントを利用できますが、ウェブですべてを利用できるわけではありません。
多くのデザイナーは、仕事に欠かせないフォントをコンピュータにインストールしています。たとえば、企業ロゴフォントや、CAD やその他のデザイン アプリケーションに特化したフォントなどです。
Chrome 87 でオリジン トライアルが開始されるフォント アクセス API を使用すると、サイトでインストール済みのフォントを列挙できるようになり、ユーザーはシステム上のすべてのフォントにアクセスできます。
// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
for await (const metadata of fonts) {
console.log(`${metadata.family} (${metadata.fullName})`);
}
} catch (err) {
console.error(err);
}
// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)
また、サイトは下位レベルでフックインしてフォントバイトにアクセスし、独自の OpenType レイアウト実装や、グリフ形状に対するベクター フィルタや変換を行うことができます。
const fonts = navigator.fonts.query();
try {
for await (const metadata of fonts) {
const sfnt = await metadata.blob();
makeMagic(metadata.family, sfnt);
}
} catch (err) {
console.error(err);
}
web.dev の Tom の記事ローカル フォントで高度なタイポグラフィを使用するに詳細が記載されており、自分で試せるオリジン トライアルへのリンクがあります。
その他
- 転送可能なストリーム -
ReadableStream
、WritableStream
、TransformStream
の各オブジェクトを引数としてpostMessage()
に渡すことができます。 - CSS の論理プロパティと値の仕様で、詳細な
flow-relative
機能(省略形やオフセットなど)が実装されており、論理プロパティと論理値を少し簡単に記述できるようになっています。たとえば、1 つのmargin-block
プロパティで個別のmargin-block-start
ルールとmargin-block-end
ルールを置き換えることができます。 - フォントの指標をオーバーライドするために、新しい
@font-face
記述子をascent-override
、descent-override
、line-gap-override
に追加しました。 - 新しい
text-decoration
プロパティとunderline
プロパティがいくつか導入されています。 - また、クロスオリジン分離に関連する多くの変更があります。
参考資料
ここでは、主なハイライトの一部のみを取り上げています。Chrome 87 で追加された変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(87)
- Chrome 87 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 87)
- JavaScript の新機能(Chrome 87)
- Chromium ソース リポジトリの変更リスト
チャンネル登録
最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。
Chrome 88 のリリースと同時に Chrome の新機能をお知らせします