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