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

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

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

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

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

इस गाइड में, HTML5 के लिए आईएमए डीएआई एसडीके का इस्तेमाल करने का तरीका बताया गया है. इससे, Google Cloud Video Stitcher API के साथ रजिस्टर किए गए किसी इवेंट के लिए, लाइव स्ट्रीम का अनुरोध किया जा सकता है और उसे चलाया जा सकता है. साथ ही, वीडियो चलने के दौरान विज्ञापन के लिए ब्रेक डालने का तरीका भी बताया गया है.

इस गाइड में, 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 टोकन का इस्तेमाल, कई अनुरोधों के लिए तब तक किया जा सकता है, जब तक उसकी समयसीमा खत्म नहीं हो जाती.

नेटवर्क कोड

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

लाइव कॉन्फ़िगरेशन आईडी
लाइव स्ट्रीम इवेंट बनाते समय, आपने जो लाइव कॉन्फ़िगरेशन आईडी डाला था: LIVE_CONFIG_ID
कस्टम ऐसेट कुंजी
Ad Manager की कस्टम ऐसेट कुंजी, Video Stitcher API की मदद से लाइव स्ट्रीम इवेंट के लिए कॉन्फ़िगरेशन बनाने की प्रोसेस के दौरान जनरेट होती है:CUSTOM_ASSET_KEY

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

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

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

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

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

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

HTML5 के लिए आईएमए डीएआई के उदाहरण डाउनलोड करें और HLS.js के सैंपल को एक नए फ़ोल्डर में एक्सट्रैक्ट करें. यह उदाहरण एक वेब ऐप्लिकेशन है. इसे जांच के लिए, स्थानीय तौर पर होस्ट किया जा सकता है.

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

python3 -m http.server 8000

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

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

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

लाइव स्ट्रीम का अनुरोध करना

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

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

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

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

VideoStitcherLiveStreamRequest.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, विज्ञापन के लिए हर ब्रेक के लिए विज्ञापन टैग से मिले विज्ञापनों को इंसर्ट करता है. मेनिफ़ेस्ट में विज्ञापन मार्कर का इस्तेमाल करके, विज्ञापन के लिए ब्रेक दिखाए जाते हैं. लाइव स्ट्रीम एन्कोडर, विज्ञापन मार्कर जोड़ता है.

विज्ञापन के लिए ब्रेक डालने के तुरंत बाद, विज्ञापन दिखने लगता है.

व्यवस्थित करें

अब आपने Google Cloud Video Stitcher API का इस्तेमाल करके, लाइव स्ट्रीम को होस्ट कर लिया है. साथ ही, HTML5 के लिए आईएमए डीएआई SDK का इस्तेमाल करके, इसका अनुरोध भी कर लिया है. इसलिए, अब विज्ञापन दिखाने वाले सभी संसाधनों को हटाना ज़रूरी है.

किसी भी ग़ैर-ज़रूरी संसाधन और ऐसेट को हटाने के लिए, लाइव स्ट्रीम को व्यवस्थित करने की गाइड देखें.

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