डीएआई के लिए IMA SDK का इस्तेमाल शुरू करना

प्लैटफ़ॉर्म चुनें: HTML5 Android iOS tvOS Cast Roku

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

अपनी पसंद का डीएआई सलूशन चुनें:

Google Cloud Video Stitcher API के साथ रजिस्टर की गई वीओडी स्ट्रीम चलाना

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

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

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

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

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

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

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

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

वीडियो स्टिचर उपयोगकर्ता की भूमिका वाले सेवा खाते का कम समय के लिए मान्य OAuth टोकन: 

OAUTH_TOKEN

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

नेटवर्क कोड

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

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

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

वीओडी कॉन्फ़िगरेशन आईडी बनाने के बारे में ज़्यादा जानने के लिए, क्लाउड स्टिचिंग की मदद से वीओडी कॉन्फ़िगरेशन बनाने की गाइड पढ़ें.

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

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

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

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

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

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

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 लाइब्रेरी के साथ काम करना चाहिए.

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

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

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

मौजूदा सैंपल में, वीओडी स्ट्रीम या लाइव स्ट्रीम का अनुरोध करने के लिए फ़ंक्शन मौजूद हैं. 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 का इस्तेमाल करके, वीओडी स्ट्रीम को होस्ट कर लिया है. साथ ही, HTML5 के लिए आईएमए डीएआई SDK का इस्तेमाल करके, इसका अनुरोध भी कर लिया है. इसलिए, अब यह ज़रूरी है कि आप विज्ञापन दिखाने के लिए इस्तेमाल किए गए सभी संसाधनों को हटा दें.

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

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