با IMA DAI SDK شروع کنید

IMA SDK ادغام تبلیغات چندرسانه ای را در وب سایت ها و برنامه های شما آسان می کند. IMA SDK می‌تواند از هر سرور تبلیغاتی سازگار با VAST آگهی درخواست کند و پخش آگهی را در برنامه‌های شما مدیریت کند. با IMA DAI SDK، برنامه‌ها درخواست پخش جریانی برای آگهی و ویدیوی محتوا را ارائه می‌کنند - اعم از VOD یا محتوای زنده. سپس SDK یک جریان ویدیوی ترکیبی را برمی‌گرداند، به طوری که نیازی به مدیریت جابجایی بین آگهی و ویدیوی محتوا در برنامه خود ندارید.

راه حل DAI مورد علاقه خود را انتخاب کنید

پخش جریانی زنده ثبت شده با Google Cloud Video Stitcher API

این راهنما نحوه استفاده از IMA DAI SDK برای HTML5 را برای درخواست و پخش جریانی زنده برای رویدادی که با Google Cloud Video Stitcher API ثبت شده است، و نحوه درج یک وقفه تبلیغاتی در حین پخش را نشان می‌دهد.

این راهنما مثال اصلی را از راهنمای شروع برای IMA DAI گسترش می دهد.

برای اطلاعات در مورد ادغام با دیگر پلتفرم‌ها یا استفاده از کیت توسعه نرم‌افزارهای سمت سرویس گیرنده IMA، به کیت‌های توسعه نرم‌افزار تبلیغات رسانه‌ای تعاملی مراجعه کنید.

برای مشاهده یا دنبال کردن یک نمونه ادغام کامل، نمونه دوخت ویدیوی Cloud را برای HLS یا DASH دانلود کنید.

یک پروژه Google Cloud راه اندازی کنید

یک پروژه Google Cloud راه اندازی کنید و حساب های سرویس را برای دسترسی به پروژه پیکربندی کنید .

با استفاده از جریان مستقیم محتوای خود یا یک پخش زنده آزمایشی، پیکربندی یک رویداد پخش زنده ایجاد کنید . این راهنما انتظار یک جریان HLS را دارد.

متغیرهای زیر را برای استفاده در IMA SDK وارد کنید:

مکان
منطقه Google Cloud که در آن پیکربندی زنده شما ایجاد شده است: LOCATION
شماره پروژه
شماره پروژه Google Cloud با استفاده از Video Stitcher API: PROJECT_NUMBER
نشانه OAuth

توکن OAuth کوتاه مدت یک حساب سرویس با نقش کاربر Video Stitcher:

OAUTH_TOKEN

درباره ایجاد اعتبارنامه های کوتاه مدت برای حساب های خدماتی بیشتر بخوانید. توکن OAuth تا زمانی که منقضی نشده باشد می تواند در چندین درخواست مجددا استفاده شود.

کد شبکه

کد شبکه Ad Manager برای درخواست تبلیغات: NETWORK_CODE

شناسه پیکربندی زنده
شناسه پیکربندی زنده که هنگام ایجاد رویداد پخش زنده خود مشخص کردید: LIVE_CONFIG_ID
کلید دارایی سفارشی
کلید دارایی سفارشی Ad Manager ایجاد شده در طول فرآیند ایجاد پیکربندی برای یک رویداد پخش زنده با API Video Stitcher: CUSTOM_ASSET_KEY

یک محیط توسعه را پیکربندی کنید

