ใหม่ใน Chrome 87

Pete LePage

Twitter GitHub Glitch Mastodon หน้าแรก

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

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

• Chrome Dev Summit กลับมาแล้วในวันที่ 9 และ 10 ธันวาคม
• ตอนนี้คุณสามารถควบคุมแพน เอียง และซูมบนเว็บแคมที่รองรับแล้ว
• คำขอแบบช่วงและโปรแกรมทำงานจึงไม่ต้องใช้วิธีแก้ปัญหาเบื้องต้นมากนัก
• API การเข้าถึงแบบอักษรจะเริ่มช่วงทดลองใช้จากต้นทาง
• นอกจากนี้ยังมีอีกมากมาย

ฉันชื่อ Pete LePage ทำงานและถ่ายวิดีโอ จากที่บ้าน มาสำรวจว่ามีอะไรใหม่ใน Chrome 87 กัน

การประชุมสุดยอด Chrome Dev

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

เรามีการพูดคุยดีๆ มากมาย เวิร์กช็อป เวลาทำการ ฯลฯ เราจะแชทกันใน 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.
}

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

ก่อนหน้านี้ โปรแกรมทำงานของบริการสำหรับคำขอแบบช่วงได้ไม่ดีเท่าที่ควร ทำให้นักพัฒนาซอฟต์แวร์ต้องสร้างวิธีแก้ปัญหาเฉพาะหน้า ตั้งแต่ 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 ในบทความการจัดการคำขอช่วงใน Service Worker ของเจฟฟ์ใน web.dev

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

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

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

เมื่อใช้ 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 ที่ชื่อ Use Advanced typography with local Fonts ใน web.dev ซึ่งมีรายละเอียดทั้งหมดและลิงก์ไปยังช่วงทดลองใช้จากต้นทางเพื่อให้คุณลองใช้งานเองได้

และอื่นๆ

• สตรีมที่โอนได้ - ตอนนี้คุณสามารถส่งออบเจ็กต์ 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

• มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (87)
• การเลิกใช้งานและการนำ Chrome 87 ออก
• การอัปเดต ChromeStatus.com สำหรับ Chrome 87
• มีอะไรใหม่ใน JavaScript ใน Chrome 87
• รายการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium

ติดตาม

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

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