เลือกโซลูชัน DAI ที่คุณสนใจ
DAI แบบครบวงจร
คู่มือนี้แสดงวิธีเล่นสตรีม DAI โดยใช้ IMA CAF DAI SDK หากต้องการดูหรือทําตามตัวอย่างการผสานรวมที่เสร็จสมบูรณ์แล้ว ให้ดาวน์โหลดตัวอย่าง
ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับ Chromecast
โปรโตคอล Web Receiver ของเฟรมเวิร์กแอปพลิเคชัน คำแนะนำนี้ถือว่าคุณคุ้นเคยกับแนวคิดพื้นฐานเกี่ยวกับตัวรับ CAF เช่น ตัวขัดจังหวะข้อความและออบเจ็กต์ mediaInformation รวมถึงคุ้นเคยกับการใช้เครื่องมือควบคุมและสั่งการของ Cast เพื่อจําลองตัวส่ง CAF
หากต้องการใช้ IMA DAI คุณต้องมี Ad Manager 360 หากคุณมีโฆษณา โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ 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 และแก้ไขให้โฮสต์โค้ดที่ได้จากคู่มือนี้ได้
- แอปสำหรับส่งที่กำหนดค่าให้ใช้แอปตัวรับเว็บ ตัวอย่างนี้ ใช้คำสั่งแคสต์และเครื่องมือควบคุมเป็น ผู้ส่ง
กําหนดค่าออบเจ็กต์ MediaInfo ของผู้ส่ง
ขั้นแรก ให้กำหนดค่า MediaInfo ของแอปผู้ส่ง ออบเจ็กต์ที่จะรวม ฟิลด์ต่อไปนี้
contentId
|
ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้ | |
contentUrl
|
URL สตรีมสำรองที่จะโหลดหากคําขอสตรีม DAI ไม่สําเร็จไม่ว่าด้วยเหตุผลใดก็ตาม | |
streamType
|
สำหรับสตรีมแบบสด ค่านี้ควรตั้งเป็น "LIVE" สำหรับสตรีม VOD ค่านี้ควรตั้งเป็น "BUFFERED" | |
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 และรับ Player Manager
เพิ่มแท็กสคริปต์เพื่อนำเข้า IMA DAI SDK สำหรับ CAF ไปยังเว็บรีซีฟเวอร์ เพียงแค่ หลังจากที่สคริปต์โหลด CAF CAF DAI SDK เป็น 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 ของ 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 โปรดดูคำแนะนำอื่นๆ หรือ ดาวน์โหลดตัวรับตัวอย่างของเรา แอปพลิเคชัน