DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন

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

আপনার আগ্রহের DAI সমাধানটি নির্বাচন করুন।

পড সার্ভিং ডিএআই

এই নির্দেশিকাটি দেখায় যে কীভাবে লাইভ বা VOD কন্টেন্টের জন্য DAI পড সার্ভিং স্ট্রিম চালানো যায়, HTML5 এর জন্য IMA DAI SDK ব্যবহার করে এমন একটি ভিডিও প্লেয়ার ব্যবহার করে যা প্লেব্যাকের জন্য hls.js এর উপর নির্ভর করে। HLS.js এবং Safari প্লেব্যাক উভয়ের জন্য সমর্থন সহ একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন দেখতে বা অনুসরণ করতে, HLS পড সার্ভিং উদাহরণ দেখুন। DASH.js সমর্থনের জন্য, DASH পড সার্ভিং উদাহরণ দেখুন। আপনি HTML5 DAI GitHub রিলিজ পৃষ্ঠা থেকে এই নমুনা অ্যাপগুলি ডাউনলোড করতে পারেন।

DAI পড পরিবেশনের ওভারভিউ

IMA DAI SDK ব্যবহার করে পড সার্ভিং বাস্তবায়নে দুটি প্রধান উপাদান জড়িত, যা এই নির্দেশিকায় দেখানো হয়েছে:

• PodStreamRequest / PodVodStreamRequest : একটি অবজেক্ট যা Google এর বিজ্ঞাপন সার্ভারগুলিতে একটি স্ট্রিম অনুরোধ সংজ্ঞায়িত করে। অনুরোধগুলি একটি নেটওয়ার্ক কোড নির্দিষ্ট করে এবং PodStreamRequest জন্য একটি কাস্টম অ্যাসেট কী এবং একটি ঐচ্ছিক API কীও প্রয়োজন। উভয়ের মধ্যে অন্যান্য ঐচ্ছিক পরামিতি অন্তর্ভুক্ত থাকে।

• StreamManager : একটি অবজেক্ট যা ভিডিও স্ট্রিম এবং IMA DAI SDK এর মধ্যে যোগাযোগ পরিচালনা করে, যেমন ট্র্যাকিং পিং ফায়ার করা এবং স্ট্রিম ইভেন্টগুলি প্রকাশকের কাছে ফরোয়ার্ড করা।

পূর্বশর্ত

শুরু করার আগে, আপনার নিম্নলিখিতগুলি প্রয়োজন:

• তিনটি খালি ফাইল:

  • dai.html
  • dai.css সম্পর্কে
  • dai.js

• আপনার কম্পিউটারে, অথবা ওয়েব সার্ভারে অথবা অন্যান্য হোস্টেড ডেভেলপমেন্ট এনভায়রনমেন্টে পাইথন ইনস্টল করা আছে যা পরীক্ষার জন্য ব্যবহার করা হবে

একটি উন্নয়ন পরিবেশ কনফিগার করুন

যেহেতু SDK যে পৃষ্ঠা থেকে লোড করা হয়েছে সেই একই প্রোটোকল ব্যবহার করে নির্ভরতা লোড করে, তাই আপনার অ্যাপ পরীক্ষা করার জন্য আপনাকে একটি ওয়েব সার্ভার ব্যবহার করতে হবে। স্থানীয় ডেভেলপমেন্ট সার্ভার শুরু করার একটি দ্রুত উপায় হল পাইথনের অন্তর্নির্মিত সার্ভার ব্যবহার করা।

1. আপনার index.html ফাইল ধারণকারী ডিরেক্টরি থেকে একটি কমান্ড লাইন ব্যবহার করে রান করুন:

   python -m http.server 8000

2. একটি ওয়েব ব্রাউজারে, http://localhost:8000/ এ যান।

   আপনি অন্য যেকোনো হোস্টেড ডেভেলপমেন্ট এনভায়রনমেন্ট বা ওয়েব সার্ভার ব্যবহার করতে পারেন, যেমন অ্যাপাচি HTTP সার্ভার ।

একটি ভিডিও প্লেয়ার তৈরি করুন