برنامه‌های نمونه IMA فقط درخواست‌های جریان HLS را نشان می‌دهند. هنوز هم می‌توانید از جریان‌های DASH هنگام ساخت کلاس VideoStitcherLiveStreamRequest استفاده کنید. هنگام راه‌اندازی پخش‌کننده سازگار با DASH، باید شنونده‌ای برای رویدادهای پیشرفت پخش‌کننده ویدیوی خود راه‌اندازی کنید که بتواند ابرداده ویدیو را به StreamManager.processMetadata() ارائه دهد. این تابع سه پارامتر دارد:

  1. type : رشته‌ای که باید روی 'ID3' برای جریان‌های HLS و 'urn:google:dai:2018' برای جریان‌های DASH تنظیم شود.

  2. data : برای پیام های رویداد DASH، این رشته داده پیام است.

  3. timestamp : عددی که زمان شروع پیام رویداد برای جریان‌های DASH است.

ابرداده ها را در اسرع وقت و هر چند وقت یکبار که رویدادهای پخش کننده شما می توانند ارائه دهند، ارسال کنید. اگر ابرداده وجود نداشته باشد یا درست نباشد، IMA DAI SDK ممکن است رویدادهای تبلیغاتی را راه‌اندازی نکند که منجر به گزارش‌های نادرست رویدادهای تبلیغاتی شود.

نمونه های IMA DAI را برای HTML5 دانلود کنید و نمونه HLS.js Simple را در یک پوشه جدید استخراج کنید. این مثال یک برنامه وب است که می توانید به صورت محلی برای اهداف آزمایشی میزبانی کنید.

برای میزبانی مثال به صورت محلی، به پوشه جدید بروید و دستور پایتون زیر را برای راه اندازی وب سرور اجرا کنید:

python3 -m http.server 8000

http.server فقط در پایتون 3.x موجود است. می توانید از هر وب سرور دیگری مانند Apache HTTP Server یا Node JS استفاده کنید.

یک مرورگر وب باز کنید و به localhost:8000 بروید تا یک پخش کننده ویدیو را ببینید. مرورگر شما باید از کتابخانه HLS.js پشتیبانی کند.

اگر همه چیز به درستی کار می کند، با کلیک بر روی دکمه پخش در پخش کننده ویدیو، فیلم کوتاه "اشک های فولادی" پس از یک تبلیغ کوتاه شروع می شود. این محتوا با استفاده از یک جریان ویدیویی در صورت تقاضا (VOD) ارائه می‌شود.

درخواست پخش زنده

برای جایگزینی نمونه جریان VOD با پخش زنده خود، از کلاس VideoStitcherLiveStreamRequest استفاده کنید که به طور خودکار یک جلسه تبلیغ با Google Ad Manager ایجاد می کند. می توانید از رابط کاربری Google Ad Manager برای مکان یابی جلسات DAI ایجاد شده برای نظارت و اشکال زدایی استفاده کنید.

در نمونه موجود، توابعی برای درخواست جریان VOD یا پخش زنده وجود دارد. برای اینکه با 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);
}

برای آزمایش محلی، اگر فایل‌های پخش زنده در یک سطل فضای ذخیره‌سازی ابری قرار دارند، باید CORS را برای مبدا http://localhost:8000 فعال کنید.

صفحه را دوباره بارگیری کنید. سپس، می توانید پخش زنده سفارشی را درخواست کرده و پخش کنید.

(اختیاری) گزینه های جلسه جریان را اضافه کنید

درخواست پخش جریانی خود را با افزودن گزینه‌های جلسه برای لغو پیکربندی پیش‌فرض Cloud Video Stitcher API با استفاده از VideoStitcherLiveStreamRequest.videoStitcherSessionOptions سفارشی کنید. اگر گزینه ناشناس ارائه دهید، Cloud Video Stitcher API با خطای HTTP 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 میزبانی کرده‌اید و آن را با استفاده از IMA DAI SDK برای HTML5 درخواست کرده‌اید، پاکسازی منابع ارائه‌شده بسیار مهم است.

برای حذف هر گونه منابع و دارایی های غیر ضروری، راهنمای پاکسازی جریان مستقیم را دنبال کنید.

در نهایت، در پنجره ترمینال که در آن وب سرور پایتون 3 را راه اندازی کردید، از دستور ctrl+C برای پایان دادن به سرور محلی استفاده کنید.