เลือกโซลูชัน DAI ที่คุณสนใจ
DAI บริการเต็มรูปแบบ
คู่มือนี้แสดงวิธีเล่นสตรีม DAI โดยใช้ IMA CAF DAI SDK หากคุณต้องการดูหรือทำตามการผสานรวมตัวอย่างที่สมบูรณ์ โปรดดาวน์โหลดตัวอย่าง
ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับโปรโตคอลตัวรับเว็บของเฟรมเวิร์กแอปพลิเคชัน Chromecast คู่มือนี้จะอธิบายถึงความคุ้นเคยกับแนวคิดตัวรับ CAF เช่น ตัวดักจับข้อความและออบเจ็กต์ mediaInformation
รวมถึงความคุ้นเคยกับการใช้เครื่องมือควบคุมและคำสั่งแคสต์เพื่อจำลองผู้ส่ง CAF
หากต้องการใช้ IMA DAI คุณต้องมีบัญชี Ad Manager 360 หากคุณมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูล การลงชื่อสมัครใช้ Ad Manager ได้ที่ศูนย์ช่วยเหลือของ Ad Manager
หากต้องการข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ หรือการใช้ SDK ฝั่งไคลเอ็นต์ IMA โปรดดู SDK โฆษณาสื่ออินเทอร์แอกทีฟ
ภาพรวม CAF DAI
การใช้งาน DAI โดยใช้ IMA CAF DAI SDK ประกอบด้วยองค์ประกอบหลัก 2 อย่างดังที่แสดงในคู่มือนี้ ได้แก่
StreamRequest
: ออบเจ็กต์ที่กำหนดคำขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google คำขอสตรีมมี 2 รูปแบบหลักๆ ดังนี้LiveStreamRequest
: ระบุคีย์ชิ้นงาน และคีย์ API ที่ไม่บังคับ รวมถึงพารามิเตอร์ที่ไม่บังคับอื่นๆVODStreamRequest
: ระบุรหัสแหล่งที่มาของเนื้อหา รหัสวิดีโอ และคีย์ API ที่ไม่บังคับ รวมถึงพารามิเตอร์ที่ไม่บังคับอื่นๆ
StreamManager
: ออบเจ็กต์ที่จัดการการสื่อสารระหว่างสตรีมวิดีโอกับ IMA DAI SDK เช่น การเริ่มทำงานโดยใช้คำสั่ง ping ของการติดตามและการส่งต่อเหตุการณ์สตรีมไปยังผู้เผยแพร่โฆษณา
สิ่งที่ต้องดำเนินการก่อน
- บัญชี Cast Developer Console ที่มีอุปกรณ์ทดสอบที่ลงทะเบียนแล้ว
- แอปเว็บรีซีฟเวอร์ที่โฮสต์ไว้ซึ่งลงทะเบียนกับ Cast Developer Console และสามารถแก้ไขได้เพื่อโฮสต์โค้ดจากคู่มือนี้
- แอปส่งที่กำหนดค่าให้ใช้แอปตัวรับเว็บ ตัวอย่างนี้ใช้เครื่องมือควบคุมและคำสั่งแคสต์เป็นผู้ส่ง
กำหนดค่าออบเจ็กต์ MediaInfo ของผู้ส่ง
ก่อนอื่น ให้กำหนดค่าออบเจ็กต์ MediaInfo ของแอปผู้ส่งให้รวมช่องต่อไปนี้
contentId
|
ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้ | |
contentUrl
|
URL ของสตรีมสำรองที่จะโหลดหาก DAI StreamRequest ล้มเหลวไม่ว่าด้วยเหตุผลใดก็ตาม | |
streamType
|
สำหรับสตรีมแบบสด ควรกำหนดค่านี้เป็น "LIVE" และควรกำหนดค่านี้เป็น "BUFFERED" สำหรับสตรีม VOD | |
customData
|
assetKey
|
สตรีมแบบสดเท่านั้น ระบุสตรีมแบบสดที่จะโหลด |
contentSourceId
|
สตรีม VOD เท่านั้น ระบุฟีดสื่อที่มีสตรีมที่ขอ | |
videoId
|
สตรีม VOD เท่านั้น ระบุสตรีมที่ขอภายในฟีดสื่อที่ระบุ | |
ApiKey
|
คีย์ 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": "2548831",
"videoId": "tears-of-steel",
"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 และรับโปรแกรมจัดการโปรแกรมเล่น
เพิ่มแท็กสคริปต์เพื่อนำเข้า 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
เริ่มต้นเครื่องมือจัดการสตรีมของ 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>
สร้างตัวหยุดข้อความโหลด
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.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 โปรดดูคำแนะนำอื่นๆ หรือดาวน์โหลดแอปพลิเคชันตัวรับสัญญาณตัวอย่าง