প্রথমে, dai.html পরিবর্তন করে একটি HTML5 ভিডিও উপাদান এবং বিজ্ঞাপন UI উপাদানের জন্য একটি div তৈরি করুন। dai.css এবং dai.js ফাইল লোড করার জন্য প্রয়োজনীয় ট্যাগ যোগ করুন, সেইসাথে hls.js ভিডিও প্লেয়ার আমদানি করুন।

তারপর, পৃষ্ঠার উপাদানগুলির আকার এবং অবস্থান নির্দিষ্ট করতে dai.css পরিবর্তন করুন। অবশেষে, dai.js তে, স্ট্রিম অনুরোধের তথ্য ধরে রাখার জন্য ভেরিয়েবল এবং পৃষ্ঠা লোড হওয়ার সময় চালানোর জন্য একটি initPlayer() ফাংশন সংজ্ঞায়িত করুন।

স্ট্রিম রিকোয়েস্ট ধ্রুবকগুলি নিম্নরূপ:

• BACKUP_STREAM : বিজ্ঞাপন প্রক্রিয়ায় মারাত্মক ত্রুটি দেখা দিলে ব্যাকআপ স্ট্রিম চালানোর জন্য একটি URL।

• STREAM_URL : শুধুমাত্র লাইভস্ট্রিমের জন্য ব্যবহৃত হয় । আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা পড সার্ভিং ব্যবহার করে তৃতীয় পক্ষের অংশীদার দ্বারা প্রদত্ত ভিডিও স্ট্রিম URL। অনুরোধ করার আগে আপনাকে IMA DAI SDK দ্বারা প্রদত্ত স্ট্রিম আইডি সন্নিবেশ করাতে হবে। এই ক্ষেত্রে, স্ট্রিম URL-এ একটি স্থানধারক, [[STREAMID]] থাকে, যা অনুরোধ করার আগে স্ট্রিম আইডি দিয়ে প্রতিস্থাপিত হয়।

• NETWORK_CODE : আপনার Ad Manager 360 অ্যাকাউন্টের নেটওয়ার্ক কোড।

• CUSTOM_ASSET_KEY : শুধুমাত্র লাইভস্ট্রিমের জন্য ব্যবহৃত । কাস্টম অ্যাসেট কী যা অ্যাড ম্যানেজার 360-এ আপনার পড সার্ভিং ইভেন্ট শনাক্ত করে। এটি আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা তৃতীয় পক্ষের পড সার্ভিং পার্টনার দ্বারা তৈরি করা যেতে পারে।

• API_KEY : শুধুমাত্র লাইভস্ট্রিমের জন্য ব্যবহৃত । একটি ঐচ্ছিক API কী যা IMA DAI SDK থেকে স্ট্রিম আইডি পুনরুদ্ধার করতে প্রয়োজন হতে পারে।

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="adUi"></div>
</body>
</html>

dai.css সম্পর্কে

#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Stream Config.
const STREAM_URL = "";
const NETWORK_CODE = "";
const CUSTOM_ASSET_KEY = "";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA DAI SDK লোড করুন

এরপর, dai.html এ dai.js ট্যাগের আগে একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করে DAI ফ্রেমওয়ার্ক যোগ করুন।

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
...

স্ট্রিমম্যানেজারটি শুরু করুন এবং একটি লাইভ বা ভিওডি স্ট্রিম অনুরোধ করুন।

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

স্ট্রিম ইভেন্টগুলি পরিচালনা করুন

var isAdBreak;

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.STREAM_INITIALIZED,
    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);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

var isAdBreak;

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.STREAM_INITIALIZED,
    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);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

স্ট্রিম মেটাডেটা পরিচালনা করুন

এই ধাপে আপনি ইভেন্ট লিসেনারের মাধ্যমে মেটাডেটা বাস্তবায়ন করবেন যাতে বিজ্ঞাপন ইভেন্ট ঘটলে SDK-কে অবহিত করা যায়। ইন-স্ট্রিম মেটাডেটা ইভেন্ট শোনা স্ট্রিম ফর্ম্যাট (HLS বা DASH), স্ট্রিম টাইপ (লাইভ বা VOD স্ট্রিম), আপনার প্লেয়ার টাইপ এবং ব্যবহৃত DAI ব্যাকএন্ডের ধরণের উপর নির্ভর করে পরিবর্তিত হতে পারে। আরও তথ্যের জন্য আমাদের টাইমড মেটাডেটা গাইড দেখুন।

