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

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

डीआई (डायनामिक विज्ञापन) का वह समाधान चुनें जिसमें आपकी दिलचस्पी है

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

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

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

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

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

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

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

अपने कॉन्टेंट की लाइव स्ट्रीम या टेस्ट लाइव स्ट्रीम का इस्तेमाल करके, लाइव स्ट्रीम इवेंट के लिए कॉन्फ़िगरेशन बनाएं. इस गाइड में, एचएलएस स्ट्रीम का इस्तेमाल करने का तरीका बताया गया है.

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

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

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

OAUTH_TOKEN

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

नेटवर्क कोड

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

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

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

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

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

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

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

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

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

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

python3 -m http.server 8000

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

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

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

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

सैंपल वीओडी स्ट्रीम को अपनी लाइव स्ट्रीम से बदलने के लिए, उस 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 के लिए CORS को चालू करना होगा.

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

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

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": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

विज्ञापन के लिए ब्रेक जोड़ना

Google Cloud Video Stitcher API, हर विज्ञापन के लिए विज्ञापन टैग से मिले विज्ञापनों को डालता है. विज्ञापन के लिए ब्रेक, विज्ञापन मार्कर का इस्तेमाल करके मेनिफ़ेस्ट में दिखाए जाते हैं. विज्ञापन मार्कर, लाइव स्ट्रीम एन्कोडर डालता है.

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

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

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

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

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