DAI-এর জন্য IMA SDK ব্যবহার শুরু করা

প্ল্যাটফর্ম বেছে নিন: HTML5 Android iOS tvOS Cast Roku

IMA SDK আপনার ওয়েবসাইট ও অ্যাপে মাল্টিমিডিয়া বিজ্ঞাপন ইন্টিগ্রেট করা সহজ করে তোলে। IMA SDK যেকোনও VAST-মেনে চলা বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক ম্যানেজ করতে পারে। IMA DAI SDK-এর মাধ্যমে, অ্যাপ বিজ্ঞাপন ও কন্টেন্ট ভিডিওর জন্য স্ট্রিম অনুরোধ করে—VOD বা লাইভ কন্টেন্ট, যেকোনও একটি। SDK তারপর একটি সম্মিলিত ভিডিও স্ট্রিম ফেরত পাঠায়, যাতে আপনাকে অ্যাপের মধ্যে বিজ্ঞাপন ও কন্টেন্ট ভিডিওর মধ্যে পরিবর্তন ম্যানেজ করতে না হয়।

আপনার পছন্দের DAI সমাধান বেছে নিন:

Google Cloud Video Stitcher API-এর সাথে রেজিস্টার করা লাইভ স্ট্রিম চালান

এই নির্দেশিকা থেকে আপনি জানতে পারবেন যে কীভাবে HTML5-এর জন্য IMA DAI SDK ব্যবহার করে Google Cloud Video Stitcher API-এর সাথে রেজিস্টার করা কোনও ইভেন্টের জন্য লাইভ স্ট্রিম অনুরোধ ও প্লে করতে হয় এবং কীভাবে প্লেব্যাকের সময় বিজ্ঞাপন বিরতি যোগ করতে হয়।

এই নির্দেশিকা IMA DAI-এর জন্য শুরু করার নির্দেশিকা থেকে প্রাথমিক উদাহরণটি আরও বিস্তারিতভাবে ব্যাখ্যা করে।

অন্যান্য প্ল্যাটফর্মের সাথে ইন্টিগ্রেট করা বা IMA ক্লায়েন্ট-সাইড SDK ব্যবহার করার ব্যাপারে আরও তথ্য পেতে, Interactive Media Ads SDK দেখুন।

সম্পূর্ণ স্যাম্পেল ইন্টিগ্রেশন দেখতে বা অনুসরণ করতে, HLS বা DASH-এর জন্য Cloud ভিডিও স্টিচার স্যাম্পেল ডাউনলোড করুন।

Google Cloud প্রোজেক্ট সেট-আপ করা

Google Cloud প্রোজেক্ট সেট-আপ করুন এবং প্রোজেক্ট অ্যাক্সেস করার জন্য পরিষেবা অ্যাকাউন্ট কনফিগার করুন।

আপনার নিজস্ব কন্টেন্ট লাইভস্ট্রিম বা টেস্ট লাইভ স্ট্রিম ব্যবহার করে লাইভস্ট্রিম ইভেন্টের জন্য কনফিগারেশন তৈরি করুন। এই গাইডে HLS স্ট্রিম ব্যবহার করা হয়।

IMA SDK-তে ব্যবহার করার জন্য নিম্নলিখিত ভেরিয়েবল লিখুন:

লোকেশন
আপনার লাইভ কনফিগারেশন যেখানে তৈরি করা হয়েছে সেই Google Cloud অঞ্চল: LOCATION
প্রোজেক্ট নম্বর
Video Stitcher API ব্যবহার করা Google Cloud প্রোজেক্ট নম্বর: PROJECT_NUMBER
OAuth টোকেন

Video Stitcher ব্যবহারকারীর সাথে পরিষেবা অ্যাকাউন্টের স্বল্পস্থায়ী OAuth টোকেন রোল: 

OAUTH_TOKEN

পরিষেবা অ্যাকাউন্টের জন্য স্বল্প-মেয়াদী ক্রেডেনশিয়াল তৈরি করা সম্পর্কে আরও পড়ুন। OAuth টোকেনের মেয়াদ শেষ না হওয়া পর্যন্ত একাধিক অনুরোধে এটি আবার ব্যবহার করা যেতে পারে।

নেটওয়ার্ক কোড

