Chrome 63/64-এ মিডিয়া আপডেট

François Beaufort

• ওয়েব ডেভেলপাররা এখন ভবিষ্যদ্বাণী করতে পারে প্লেব্যাক মসৃণ এবং শক্তি দক্ষ হবে কিনা ।
• Chrome এখন Windows 10-এ HDR ভিডিও প্লেব্যাক সমর্থন করে৷
• অবিরাম লাইসেন্স সহ অফলাইন প্লেব্যাক এখন Windows এবং Mac এ সমর্থিত।
• <video> এবং <audio> উপাদানগুলির জন্য ডিফল্ট প্রিলোড মান এখন "metadata" ।
• মিডিয়া প্লেব্যাক রেট অসমর্থিত হলে একটি ত্রুটি এখন নিক্ষেপ করা হয়৷
• Chrome এখন সমস্ত ব্যাকগ্রাউন্ড ভিডিও-কেবল মিডিয়া পজ করে ।
• চরম প্লেব্যাকরেটের জন্য অডিও আর নিঃশব্দ করা হয় না ।

মিডিয়া ক্ষমতা - ডিকোডিং তথ্য API

আজ, ওয়েব ডেভেলপাররা কিছু মিডিয়া ডিকোড করা যায় কি না তা অস্পষ্টভাবে জানার জন্য isTypeSupported() বা canPlayType() এর উপর নির্ভর করে। যদিও আসল প্রশ্নটি হওয়া উচিত: "এই ডিভাইসে এটি কতটা ভাল কাজ করবে?"

প্রস্তাবিত মিডিয়া ক্যাপাবিলিটিগুলি যে জিনিসগুলি সমাধান করতে চায় তার মধ্যে এটি ঠিক একটি: কোডেক, প্রোফাইল, রেজোলিউশন, বিটরেট ইত্যাদির মতো তথ্যের উপর ভিত্তি করে ডিভাইসের ডিকোডিং ক্ষমতা সম্পর্কে ব্রাউজারকে জিজ্ঞাসা করার জন্য একটি API৷ এটি তথ্য প্রকাশ করবে যেমন ব্রাউজার দ্বারা রেকর্ড করা পূর্ববর্তী প্লেব্যাক পরিসংখ্যানের উপর ভিত্তি করে প্লেব্যাকটি মসৃণ এবং শক্তি দক্ষ হওয়া উচিত কিনা।

সংক্ষেপে, ডিকোডিং ইনফো API আপাতত কীভাবে কাজ করে তা এখানে। অফিসিয়াল নমুনা দেখুন।

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

আপনি বিভিন্ন মিডিয়া কনফিগারেশন চেষ্টা করতে পারেন যতক্ষণ না আপনি সেরাটি ( smooth এবং powerEfficient ) খুঁজে পান এবং উপযুক্ত মিডিয়া স্ট্রীম চালাতে এটি ব্যবহার করেন। যাইহোক, Chrome এর বর্তমান বাস্তবায়ন পূর্বে রেকর্ড করা প্লেব্যাক তথ্যের উপর ভিত্তি করে। এটি smooth সত্য হিসাবে সংজ্ঞায়িত করে যখন ড্রপ করা ফ্রেমের শতাংশ 10% এর কম হয় এবং যখন 50% এর বেশি ফ্রেম হার্ডওয়্যার দ্বারা ডিকোড করা হয় তখন powerEfficient সত্য। ছোট ফ্রেম সবসময় শক্তি দক্ষ বলে মনে করা হয়.

আমি উপলভ্যতা সনাক্ত করতে এবং এই API সমর্থন করে না এমন ব্রাউজারগুলির জন্য আপনার বর্তমান বাস্তবায়নে ফিরে আসার জন্য নীচেরটির মতো একটি স্নিপেট ব্যবহার করার পরামর্শ দিই৷

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

মূল পরীক্ষার জন্য উপলব্ধ

ক্ষেত্রের মধ্যে Decoding Info API (মিডিয়া ক্ষমতার অংশ) ব্যবহার করে ডেভেলপারদের কাছ থেকে যতটা সম্ভব প্রতিক্রিয়া পাওয়ার জন্য, আমরা পূর্বে এই বৈশিষ্ট্যটি Chrome 64-এ একটি অরিজিন ট্রায়াল হিসেবে যুক্ত করেছি।

ট্রায়াল সফলভাবে এপ্রিল 2018 এ শেষ হয়।

পরীক্ষা করার অভিপ্রায় | জাহাজের অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ

