ใหม่ใน Chrome 87

Pete LePage

Chrome 87 กำลังเริ่มเปิดตัวเวอร์ชันเสถียรแล้ว

สิ่งที่จำเป็นต้องทราบมีดังนี้

ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน ไปดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 87

Chrome Dev Summit

โลโก้ Chrome Dev Summit

Chrome Dev Summit จะจัดขึ้นในวันที่ 9 และ 10 ธันวาคมพร้อมกับบทที่ 8 แต่ครั้งนี้ เราจะไปหาคุณ เราจะนำข้อมูลอัปเดตล่าสุดทั้งหมด คอนเทนต์ใหม่มากมาย และเหล่า Chromies จำนวนมากมาให้คุณ

เรามีการพูดคุยที่น่าสนใจมากมาย รวมถึงเวิร์กช็อป เวลาทำการ ฯลฯ และเราจะอยู่ในแชท YouTube เพื่อตอบคำถามของคุณ ดูข้อมูลเพิ่มเติมและดูวิธีเข้าร่วมกิจกรรม

เลื่อน เอียง ซูมกล้อง

ห้องประชุมส่วนใหญ่ของ Google มีกล้องที่สามารถหมุน บิด และซูมได้ เพื่อให้กล้องสามารถเล็งไปยังผู้คนในห้องได้ แต่ไม่ใช่แค่กล้องวิดีโอคอนเฟอเรนซ์ราคาแพงเท่านั้นที่รองรับ PTZ (Pan, Tilt, Zoom) เว็บแคมหลายรุ่นก็รองรับเช่นกัน

เริ่มตั้งแต่ Chrome 87 เป็นต้นไป เมื่อผู้ใช้ให้สิทธิ์แล้ว คุณจะควบคุมฟีเจอร์ PTZ ในกล้องได้

การตรวจหาองค์ประกอบจะแตกต่างจากที่คุณเคยใช้อยู่เล็กน้อย คุณต้องโทรหา navigator.mediaDevices.getSupportedConstraints() เพื่อดูว่าเบราว์เซอร์รองรับ PTZ หรือไม่

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

ข้อความแจ้งเกี่ยวกับสิทธิ์สำหรับ PTZ

จากนั้นผู้ใช้จะต้องให้สิทธิ์เข้าถึงกล้องและฟังก์ชัน PTZ ด้วย เช่นเดียวกับ API ที่มีประสิทธิภาพอื่นๆ ทั้งหมด

หากต้องการขอสิทธิ์สำหรับฟังก์ชัน PTZ ให้โทรไปที่ navigator.mediaDevices.getUserMedia() พร้อมข้อจำกัด PTZ ซึ่งจะแสดงข้อความแจ้งให้ผู้ใช้ให้สิทธิ์ทั้งกล้องธรรมดาและกล้องที่มี 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 ซึ่งมีให้ใช้งานในเบราว์เซอร์หลักๆ มานานหลายปี ทำให้เซิร์ฟเวอร์ส่งข้อมูลที่ขอไปยังไคลเอ็นต์ได้เป็นส่วนย่อยๆ ความสามารถนี้มีประโยชน์อย่างยิ่งสำหรับไฟล์สื่อขนาดใหญ่ ซึ่งปรับปรุงประสบการณ์ของผู้ใช้ด้วยการเล่นที่ราบรื่นขึ้น การสครับที่ได้รับการปรับปรุง ตลอดจนฟังก์ชันการหยุดชั่วคราวและกลับมาใช้งานต่อที่ดียิ่งขึ้น

ที่ผ่านมา คำขอช่วงและ Service Worker ทำงานร่วมกันได้ไม่ดีนัก ทำให้นักพัฒนาแอปต้องหาวิธีแก้ปัญหาชั่วคราว เริ่มตั้งแต่ 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

ช่วงทดลองใช้จากต้นทาง: API การเข้าถึงแบบอักษร

ภาพหน้าจอของเครื่องมือแก้ไขรูปภาพ Photopea

การนําแอปออกแบบอย่าง Figma, Gravit Designer และ Photopea มาใช้ในเว็บเป็นเรื่องที่ยอดเยี่ยม และเรากําลังจะเห็นแอปอื่นๆ อีกมากมายตามมา แม้ว่าเว็บจะมีแบบอักษรมากมาย แต่ก็มีแบบอักษรบางแบบที่ไม่พร้อมใช้งานบนเว็บ

นักออกแบบหลายคนมีแบบอักษรบางแบบในคอมพิวเตอร์ซึ่งมีความสำคัญต่องาน เช่น แบบอักษรของโลโก้บริษัท หรือแบบอักษรเฉพาะสำหรับ CAD และแอปพลิเคชันการออกแบบอื่นๆ

เมื่อใช้ Font Access API ซึ่งเริ่มการทดลองใช้แหล่งที่มาใน Chrome 87 ตอนนี้เว็บไซต์จะระบุแบบอักษรที่ติดตั้งได้ ซึ่งช่วยให้ผู้ใช้เข้าถึงแบบอักษรทั้งหมดในระบบได้


// 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 เพื่อให้คุณลองใช้ด้วยตนเอง

และอื่นๆ

  • ขณะนี้คุณสามารถส่งสตรีมที่โอนได้ - ออบเจ็กต์ ReadableStream, WritableStream และ TransformStream เป็นอาร์กิวเมนต์ไปยัง postMessage()
  • เราได้ติดตั้งใช้งานฟีเจอร์ flow-relative ที่ละเอียดที่สุดของข้อกำหนดพร็อพเพอร์ตี้และค่าเชิงตรรกะของ CSS รวมถึงนิพจน์สั้นและระยะเพื่อเขียนพร็อพเพอร์ตี้และค่าเชิงตรรกะเหล่านี้ได้ง่ายขึ้น เช่น พร็อพเพอร์ตี้ margin-block รายการเดียวอาจแทนที่กฎ margin-block-start และ margin-block-end แยกต่างหากได้
  • เพิ่มข้อบ่งชี้ @font-face ใหม่ใน ascent-override, descent-override และ line-gap-override เพื่อลบล้างเมตริกของแบบอักษรแล้ว
  • มีพร็อพเพอร์ตี้ text-decoration และ underline ใหม่หลายรายการ
  • และยังมีการเปลี่ยนแปลงอีกหลายอย่างที่เกี่ยวข้องกับการแยกแหล่งที่มาหลายแหล่ง

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 87 ได้ที่ลิงก์ด้านล่าง

สมัครใช้บริการ

หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และทันทีที่ Chrome 88 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome