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

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

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

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

पूरी सेवा पॉड सर्विंग Cloud stitching API Live Cloud stitching API VOD

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

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

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

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

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

ध्यान दें: IMA DAI SDK for HTML5, HLS और DASH, दोनों तरह की स्ट्रीम के साथ काम करता है. हालांकि, इन्हें चलाने के लिए अलग-अलग मीडिया प्लेयर या एक्सटेंशन की ज़रूरत होती है. जैसे, HLS.js या DASH.js. इन्हें लागू करने के तरीके भी अलग-अलग होते हैं.

इस गाइड में, HLS स्ट्रीम चलाने के लिए HLS.js और IMA DAI SDK को कॉन्फ़िगर करने का तरीका बताया गया है. साथ ही, DASH के लिए लागू करने के तरीके में अंतर के बारे में अहम नोट दिए गए हैं.

IMA के साथ DASH DAI स्ट्रीम लागू करने के लिए, IMA DASH.js सैंपल ऐप्लिकेशन देखें.

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

कस्टम ऐसेट की

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

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

अहम जानकारी: IMA DAI VideoStitcherLiveStreamRequest क्लास, HLS स्ट्रीम और एक से ज़्यादा अवधि वाली DASH स्ट्रीम, दोनों के साथ काम करती है. विज्ञापन ब्रेक सिर्फ़ DASH पीरियड के बीच में डाले जाते हैं.

IMA के सैंपल ऐप्लिकेशन, सिर्फ़ HLS स्ट्रीम के अनुरोधों के बारे में बताते हैं. VideoStitcherLiveStreamRequest क्लास बनाते समय, अब भी 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 के सामान्य सैंपल को नए फ़ोल्डर में निकालें. यह उदाहरण एक वेब ऐप्लिकेशन का है. इसे टेस्टिंग के लिए, स्थानीय तौर पर होस्ट किया जा सकता है.

उदाहरण को स्थानीय तौर पर होस्ट करने के लिए, नए फ़ोल्डर पर जाएं और वेब सर्वर शुरू करने के लिए, यहां दिया गया 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 के लिए 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": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

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

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

• अगर आपको अपनी लाइव स्ट्रीम का इस्तेमाल करना है, तो आपको विज्ञापन मार्कर डालना होगा. एचएलएस और डैश के साथ काम करने वाले विज्ञापन मार्कर के बारे में ज़्यादा जानने के लिए, विज्ञापन मार्कर से जुड़ा दस्तावेज़ देखें.

• अगर आपने Google Cloud Livestream API का इस्तेमाल करके लाइव स्ट्रीम बनाई है, तो विज्ञापन ब्रेक वाला चैनल इवेंट डालें.

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

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

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

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

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