HLS স্ট্রিম ফর্ম্যাট (লাইভ এবং VOD স্ট্রিম, HLS.js প্লেয়ার)

যদি আপনি HLS.js প্লেয়ার ব্যবহার করেন, তাহলে ID3 মেটাডেটা পেতে HLS.js FRAG_PARSING_METADATA ইভেন্টটি শুনুন এবং StreamManager.processMetadata() দিয়ে SDK-তে পাঠান।

সবকিছু লোড এবং প্রস্তুত হওয়ার পরে ভিডিওটি স্বয়ংক্রিয়ভাবে চালানোর জন্য, প্লেব্যাক ট্রিগার করতে HLS.js MANIFEST_PARSED ইভেন্টটি শুনুন।

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (DASH স্ট্রিম ফর্ম্যাট, লাইভ এবং VOD স্ট্রিম টাইপ)

যদি আপনি DASH.js প্লেয়ার ব্যবহার করেন, তাহলে লাইভ বা VOD স্ট্রিমগুলির জন্য ID3 মেটাডেটা শুনতে আপনাকে বিভিন্ন স্ট্রিং ব্যবহার করতে হবে:

• লাইভস্ট্রিম: 'https://developer.apple.com/streaming/emsg-id3'
• ভিওডি স্ট্রিম: 'urn:google:dai:2018'

StreamManager.processMetadata() ব্যবহার করে ID3 মেটাডেটা SDK-তে পাস করুন।

সবকিছু লোড এবং প্রস্তুত হওয়ার পরে ভিডিও নিয়ন্ত্রণগুলি স্বয়ংক্রিয়ভাবে দেখানোর জন্য, DASH.js MANIFEST_LOADED ইভেন্টটি শুনুন।

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

লাইভস্ট্রিম সহ শাকা প্লেয়ার (ড্যাশ স্ট্রিম ফর্ম্যাট)

যদি আপনি লাইভস্ট্রিম প্লেব্যাকের জন্য Shaka প্লেয়ার ব্যবহার করেন, তাহলে মেটাডেটা ইভেন্ট শুনতে 'emsg' স্ট্রিংটি ব্যবহার করুন। তারপর, StreamManager.onTimedMetadata() এ আপনার কলে ইভেন্ট মেসেজ ডেটা ব্যবহার করুন।

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

VOD স্ট্রিম সহ শাকা প্লেয়ার (DASH স্ট্রিম ফর্ম্যাট)

যদি আপনি VOD স্ট্রিম প্লেব্যাকের জন্য Shaka প্লেয়ার ব্যবহার করেন, তাহলে মেটাডেটা ইভেন্ট শুনতে 'timelineregionenter' স্ট্রিংটি ব্যবহার করুন। তারপর, StreamManager.processMetadata() এ আপনার কলে 'urn:google:dai:2018' স্ট্রিংটি ব্যবহার করুন।

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

প্লেয়ার ইভেন্ট পরিচালনা করুন

বিজ্ঞাপন বিরতির সময় SDK বিরতি দিলে ব্যবহারকারী প্লেব্যাক পুনরায় শুরু করতে ভিডিও এলিমেন্টের pause এবং start ইভেন্ট লিসেনারের সংখ্যা যোগ করুন।

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

IMA DAI সম্পদ পরিষ্কার করুন

IMA DAI SDK ব্যবহার করে যখন আপনি সফলভাবে পড সার্ভিং স্ট্রিমে বিজ্ঞাপনের অনুরোধ এবং প্রদর্শন সম্পন্ন করবেন, তখন আমরা আপনাকে পড সার্ভিং সেশন শেষ হওয়ার পরে যেকোনো রিসোর্স পরিষ্কার করার পরামর্শ দিচ্ছি। স্ট্রিম প্লেব্যাক বন্ধ করতে, সমস্ত বিজ্ঞাপন ট্র্যাকিং বন্ধ করতে এবং লোড করা সমস্ত স্ট্রিম সম্পদ প্রকাশ করতে StreamManager.destroy() এ কল করুন।

আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, অন্যান্য নির্দেশিকা বা GitHub-এর নমুনাগুলি দেখুন।