বিজ্ঞাপনের অনুরোধ করার জন্য Ad Manager নেটওয়ার্ক কোড: NETWORK_CODE

লাইভ কনফিগ আইডি
আপনার লাইভস্ট্রিম ইভেন্ট তৈরি করার সময় আপনি যে লাইভ কনফিগ আইডি উল্লেখ করেছেন: LIVE_CONFIG_ID
কাস্টম অ্যাসেট কী
Video Stitcher API-এর মাধ্যমে লাইভ স্ট্রিম ইভেন্টের জন্য কনফিগারেশন তৈরি করার প্রক্রিয়া চলাকালীন Ad Manager কাস্টম অ্যাসেট কী তৈরি করা হয়েছে: CUSTOM_ASSET_KEY

ডেভেলপমেন্ট এনভায়রনমেন্ট কনফিগার করা

IMA স্যাম্পেল অ্যাপ শুধুমাত্র HLS স্ট্রিম অনুরোধ দেখায়। VideoStitcherLiveStreamRequest ক্লাস তৈরি করার সময় আপনি এখনও DASH স্ট্রিম ব্যবহার করতে পারবেন। DASH-এর সাথে মানানসই প্লেয়ার সেট-আপ করার সময়, আপনার ভিডিও প্লেয়ারের প্রগ্রেস ইভেন্টের জন্য আপনাকে একটি লিসেনার সেট-আপ করতে হবে যা StreamManager.processMetadata()-এ ভিডিওর মেটাডেটা প্রদান করতে পারে। এই ফাংশন তিনটি প্যারামিটার নেয়:

  1. type: একটি স্ট্রিং যা HLS স্ট্রিমের জন্য 'ID3' এবং DASH স্ট্রিমের জন্য 'urn:google:dai:2018' হিসেবে সেট করতে হবে।

  2. data: DASH ইভেন্ট মেসেজের ক্ষেত্রে, এটি হল মেসেজ ডেটা স্ট্রিং।

  3. timestamp: DASH স্ট্রিমের জন্য ইভেন্ট মেসেজ শুরুর সময় নির্দেশক সংখ্যা।

আপনার প্লেয়ার ইভেন্ট যত ঘন ঘন এবং যত দ্রুত মেটাডেটা প্রদান করতে পারে, তত ঘন ঘন এবং তত দ্রুত তা পাঠান। মেটাডেটা না থাকলে বা সঠিক না হলে, IMA DAI SDK বিজ্ঞাপনের ইভেন্ট ট্রিগার নাও করতে পারে, যার ফলে বিজ্ঞাপনের ইভেন্ট সঠিকভাবে রিপোর্ট করা হয় না।

HTML5-এর জন্য IMA DAI উদাহরণ ডাউনলোড করুন এবং HLS.js সাধারণ স্যাম্পেল নতুন ফোল্ডারে এক্সট্র্যাক্ট করুন। এই উদাহরণে এমন একটি ওয়েব অ্যাপ দেখানো হয়েছে যা আপনি টেস্ট করার জন্য লোকাল ডিভাইসে হোস্ট করতে পারবেন।

উদাহরণটি লোকালি হোস্ট করতে, নতুন ফোল্ডারে নেভিগেট করুন এবং ওয়েব সার্ভার চালু করতে নিম্নলিখিত python কমান্ড রান করুন:

python3 -m http.server 8000

http.server শুধুমাত্র Python 3.x-এ উপলভ্য। আপনি অন্য যেকোনও ওয়েব সার্ভার ব্যবহার করতে পারেন, যেমন Apache HTTP Server বা Node JS।

ওয়েব ব্রাউজার খুলে localhost:8000-এ গিয়ে ভিডিও প্লেয়ার দেখুন। আপনার ব্রাউজারে HLS.js লাইব্রেরি কাজ করতে হবে।

সবকিছু ঠিকঠাক কাজ করলে, ভিডিও প্লেয়ারের প্লে বোতামে ক্লিক করলে একটি ছোট বিজ্ঞাপন দেখানোর পরে "টিয়ার্স অফ স্টিল" শর্ট ফিল্ম শুরু হয়। এই কন্টেন্ট চাহিদা অনুসার ভিডিও (VOD) স্ট্রিম ব্যবহার করে ডেলিভার করা হয়।

লাইভ স্ট্রিমের অনুরোধ করা

