इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 87 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

Chrome 87 अब स्टेबल होने वाला है.

यहां आवश्यक जानकारी दी गई है:

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

मैं पीट लीपेज हूं, घर से काम कर रहा/रही हूं और शूटिंग कर रहा हूं. आइए, इसकी गहराई से जांच करते हैं और देखते हैं कि Chrome 87 में डेवलपर के लिए नया क्या है!

Chrome डेवलपर समिट

Chrome डेवलपर समिट 9 और 10 दिसंबर को फिर से शुरू हो रहा है. यह आठवां चैप्टर है. इस बार हम आपके पास हैं. हम सभी नए अपडेट, बहुत सारा नया कॉन्टेंट, और कई 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 के लिए अनुमति का संकेत

इसके बाद, दूसरे सभी दमदार एपीआई की तरह, उपयोगकर्ता को कैमरे के साथ-साथ 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 पर काम करता है या नहीं.

रेंज से जुड़े अनुरोध और सर्विस वर्कर

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

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

ऑरिजिन ट्रायल: फ़ॉन्ट ऐक्सेस एपीआई

Photopea इमेज एडिटर का स्क्रीन शॉट

हम 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);
}

पूरी जानकारी के साथ web.dev पर स्थानीय फ़ॉन्ट के साथ बेहतर टाइपोग्राफ़ी का इस्तेमाल करना और ऑरिजिन ट्रायल का लिंक भी टॉम का लेख देखें, ताकि आप इसे खुद आज़मा सकें.

अन्य डेटा

ट्रांसफ़र की जा सकने वाली स्ट्रीम - 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 डेवलपर के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तो आपको ईमेल से सूचना दी जाएगी.

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