डीआई के लिए IMA SDK टूल सेट अप करना

IMA SDK की मदद से, अपनी वेबसाइटों और ऐप्लिकेशन में मल्टीमीडिया विज्ञापन आसानी से इंटिग्रेट किए जा सकते हैं. IMA SDK, VAST के साथ काम करने वाले किसी भी विज्ञापन सर्वर से विज्ञापनों का अनुरोध कर सकते हैं. साथ ही, आपके ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज कर सकते हैं. IMA DAI SDK की मदद से, ऐप्लिकेशन विज्ञापन और कॉन्टेंट वीडियो के लिए स्ट्रीम का अनुरोध करते हैं. यह अनुरोध, वीओडी या लाइव कॉन्टेंट के लिए किया जाता है. इसके बाद, SDK टूल एक साथ वीडियो स्ट्रीम दिखाता है, ताकि आपको अपने ऐप्लिकेशन में विज्ञापन और कॉन्टेंट वीडियो के बीच स्विच करने की ज़रूरत न पड़े.

वह DAI समाधान चुनें जिसमें आपकी दिलचस्पी है

Google Cloud Video Stitcher API के साथ रजिस्टर की गई Play VOD स्ट्रीम

इस गाइड में, Google Cloud VOD स्ट्रीम सेशन का अनुरोध करने और उसे चलाने के लिए, IMA DAI SDK for HTML5 का इस्तेमाल करने का तरीका बताया गया है.

इस गाइड में, IMA DAI के लिए शुरू करें गाइड में दिए गए बुनियादी उदाहरण के बारे में ज़्यादा जानकारी दी गई है.

अन्य प्लैटफ़ॉर्म के साथ इंटिग्रेट करने या IMA क्लाइंट-साइड एसडीके इस्तेमाल करने के बारे में जानकारी पाने के लिए, इंटरैक्टिव मीडिया विज्ञापन एसडीके देखें.

पूरे हो चुके सैंपल इंटिग्रेशन को देखने या उसका पालन करने के लिए, HLS या DASH के लिए, Cloud Video Stitcher का उदाहरण डाउनलोड करें.

Google Cloud प्रोजेक्ट सेट अप करना

Google Cloud प्रोजेक्ट सेट अप करें और प्रोजेक्ट को ऐक्सेस करने के लिए सेवा खाते कॉन्फ़िगर करें.

IMA SDK में इस्तेमाल करने के लिए, ये वैरिएबल डालें:

जगह
वह Google Cloud क्षेत्र जहां आपका VOD कॉन्फ़िगरेशन बनाया गया था: LOCATION
प्रोजेक्ट नंबर
Video Stitcher API का इस्तेमाल करने वाला Google Cloud प्रोजेक्ट नंबर: PROJECT_NUMBER
OAuth टोकन

सेवा खाते का कम समय के लिए मान्य OAuth टोकन, जिसमें Video Stitcher उपयोगकर्ता की भूमिका हो: 

OAUTH_TOKEN

कम समय के लिए मान्य OAuth टोकन बनाने के बारे में ज़्यादा जानें. OAuth टोकन को कई अनुरोधों में फिर से इस्तेमाल किया जा सकता है. हालांकि, ऐसा तब तक किया जा सकता है, जब तक उसकी समयसीमा खत्म न हो जाए.

नेटवर्क कोड

विज्ञापन अनुरोध करने के लिए Ad Manager नेटवर्क कोड: NETWORK_CODE

वीओडी कॉन्फ़िगरेशन आईडी

वीओडी स्ट्रीम के लिए वीओडी कॉन्फ़िगरेशन आईडी: VOD_CONFIG_ID

Cloud stitching create a VOD config guide में, VOD कॉन्फ़िगरेशन आईडी बनाने के बारे में ज़्यादा पढ़ें.

डेवलपमेंट एनवायरमेंट कॉन्फ़िगर करना

IMA के सैंपल ऐप्लिकेशन, सिर्फ़ एचएलएस स्ट्रीम के अनुरोधों के बारे में बताते हैं. VideoStitcherVodStreamRequest क्लास बनाते समय, अब भी DASH स्ट्रीम का इस्तेमाल किया जा सकता है. DASH के साथ काम करने वाला प्लेयर सेट अप करते समय, आपको अपने वीडियो प्लेयर के प्रोग्रेस इवेंट के लिए एक लिसनर सेट अप करना होगा. यह लिसनर, StreamManager.processMetadata() को वीडियो का मेटाडेटा उपलब्ध करा सकता है. यह फ़ंक्शन तीन पैरामीटर लेता है:

  1. type: यह एक स्ट्रिंग है. एचएलएस स्ट्रीम के लिए इसे 'ID3' और DASH स्ट्रीम के लिए 'urn:google:dai:2018' पर सेट करना ज़रूरी है.

  2. data: DASH इवेंट मैसेज के लिए, यह मैसेज डेटा स्ट्रिंग है.

  3. timestamp: यह एक ऐसी संख्या है जो DASH स्ट्रीम के लिए, इवेंट मैसेज के शुरू होने का समय दिखाती है.

