Chrome 87이 이제 안정적으로 출시되기 시작했습니다.
알아야 할 사항은 다음과 같습니다.
저는 Pete LePage입니다. 집에서 일하며 촬영하고 있습니다. Chrome 87의 개발자를 위한 새로운 기능에 대해 자세히 알아 보겠습니다.
https://developers.google.com/web/updates/2020/11/nic87
Chrome Dev Summit
Chrome Dev Summit이 12 월 9 일과 10 일에 8 번째 챕터로 돌아 왔습니다. 그러나 이번에는 우리가 당신에게 오고 있습니다. 우리는 모든 최신 업데이트, 많은 새로운 콘텐츠 및 많은 Chromies를 가져오고 있습니다.
훌륭한 강연, 워크숍, 근무 시간 등이 많이 있으며 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에 대해 정말 흥분되어서 지저분한 부엌을 숨길 수는 있지만 비디오를 확인해야 볼 수 있습니다!
Francois는 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에서 변경된 사항에 대한 설명은 Jeff의 문서 web.dev에서 서비스 워커의 범위 요청 처리를 참조하세요.
Origin 평가판 : 글꼴 액세스 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);
}모든 세부 사항이 포함 된 Tom의 기사 Web.dev에서 로컬 글꼴로 고급 타이포그래피 사용 및 Origin Trial 링크를 확인하여 직접 사용해 볼 수 있습니다.
등록된 댓글이 없습니다.
