Chrome 87의 새로운 기능

Pete LePage

Twitter GitHub Glitch Mastodon 홈페이지

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

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

• 12월 9일과 10일에 Chrome Dev Summit이 돌아옵니다.
• 이제 이 기능을 지원하는 웹캠에서 화면 이동, 기울이기, 확대/축소를 제어할 수 있습니다.
• 범위 요청 및 서비스 워커에는 많은 해결 방법이 필요하지 않습니다.
• font access API가 오리진 트라이얼을 시작합니다.
• 이 외에도 다양한 기능이 제공됩니다.

저는 Pete LePage입니다. 재택근무를 하고 있고요. 이제 Chrome 87의 개발자를 위한 새로운 기능을 살펴보겠습니다.

Chrome 개발자 서밋

Chrome Dev Summit이 12월 9일과 10일에 8번째 챕터로 돌아왔습니다. 하지만 이번에는 여러분에게 다가갑니다. Google은 모든 최신 업데이트와 새로운 콘텐츠, 그리고 수많은 크로미를 선보입니다.

유익한 대담, 워크숍, 실무자와의 만남 등 다양한 세션이 마련되어 있으며 여러분의 질문에 답해 드리기 위해 YouTube 채팅으로 찾아 드리겠습니다. 자세히 알아보고 시청뿐 아니라 참여 방법도 확인하세요.

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

Google의 회의실에는 대부분 화면 이동, 기울이기, 확대/축소 기능이 있는 카메라가 있어서 카메라가 회의실에 있는 사람들을 향하도록 할 수 있습니다. 고급 회의 카메라뿐만 아니라 팬, 틸트, 확대/축소와 같은 PTZ를 지원하는 웹캠도 많습니다.

Chrome 87부터 사용자가 권한을 부여하면 이제 카메라의 PTZ 기능을 제어할 수 있습니다.

특성 감지는 익숙한 기술과 약간 다릅니다. 브라우저가 PTZ를 지원하는지 확인하려면 navigator.mediaDevices.getSupportedConstraints()를 호출해야 합니다.

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에서 톰의 로컬 글꼴로 고급 서체 사용 도움말에서 모든 세부정보가 나와 있는 문서를 확인하고 오리진 트라이얼 링크를 통해 직접 사용해 보세요.

기타

• 전송 가능한 스트림: 이제 ReadableStream, WritableStream, TransformStream 객체를 postMessage()에 인수로 전달할 수 있습니다.
• 이러한 논리적 속성과 값을 좀 더 쉽게 작성할 수 있도록 약식과 오프셋을 비롯하여 CSS 논리 속성 및 값 사양의 가장 세부적인 flow-relative 기능을 구현했습니다. 예를 들어 단일 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 지원 중단 및 삭제
• Chrome 87용 ChromeStatus.com 업데이트
• Chrome 87의 자바스크립트 관련 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

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

저는 Pete LePage입니다. Chrome 88이 출시되면 바로 이곳에서 Chrome의 새로운 기능을 소개해 드리겠습니다