Windows 10 এ HDR ভিডিও প্লেব্যাক

হাই ডায়নামিক রেঞ্জ (HDR) ভিডিওগুলিতে উচ্চতর বৈসাদৃশ্য রয়েছে, যা আগের চেয়ে আরও স্পষ্টতার সাথে সুনির্দিষ্ট, বিশদ ছায়া এবং অত্যাশ্চর্য হাইলাইটগুলি প্রকাশ করে৷ তাছাড়া প্রশস্ত রঙের স্বরগ্রামের জন্য সমর্থন মানে রঙগুলি আরও প্রাণবন্ত।

যেহেতু VP9 প্রোফাইল 2 10-বিট প্লেব্যাক এখন Windows 10 ফল ক্রিয়েটর আপডেটের জন্য Chrome-এ সমর্থিত, Windows 10 HDR মোডে থাকলে Chrome অতিরিক্ত HDR ভিডিও প্লেব্যাক সমর্থন করে। একটি টেকনিক্যাল নোটে, Chrome 64 এখন scRGB কালার প্রোফাইল সমর্থন করে যার ফলে মিডিয়া HDR-এ প্লে ব্যাক করার অনুমতি দেয়।

আপনি YouTube-এ 4K (ULTRA HD) তে দ্য ওয়ার্ল্ড এইচডিআর দেখে এটি একবার চেষ্টা করে দেখতে পারেন এবং ইউটিউব প্লেয়ারের মানের সেটিং দেখে এটি HDR চালায় কিনা তা পরীক্ষা করে দেখতে পারেন।

এখন আপনার যা দরকার তা হল Windows 10 ফল ক্রিয়েটর আপডেট, একটি HDR-সামঞ্জস্যপূর্ণ গ্রাফিক্স কার্ড এবং ডিসপ্লে (যেমন NVIDIA 10-সিরিজ কার্ড, LG HDR টিভি বা মনিটর), এবং Windows ডিসপ্লে সেটিংসে HDR মোড চালু করুন।

ওয়েব ডেভেলপাররা সাম্প্রতিক কালার-গামুট মিডিয়া ক্যোয়ারী এবং screen.colorDepth- এর সাহায্যে স্ক্রিনে একটি রঙ প্রদর্শন করতে ব্যবহৃত বিটের সংখ্যার সাহায্যে আউটপুট ডিভাইস দ্বারা সমর্থিত আনুমানিক রঙ স্বরগ্রাম সনাক্ত করতে পারে। উদাহরণস্বরূপ VP9 HDR সমর্থিত কিনা তা সনাক্ত করতে সেগুলি ব্যবহার করার একটি উপায় এখানে রয়েছে:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

উপরের উদাহরণে প্রোফাইল 2 সহ VP9 কোডেক স্ট্রিংটি isTypeSupported() এ পাস করা হয়েছে আপনার ভিডিও এনকোডিং বৈশিষ্ট্যের উপর ভিত্তি করে আপডেট করা দরকার।

মনে রাখবেন যে CSS , ক্যানভাস , ছবি এবং সুরক্ষিত বিষয়বস্তুতে HDR রং নির্ধারণ করা এখনও সম্ভব নয়। Chrome টিম এটি নিয়ে কাজ করছে। সঙ্গে থাকুন!

উইন্ডোজ এবং ম্যাকের জন্য অবিরাম লাইসেন্স

এনক্রিপ্টেড মিডিয়া এক্সটেনশনে (ইএমই) স্থায়ী লাইসেন্স মানে ডিভাইসে লাইসেন্সটি টিকে থাকতে পারে যাতে অ্যাপ্লিকেশনগুলি সার্ভারে অন্য লাইসেন্স অনুরোধ না পাঠিয়ে লাইসেন্সটিকে মেমরিতে লোড করতে পারে। এইভাবে অফলাইন প্লেব্যাক ইএমইতে সমর্থিত হয়।

এখন পর্যন্ত, ক্রমাগত লাইসেন্স সমর্থন করার জন্য ChromeOS এবং Android ছিল একমাত্র প্ল্যাটফর্ম। এটা আর সত্য নয়। ডিভাইসটি অফলাইনে থাকাকালীন EME এর মাধ্যমে সুরক্ষিত সামগ্রী চালানো এখন Windows এবং Mac-এ Chrome 64-এও সম্ভব।

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

আপনি নমুনা মিডিয়া পিডব্লিউএ পরীক্ষা করে এবং এই পদক্ষেপগুলি অনুসরণ করে নিজেকে ক্রমাগত লাইসেন্স চেষ্টা করতে পারেন:

