דף זה תורגם על ידי Cloud Translation API.

שנתחיל?

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

לפני השימוש במדריך הזה, חשוב להכיר את פרוטוקול מקלט האינטרנט של Chromecast Application Framework. במדריך הזה מבוססת על רמת ההיכרות הבסיסית של מושגים של מקלטי CAF, כמו מיירטי הודעות ואובייקטים mediainfo, וגם היכרות עם השימוש בכלי Cast ל-Control ולבקרה כדי אמולציה של שולח CAF.

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

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

הטמעת DAI באמצעות IMA CAF DAI SDK כוללת שני רכיבים עיקריים:

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

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

לפני שמתחילים, צריך:

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

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

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

תוכן מזהה		מזהה ייחודי של פריט המדיה הזה
תוכן URL		כתובת ה-URL של מקור הנתונים לגיבוי בטעינה אם DAI StreamRequest נכשלה מסיבה כלשהי
streamType		בשידורים חיים, הערך הזה צריך להיות 'LIVE'. עבור שידורי VOD, הערך הזה צריך להיות 'BUFFERED'
customData	assetKey	שידורים חיים בלבד. מזהה את השידור החי שרוצים לטעון
	contentSourceId	שידורי VOD בלבד. מזהה את פיד המדיה שמכיל את השידור המבוקש.
	videoId	שידורי VOD בלבד. מזהה את מקור הנתונים המבוקש בפיד המדיה שצוין.
	מפתח API	מפתח API אופציונלי שיאפשר לכם לאחזר את כתובת ה-URL של השידור מ-IMA DAI SDK.
	senderCanSkip	ערך בוליאני שנועד לאפשר למקבל התשלום לדעת אם המכשיר השולח יכול להציג לחצן דילוג, וכך מאפשר תמיכה במודעות שניתן לדלג עליהן

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

בשידור חי

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

VOD

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

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

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

בהתאם ל-CAF SDK Basic Receiver Guide, יצירה של מקלט אינטרנט בסיסי.

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

<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>

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

יש להוסיף תג סקריפט כדי לייבא את IMA DAI SDK ל-CAF אל מקלט האינטרנט, מיד לאחר שהסקריפט טוען את CAF. ה-CF 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>

4. מפעילים את מנהל הסטרימינג של IMA

מפעילים את מנהל השידור של 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>

5. יצירה של ווידג'ט ההודעות לטעינה

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

<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>

6. יצירת בקשה לסטרימינג

כדי להשלים את השילוב של CA 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.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 עם SDK של CAF DAI של Google. כדי לקבל מידע נוסף על תכונות מתקדמות יותר של SDK, אפשר לעיין במדריכים האחרים או להוריד את אפליקציות המקלט לדוגמה שלנו.