मेटाडेटा को उतनी जल्दी और उतनी बार भेजें जितनी बार आपके प्लेयर इवेंट उपलब्ध करा सकते हैं. अगर मेटाडेटा मौजूद नहीं है या सही नहीं है, तो IMA DAI SDK टूल, विज्ञापन इवेंट ट्रिगर नहीं कर सकता. इससे विज्ञापन इवेंट की रिपोर्ट सही तरीके से नहीं दी जा सकेगी.

IMA DAI के HTML5 उदाहरण डाउनलोड करें. इसके बाद, hls_js/simple सैंपल ZIP फ़ाइल को एक नए फ़ोल्डर में निकालें. यह उदाहरण एक वेब ऐप्लिकेशन का है. इसे टेस्टिंग के लिए, अपने डिवाइस पर होस्ट किया जा सकता है.

उदाहरण को स्थानीय तौर पर होस्ट करने के लिए, नए फ़ोल्डर पर जाएं. इसके बाद, वेब सर्वर शुरू करने के लिए, यहां दिया गया Python कमांड चलाएं:

python3 -m http.server 8000

http.server सिर्फ़ Python 3.x में उपलब्ध है. Apache HTTP Server या Node JS जैसे किसी अन्य वेब सर्वर का इस्तेमाल किया जा सकता है.

वेब ब्राउज़र खोलें और वीडियो प्लेयर देखने के लिए localhost:8000 पर जाएं. आपके ब्राउज़र पर HLS.js लाइब्रेरी काम करती हो.

अगर सब कुछ ठीक से काम कर रहा है, तो वीडियो प्लेयर पर चलाएं बटन पर क्लिक करने से, "Tears of Steel" शॉर्ट फ़िल्म शुरू हो जाएगी. इसमें हर 30 सेकंड पर विज्ञापन ब्रेक होंगे.

वीओडी स्ट्रीम का अनुरोध करना

सेंपल स्ट्रीम को विज्ञापन स्टिच की गई VOD स्ट्रीम से बदलने के लिए, VideoStitcherVodStreamRequest क्लास का इस्तेमाल करें. इससे Google Ad Manager के साथ विज्ञापन सेशन अपने-आप बन जाएगा. मॉनिटर करने और डीबग करने के लिए, Google Ad Manager के यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, जनरेट किए गए DAI सेशन का पता लगाया जा सकता है.

मौजूदा सैंपल में, वीओडी स्ट्रीम या लाइव स्ट्रीम का अनुरोध करने के लिए फ़ंक्शन मौजूद हैं. इसे Google Cloud Video Stitcher API के साथ काम करने के लिए, आपको VideoStitcherVodStreamRequest ऑब्जेक्ट को वापस लाने के लिए एक नया फ़ंक्शन जोड़ना होगा.

यहां एक उदाहरण दिया गया है:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

पेज को फिर से लोड करें. इसके बाद, अपनी पसंद के मुताबिक वीओडी स्ट्रीम का अनुरोध किया जा सकता है और उसे चलाया जा सकता है.

(ज़रूरी नहीं) स्ट्रीमिंग सेशन के विकल्प जोड़ना

VideoStitcherVodStreamRequest.videoStitcherSessionOptions का इस्तेमाल करके, Cloud Video Stitcher API के डिफ़ॉल्ट कॉन्फ़िगरेशन को बदलने के लिए, सेशन के विकल्प जोड़कर स्ट्रीम के अनुरोध को पसंद के मुताबिक बनाएं. अगर आपने कोई ऐसा विकल्प दिया है जिसकी पहचान नहीं हो पाई है, तो Cloud Video Stitcher API, एचटीटीपी 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 का इस्तेमाल करके, VOD स्ट्रीम को होस्ट कर लिया है. साथ ही, IMA DAI SDK for HTML5 का इस्तेमाल करके इसके लिए अनुरोध कर लिया है. अब आपको विज्ञापन दिखाने से जुड़े सभी संसाधनों को हटाना होगा.

ज़रूरत न होने वाले संसाधनों और ऐसेट को हटाने के लिए, वीओडी क्लीन अप गाइड देखें.

आखिर में, उस टर्मिनल विंडो में जहां आपने Python 3 वेब सर्वर शुरू किया था, लोकल सर्वर को बंद करने के लिए ctrl+C कमांड का इस्तेमाल करें.