1. https://biograf-155113.appspot.com/ttt/episode-2/ এ যান
2. "অফলাইনে উপলব্ধ করুন" ক্লিক করুন এবং ভিডিওটি ডাউনলোড হওয়ার জন্য অপেক্ষা করুন৷
3. আপনার ইন্টারনেট সংযোগ বন্ধ করুন।
4. "প্লে" বোতামে ক্লিক করুন এবং ভিডিও উপভোগ করুন!

মিডিয়া প্রিলোড ডিফল্ট "মেটাডেটা" এ

অন্যান্য ব্রাউজারগুলির বাস্তবায়নের সাথে মিলে, Chrome ডেস্কটপ এখন ব্যান্ডউইথ এবং সম্পদের ব্যবহার কমাতে <video> এবং <audio> উপাদানগুলির জন্য ডিফল্ট প্রিলোড মান সেট করে "metadata" এ। Chrome 64 থেকে শুরু করে, এই নতুন আচরণ শুধুমাত্র সেই ক্ষেত্রে প্রযোজ্য যেখানে কোনো প্রিলোড মান সেট করা নেই। নোট করুন যে প্রিলোড অ্যাট্রিবিউটের ইঙ্গিতটি বাতিল করা হয় যখন একটি MediaSource মিডিয়া উপাদানের সাথে সংযুক্ত থাকে কারণ ওয়েব সাইটটি নিজস্ব প্রিলোড পরিচালনা করে।

অন্য কথায়, <video> প্রিলোড মান এখন "metadata" যেখানে <video preload="auto"> প্রিলোড মান "auto" থাকে। অফিসিয়াল নমুনা চেষ্টা করুন.

জাহাজের অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ

অসমর্থিত প্লেব্যাক রেট একটি ব্যতিক্রম উত্থাপন করে৷

একটি এইচটিএমএল স্পেসিফিকেশন পরিবর্তনের পর, যখন মিডিয়া উপাদানগুলির playbackRate এমন একটি মানতে সেট করা হয় যা Chrome দ্বারা সমর্থিত নয় (যেমন একটি নেতিবাচক মান), Chrome 63-এ একটি "NotSupportedError" DOMException নিক্ষেপ করা হয়৷

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

যাইহোক, ক্রোমের বর্তমান বাস্তবায়ন এই ব্যতিক্রমটিকে উত্থাপন করে যখন playbackRate হয় নেতিবাচক, 0.0625-এর কম বা 16-এর বেশি হয়৷ এটি কার্যকরভাবে দেখতে অফিসিয়াল নমুনাটি চেষ্টা করুন৷

জাহাজের অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ

পটভূমি ভিডিও ট্র্যাক অপ্টিমাইজেশান

ক্রোম টিম সর্বদা ব্যাটারি জীবন উন্নত করার জন্য নতুন উপায় খুঁজে বের করার চেষ্টা করে এবং Chrome 63 এর ব্যতিক্রম ছিল না।

ভিডিওতে কোনো অডিও ট্র্যাক না থাকলে, ক্রোম ডেস্কটপে (উইন্ডোজ, ম্যাক, লিনাক্স, এবং ক্রোমওএস) ব্যাকগ্রাউন্ডে (যেমন, একটি অদৃশ্যমান ট্যাবে) চালানো হলে ভিডিওটি স্বয়ংক্রিয়ভাবে পজ হয়ে যাবে। এটি একটি অনুরূপ পরিবর্তন থেকে একটি ফলো-আপ যা শুধুমাত্র Chrome 62-এর MSE ভিডিওগুলিতে প্রয়োগ করা হয়েছিল৷

ক্রোমিয়াম বাগ

চরম প্লেব্যাক রেটের জন্য মিউটিং সরান

Chrome 64-এর আগে, যখন playbackRate 0.5-এর নিচে বা 4-এর উপরে ছিল তখন সাউন্ড নিঃশব্দ করা হত কারণ গুণমান উল্লেখযোগ্যভাবে কমে গিয়েছিল। গুণমান অবনতির জন্য ক্রোম একটি ওয়েভফর্ম-সিমিলারিটি-ওভারল্যাপ-অ্যাড (WSOLA) পদ্ধতিতে স্যুইচ করেছে, তাই শব্দকে আর নিঃশব্দ করার দরকার নেই। এর মানে আপনি এখন সুপার স্লো এবং সুপার ফাস্ট সাউন্ড চালাতে পারবেন।

ক্রোমিয়াম বাগ