Chrome 87 में नया

Pete LePage

Chrome 87 को अब स्टेबल वर्शन के तौर पर रोल आउट किया जा रहा है.

यहां आपके जानने योग्य तथ्य दिए गए हैं:

• Chrome Dev Summit 9 और 10 दिसंबर को फिर से शुरू हो रहा है.
• अब वेबकैम पर पैन, झुकाना, और ज़ूम किया जा सकता है. हालांकि, इसके लिए ज़रूरी है कि वेबकैम में यह सुविधा काम करती हो.
• रेंज के अनुरोध और सर्विस वर्कर के लिए, समस्या हल करने के उतने तरीके नहीं ज़रूरी हैं.
• font access API का ऑरिजिन ट्रायल शुरू हो जाता है.
• इसके अलावा, और भी बहुत कुछ है.

नमस्ते, मैं पीट लेपेज हूं. फ़िलहाल, मैं घर से काम कर रहा हूं और वीडियो रिकॉर्ड कर रहा हूं. आइए, Chrome 87 में डेवलपर के लिए क्या नया है, इस बारे में जानें!

Chrome Dev Summit

Chrome Dev Summit का आठवां चैप्टर 9 और 10 दिसंबर को होगा. हालांकि, इस बार हम आपके पास आ रहे हैं. हम आपको सभी नए अपडेट, ढेर सारा नया कॉन्टेंट, और कई Chromies उपलब्ध करा रहे हैं.

इसमें कई शानदार बातचीत, वर्कशॉप, ऑफ़िस में कामकाज के घंटे वगैरह शामिल हैं. साथ ही, हम YouTube चैट में आपके सवालों के जवाब देंगे. ज़्यादा जानें और यह पता लगाएं कि लाइव स्ट्रीम को सिर्फ़ देखने के अलावा, उसमें कैसे हिस्सा लिया जा सकता है!

कैमरे को पैन करना, झुकाना, और ज़ूम करना

Google के ज़्यादातर मीटिंग रूम में पैन, टिल्ट, और ज़ूम करने की सुविधा वाले कैमरे होते हैं. इससे, कैमरे को कमरे में मौजूद लोगों पर फ़ोकस किया जा सकता है. हालांकि, सिर्फ़ बेहतरीन क्वालिटी वाले कॉन्फ़्रेंस कैमरे ही पैन, झुकाने, और ज़ूम करने की सुविधा के साथ काम नहीं करते. कई वेब कैमरे भी इस सुविधा के साथ काम करते हैं.

Chrome 87 से, उपयोगकर्ता की अनुमति मिलने के बाद, कैमरे पर PTZ सुविधाओं को कंट्रोल किया जा सकता है.

फ़ीचर का पता लगाने की सुविधा, शायद आपके लिए थोड़ी अलग हो. ब्राउज़र में PTZ की सुविधा काम करती है या नहीं, यह जानने के लिए आपको navigator.mediaDevices.getSupportedConstraints() को कॉल करना होगा.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera 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 के साथ काम करता है या नहीं.

रेंज के अनुरोध और सेवा करने वाले वर्कर्स

एचटीटीपी रेंज अनुरोध, कई सालों से मुख्य ब्राउज़र में उपलब्ध हैं. इनकी मदद से, सर्वर क्लाइंट को अनुरोध किया गया डेटा, अलग-अलग हिस्सों में भेज सकते हैं. यह सुविधा खास तौर पर बड़ी मीडिया फ़ाइलों के लिए काम की है. इनमें, वीडियो को आसानी से चलाने, बेहतर तरीके से स्क्रेब करने, और उसे रोकने और फिर से चलाने की सुविधाओं की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाया जाता है.

पहले, रेंज रिक्वेस्ट और सर्विस वर्कर एक साथ ठीक से काम नहीं करते थे. इसलिए, डेवलपर को समस्या हल करने के लिए, दूसरे तरीके अपनाने पड़ते थे. 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 पर जेफ़ का लेख सेवा वर्कर में रेंज रिक्वेस्ट मैनेज करना पढ़ें.

Origin Trial: Font access API

Figma, Gravit Designer, और Photopea जैसे डिज़ाइन ऐप्लिकेशन को वेब पर उपलब्ध कराना बहुत अच्छा है. साथ ही, हमें आने वाले समय में और भी कई ऐप्लिकेशन वेब पर उपलब्ध कराने हैं. वेब पर कई तरह के फ़ॉन्ट उपलब्ध होते हैं, लेकिन वे सभी वेब पर उपलब्ध नहीं होते.

कई डिज़ाइनर के कंप्यूटर पर कुछ फ़ॉन्ट इंस्टॉल होते हैं, जो उनके काम के लिए ज़रूरी होते हैं. उदाहरण के लिए, कॉर्पोरेट लोगो फ़ॉन्ट या सीएडी और अन्य डिज़ाइन ऐप्लिकेशन के लिए खास फ़ॉन्ट.

फ़ॉन्ट ऐक्सेस एपीआई की मदद से, अब साइट पर इंस्टॉल किए गए फ़ॉन्ट की जानकारी दी जा सकती है. इससे, उपयोगकर्ताओं को अपने सिस्टम पर मौजूद सभी फ़ॉन्ट का ऐक्सेस मिल जाता है. यह एपीआई, 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 Trial का लिंक भी दिया गया है, ताकि आप इसे खुद आज़मा सकें.

अन्य डेटा

• ट्रांसफ़र की जा सकने वाली स्ट्रीम - ReadableStream, WritableStream, और TransformStream ऑब्जेक्ट को अब postMessage() के लिए आर्ग्युमेंट के तौर पर पास किया जा सकता है.
• हमने सीएसएस लॉजिकल प्रॉपर्टी और वैल्यू के स्पेसिफ़िकेशन की सबसे बेहतर 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 Developers के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

मेरा नाम पीट लेपेज है. Chrome 88 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!