স্যাম্পেল VOD স্ট্রিমকে আপনার লাইভ স্ট্রিম দিয়ে পরিবর্তন করতে, VideoStitcherLiveStreamRequest ক্লাস ব্যবহার করুন যা Google Ad Manager-এর সাথে অটোমেটিক একটি বিজ্ঞাপন সেশন তৈরি করে। আপনি মনিটর ও ডিবাগ করার জন্য তৈরি করা DAI সেশন লোকেট করতে Google Ad Manager UI ব্যবহার করতে পারবেন।

আগে থেকে থাকা স্যাম্পেলে, VOD স্ট্রিম বা লাইভ স্ট্রিমের অনুরোধ করার জন্য ফাংশন আছে। Google Cloud Video Stitcher API-এর সাথে এটি কাজ করানোর জন্য, আপনাকে একটি নতুন ফাংশন যোগ করতে হবে যা VideoStitcherLiveStreamRequest অবজেক্ট রিটার্ন করবে।

একটা উদাহরণ দেওয়া হল:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

লোকাল টেস্টিংয়ের জন্য, লাইভ স্ট্রিম ফাইলগুলি Cloud Storage বাকেটে থাকলে, আপনাকে http://localhost:8000 অরিজিনের জন্য CORS চালু করতে হবে।

পৃষ্ঠা আবার লোড করুন। তারপর, আপনি কাস্টম লাইভ স্ট্রিমের অনুরোধ করতে এবং চালাতে পারবেন।

(ঐচ্ছিক) স্ট্রিমিং সেশন সংক্রান্ত বিকল্প যোগ করুন

ডিফল্ট Cloud Video Stitcher API কনফিগারেশন ওভাররাইড করতে সেশন বিকল্প যোগ করে আপনার স্ট্রিম অনুরোধ কাস্টমাইজ করুন। এর জন্য VideoStitcherLiveStreamRequest.videoStitcherSessionOptions ব্যবহার করুন। আপনি কোনও অপরিচিত বিকল্প প্রদান করলে, Cloud Video Stitcher API একটি HTTP 400 সমস্যা সহ উত্তর দেবে। সহায়তার জন্য সমস্যার সমাধান সংক্রান্ত নির্দেশিকা পরামর্শ করুন।

যেমন, আপনি নিম্নলিখিত কোড স্নিপেটের মাধ্যমে ম্যানিফেস্ট বিকল্প ওভাররাইড করতে পারেন, যা সর্বনিম্ন থেকে সর্বোচ্চ বিটরেট পর্যন্ত অর্ডার করা রেন্ডিশন সহ দুটি স্ট্রিম ম্যানিফেস্টের অনুরোধ করে।

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

বিজ্ঞাপন বিরতি যোগ করুন

Google Cloud Video Stitcher API প্রতিটি বিজ্ঞাপন বিরতির জন্য বিজ্ঞাপন ট্যাগ থেকে পাওয়া বিজ্ঞাপন যোগ করে। বিজ্ঞাপন বিরতি ম্যানিফেস্টে বিজ্ঞাপন মার্কার ব্যবহার করে চিহ্নিত করা হয়। লাইভ স্ট্রিম এনকোডার দ্বারা বিজ্ঞাপন মার্কার যোগ করা হয়।

বিজ্ঞাপন বিরতি যোগ করার সাথে সাথেই বিজ্ঞাপনটি চালানো হয়।

অপ্রয়োজনীয়গুলি মুছুন

আপনি এখন Google Cloud Video Stitcher API ব্যবহার করে লাইভ স্ট্রিম হোস্ট করেছেন এবং HTML5-এর জন্য IMA DAI SDK ব্যবহার করে এটির অনুরোধ করেছেন, তাই যেকোনও পরিষেবা রিসোর্স ক্লিন-আপ করা গুরুত্বপূর্ণ।

অপ্রয়োজনীয় রিসোর্স ও অ্যাসেট সরাতে লাইভ স্ট্রিম ক্লিন-আপ গাইড অনুসরণ করুন।

শেষে, যে টার্মিনাল উইন্ডোতে আপনি Python 3 ওয়েব সার্ভার শুরু করেছিলেন, সেখানে ctrl+C কমান্ড ব্যবহার করে লোকাল সার্ভার বন্ধ করুন।