הגדרה עם DAI בשירות מלא

בחירת פלטפורמה: HTML5 Android iOS tvOS Cast Roku

במדריך הזה מוסבר איך להפעיל שידור DAI באמצעות IMA CAF DAI SDK. אם אתם רוצים לראות או לעקוב אחרי שילוב לדוגמה שהושלם, הורידו את הדוגמה.

לפני שאתם משתמשים במדריך הזה, חשוב שתכירו את הפרוטוקול Web Receiver של Chromecast Application Framework. המדריך הזה מבוסס על ההנחה שיש לכם היכרות בסיסית עם מושגים שקשורים למקלט CAF, כמו מיירטי הודעות ואובייקטים מסוג mediaInformation, וגם עם השימוש בכלי Cast Command and Control כדי לדמות שולח CAF.

כדי להשתמש ב-IMA DAI, צריך להיות לכם חשבון Ad Manager 360. אם יש לכם חשבון Ad Manager, פנו למנהל החשבון שלכם לקבלת פרטים נוספים. מידע על הרשמה ל-Ad Manager זמין במרכז העזרה של Ad Manager.

במאמר Interactive Media Ads SDKs מוסבר איך לשלב את IMA עם פלטפורמות אחרות או איך להשתמש בערכות ה-SDK של IMA בצד הלקוח.

סקירה כללית על CAF DAI

הטמעת DAI באמצעות IMA CAF DAI SDK כוללת שני רכיבים עיקריים, כפי שמוסבר במדריך הזה:

  • StreamRequest: אובייקט שמגדיר בקשת שידור לשרתי הפרסום של Google. יש שני סוגים עיקריים של בקשות לשידור:

    • ‫LiveStreamRequest: מציין מפתח נכס ופרמטרים אופציונליים אחרים.
    • VODStreamRequest: מציין מזהה מקור תוכן, מזהה סרטון ופרמטרים אופציונליים אחרים.
    • שני סוגי הבקשות יכולים לכלול מפתח API שנדרש כדי לגשת לשידורים ספציפיים, וקוד רשת של Google Ad Manager כדי ש-IMA SDK יטפל במזהי מודעות כפי שצוין בהגדרות של Google Ad Manager.

  • ‫StreamManager: אובייקט שמטפל בתקשורת בין שידור הווידאו לבין IMA DAI SDK, למשל הפעלת פינגים למעקב והעברת אירועי שידור לבעל האפליקציה.

דרישות מוקדמות

  • חשבון ב-Cast Developer Console עם מכשיר בדיקה רשום.
  • אפליקציית Web Receiver שמתארחת בשרת, רשומה ב-Cast Developer Console ואפשר לשנות אותה כדי לארח את הקוד שמופיע במדריך הזה.
  • אפליקציית שליחה שמוגדרת לשימוש באפליקציית מקלט האינטרנט. בדוגמה הזו, הכלי Cast Command and Control משמש כשולח.

הגדרת האובייקטים של MediaInfo של השולח

קודם כול, מגדירים את האובייקט MediaInfo של האפליקציה השולחת כך שיכלול את השדות הבאים:

contentId מזהה ייחודי של קובץ המדיה הזה
contentUrl כתובת ה-URL של השידור החלופי שתיטען אם ה-StreamRequest של DAI ייכשל מסיבה כלשהי
streamType בשידורים חיים, הערך צריך להיות "LIVE". בשידורי VOD, הערך צריך להיות "BUFFERED".
customData assetKey שידורים חיים בלבד. מזהה את השידור החי שצריך לטעון
contentSourceId שידורי VOD בלבד. מזהה את פיד המדיה שמכיל את השידור המבוקש.
videoId שידורי VOD בלבד. מזהה את השידור המבוקש בפיד המדיה שצוין.
networkCode (אופציונלי) הקוד של רשת Google Ad Manager.
ApiKey מפתח API אופציונלי שיכול להיות נדרש כדי לאחזר את כתובת ה-URL של השידור מ-IMA DAI SDK
senderCanSkip ערך בוליאני שמאפשר למקלט לדעת אם המכשיר השולח יכול להציג כפתור דילוג, כדי לתמוך במודעות שניתן לדלג עליהן

כדי להגדיר את הערכים האלה בכלי הפקודות ואמצעי הבקרה של Cast, לוחצים על הכרטיסייה Load Media ומגדירים את סוג בקשת הטעינה המותאמת אישית לערך LOAD. אחר כך מחליפים את נתוני ה-JSON באזור הטקסט באחד מאובייקטי ה-JSON הבאים:

LIVE

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

VOD

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2548831",
      "videoId": "tears-of-steel",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

אפשר לשלוח את אובייקט בקשת הטעינה המותאם אישית הזה למקלט כדי לבדוק את השלבים הבאים.

יצירת מקלט CAF בסיסי

יוצרים מקלט אינטרנט בסיסי לפי המדריך למקלט בסיסי של CAF SDK.

הקוד של המקלט אמור להיראות כך:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

מייבאים את IMA DAI SDK ומקבלים את Player Manager

מוסיפים תג סקריפט כדי לייבא את IMA DAI SDK ל-CAF למקלט האינטרנט, מיד אחרי הסקריפט שטוען את CAF. ‫CAF DAI SDK הוא תמידי, כך שאין צורך להגדיר גרסה ספציפית. לאחר מכן, בתג הסקריפט הבא, מאחסנים את ההקשר של המקבל ואת מנהל הנגן כקבועים לפני שמפעילים את המקבל.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

אתחול של IMA Stream Manager

מאתחלים את Stream Manager ב-CAF DAI SDK.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

יצירת ה-load message interceptor

ערכת ה-CAF DAI SDK משתמשת במיירט ההודעות של טעינת CAF כדי לשלוח בקשות לסטרימינג ולהחליף את כתובת ה-URL של התוכן בסטרימינג הסופי של DAI. מיירט ההודעות קורא ל-streamManager.requestStream(), שמטפל בהגדרת ההפסקות למודעות, בבקשת הסטרימינג ובהחלפת ה-contentURL הקיים.

יכול להיות רק מנגנון יירוט אחד של הודעות טעינה, אז אם האפליקציה שלכם דורשת שימוש במנגנון היירוט, אתם צריכים לשלב את כל הפונקציות בהתאמה אישית באותו קריאה חוזרת (callback).

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

יצירת הבקשה לשידור

כדי להשלים את השילוב של CAF DAI, צריך ליצור את בקשת הסטרימינג באמצעות הנתונים שנכללו באובייקט mediaInfo מהשולח.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

עכשיו אתם יכולים לבקש ולהפעיל שידורי DAI באמצעות CAF DAI SDK של Google. כדי לקבל מידע על תכונות מתקדמות יותר של ה-SDK, אפשר לעיין במדריכים האחרים או להוריד את האפליקציות לדוגמה של המקלט.