Chrome 87-এ নতুন

পিট লেপেজ

Chrome 87 এখন স্থিতিশীল হতে শুরু করছে।

আপনার যা জানা দরকার তা এখানে:

আমি Pete LePage , কাজ করছি, এবং বাড়ি থেকে শুটিং করছি, চলুন ডুব দিয়ে দেখি Chrome 87-এ ডেভেলপারদের জন্য নতুন কী আছে!

ক্রোম ডেভ সামিট

ক্রোম ডেভ সামিট লোগো

ক্রোম ডেভ সামিট তার ৮ম অধ্যায় নিয়ে ৯ ও ১০ ডিসেম্বর ফিরে এসেছে। কিন্তু এইবার, আমরা আপনার কাছে আসছি। আমরা সব সাম্প্রতিক আপডেট, প্রচুর নতুন সামগ্রী এবং প্রচুর 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.
}

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 সম্পর্কে সত্যিই উত্তেজিত, তাই আমি আমার অগোছালো রান্নাঘরটি লুকিয়ে রাখতে পারি, কিন্তু আপনাকে এটি দেখতে ভিডিওটি দেখতে হবে!

ফ্রাঙ্কোইসের একটি দুর্দান্ত পোস্ট কন্ট্রোল ক্যামেরা প্যান, টিল্ট, এবং কোড নমুনা সহ 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-এ একজন পরিষেবা কর্মীতে পরিসীমা অনুরোধগুলি পরিচালনা করা ৷

অরিজিন ট্রায়াল: ফন্ট অ্যাক্সেস API

Photopea ইমেজ এডিটরের স্ক্রিন শট

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

টমের নিবন্ধটি দেখুন সমস্ত বিবরণ সহ web.dev-এ স্থানীয় ফন্টগুলির সাথে উন্নত টাইপোগ্রাফি ব্যবহার করুন এবং অরিজিন ট্রায়ালের লিঙ্কটি দেখুন যাতে আপনি নিজে চেষ্টা করতে পারেন।

এবং আরো

  • স্থানান্তরযোগ্য স্ট্রীম - ReadableStream , WritableStream , এবং TransformStream অবজেক্টগুলি এখন postMessage() এ আর্গুমেন্ট হিসাবে পাস করা যেতে পারে।
  • আমরা CSS লজিক্যাল প্রপার্টি এবং ভ্যালুস স্পেকের সবচেয়ে দানাদার 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 এ নতুন কি!