Chrome 87의 새로운 기능

Pete LePage

Chrome 87이 안정화 버전으로 출시되기 시작했습니다.

다음 사항에 유의하시기 바랍니다.

• 12월 9일과 10일에 Chrome Dev Summit이 다시 열립니다.
• 이제 이를 지원하는 웹캠에서 화면 이동, 기울이기, 확대/축소를 제어할 수 있습니다.
• 범위 요청 및 서비스 워커에는 해결 방법이 그렇게 많이 필요하지 않습니다.
• font access API의 오리진 체험판이 시작됩니다.
• 이 외에도 다양한 기능이 있습니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 87에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

Chrome Dev Summit

12월 9일과 10일에 Chrome Dev Summit 8차 회의가 열립니다. 하지만 이번에는 여러분께 나오겠습니다. 최신 업데이트, 수많은 신규 콘텐츠, 다양한 Chromebook을 만나볼 수 있습니다.

흥미로운 강연, 워크숍, 상담 시간 등이 마련되어 있으며 YouTube 채팅을 통해 질문에 답변해 드리겠습니다. 자세히 알아보고 시청뿐만 아니라 참여하는 방법을 알아보세요.

카메라 화면 이동, 기울이기, 확대/축소

Google의 대부분의 회의실에는 화면 이동, 기울이기, 확대/축소 기능이 있는 카메라가 있어 카메라가 회의실에 있는 사람을 향하게 할 수 있습니다. 하지만 팬, 틸트, 확대/축소와 같이 PTZ를 지원하는 고급 회의 카메라만이 아닙니다. 많은 웹캠에서도 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 기능이 가장 마음에 듭니다. 지저분한 주방을 숨길 수 있거든요. 이 기능을 확인하려면 동영상을 시청해 보세요.

프랑소와가 web.dev에 카메라 화면 이동, 기울기, 확대/축소 제어라는 유용한 게시물을 작성했습니다. 이 게시물에는 코드 샘플, 권한을 요청하는 가장 좋은 방법에 관한 자세한 내용, 데모가 포함되어 있어 웹캠에서 PTZ를 지원하는지 확인해 볼 수 있습니다.

범위 요청 및 서비스 워커

수년간 주요 브라우저에서 사용할 수 있었던 HTTP 범위 요청을 사용하면 서버가 요청된 데이터를 클라이언트로 청크 단위로 전송할 수 있습니다. 이는 특히 더 원활한 재생, 향상된 스크러빙, 더 나은 일시중지 및 재개 기능을 통해 사용자 환경이 개선되는 대용량 미디어 파일에 유용합니다.

이전에는 범위 요청과 서비스 작업자가 함께 제대로 작동하지 않았기 때문에 개발자가 해결 방법을 찾아야 했습니다. Chrome 87부터 서비스 워커 내부에서 네트워크로 범위 요청을 전달하면 '그냥 작동'합니다.

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

범위 요청 문제와 Chrome 87에서 변경된 사항에 관한 설명은 web.dev의 서비스 워커에서 범위 요청 처리에 관한 제프의 도움말을 참고하세요.

오리진 트라이얼: Font access API

Figma, Gravit Designer, Photopea와 같은 디자인 앱을 웹으로 가져오는 것은 좋은 일이며 앞으로 더 많은 앱이 출시될 예정입니다. 웹은 다양한 글꼴을 제공할 수 있지만 웹에서는 일부 글꼴을 사용할 수 없습니다.

많은 디자이너의 경우 작업에 중요한 글꼴이 컴퓨터에 설치되어 있습니다. 예를 들어 회사 로고 글꼴이나 CAD 및 기타 디자인 애플리케이션용 특수 글꼴이 여기에 해당합니다.

Chrome 87에서 출처 무료 체험판을 시작하는 font access 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에서 톰의 로컬 글꼴로 고급 서체 사용 도움말을 확인하여 자세한 내용을 알아보고 직접 사용해 볼 수 있는 Origin 트라이얼 링크를 확인하세요.

기타

• 전송 가능한 스트림 - 이제 ReadableStream, WritableStream, TransformStream 객체를 postMessage()에 인수로 전달할 수 있습니다.
• 이러한 논리적 속성과 값을 더 쉽게 작성할 수 있도록 CSS 논리적 속성 및 값 사양의 가장 세분화된 flow-relative 기능(예: 약어 및 오프셋)을 구현했습니다. 예를 들어 단일 margin-block 속성으로 별도의 margin-block-start 및 margin-block-end 규칙을 대체할 수 있습니다.
• 글꼴의 측정항목을 재정의하기 위해 ascent-override, descent-override, line-gap-override에 새로운 @font-face 설명자가 추가되었습니다.
• 몇 가지 새로운 text-decoration 및 underline 속성이 있습니다.
• 또한 교차 출처 격리와 관련된 여러 변경사항이 있습니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 87의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (87)
• Chrome 87 지원 중단 및 삭제
• Chrome 87의 ChromeStatus.com 업데이트
• Chrome 87의 JavaScript 관련 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

최신 동영상을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 88이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.