เลือกโซลูชัน DAI ที่คุณสนใจ
DAI ที่แสดงในพ็อด
IMA SDK ทำให้การผสานรวมโฆษณามัลติมีเดียเข้ากับเว็บไซต์และแอปของคุณง่ายขึ้น
IMA SDK สามารถขอโฆษณาจากเซิร์ฟเวอร์โฆษณา ที่สอดคล้องกับ VAST และจัดการการเล่นโฆษณาในแอปของคุณได้
เมื่อใช้ IMA DAI SDK แอปจะส่งคำขอสตรีมสำหรับโฆษณาและวิดีโอเนื้อหาสำหรับ VOD หรือเนื้อหาสด จากนั้น SDK จะแสดงสตรีมวิดีโอแบบรวม เพื่อให้คุณไม่ต้องจัดการสลับระหว่างโฆษณากับวิดีโอเนื้อหาภายในแอป
คู่มือนี้แสดงวิธีเล่นสตรีมการแสดงพ็อด DAI แบบสดโดยใช้ IMA DAI SDK สำหรับ CAF
ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับโปรโตคอลตัวรับเว็บของ Chromecast Framework คู่มือนี้มีความเข้าใจเบื้องต้นเกี่ยวกับแนวคิดของผู้รับ CAF เช่น ออบเจ็กต์ตัวดักจับข้อความและmediaInformation รวมถึงความคุ้นเคยกับการใช้เครื่องมือคำสั่ง Cast และการควบคุมเพื่อจำลองผู้ส่ง CAF
หากต้องการใช้การแสดงพ็อด IMA DAI คุณต้องทำงานร่วมกับพาร์ทเนอร์ที่แสดงพ็อดและต้องมีบัญชี Ad Manager 360 ขั้นสูง หากคุณมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ Ad Manager ได้ที่ศูนย์ช่วยเหลือของ Ad Manager
หากต้องการข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ หรือการใช้ SDK ฝั่งไคลเอ็นต์ IMA โปรดดู SDK โฆษณาสื่ออินเทอร์แอกทีฟ
ภาพรวมการแสดงพ็อด IMA DAI
การใช้งานการแสดงพ็อดโดยใช้ IMA CAF DAI SDK มีส่วนประกอบหลัก 2 ส่วนซึ่งแสดงให้เห็นในคู่มือนี้ ได้แก่
StreamRequest
: ออบเจ็กต์ที่กำหนดคำขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google คำขอระบุรหัสเครือข่าย คีย์เนื้อหาที่กำหนดเอง และคีย์ API ที่ไม่บังคับ รวมถึงพารามิเตอร์ที่ไม่บังคับอื่นๆStreamManager
: ออบเจ็กต์ที่จัดการการสื่อสารระหว่างสตรีมวิดีโอกับ IMA DAI SDK เช่น การเริ่มทำงานโดยใช้คำสั่ง ping ของการติดตามและการส่งต่อเหตุการณ์สตรีมไปยังผู้เผยแพร่โฆษณา
สิ่งที่ต้องดำเนินการก่อน
- บัญชี Cast Developer Console ที่มี อุปกรณ์ทดสอบที่ลงทะเบียนแล้ว
- แอปเว็บรีซีฟเวอร์ที่โฮสต์ไว้ซึ่งลงทะเบียนกับ Cast Developer Console และสามารถแก้ไขได้เพื่อโฮสต์โค้ดจากคู่มือนี้
- แอปสำหรับส่งที่กำหนดค่าให้ใช้แอปรับเว็บของคุณ สำหรับในตัวอย่างนี้ ให้ใช้คำสั่งควบคุมและคำสั่งการแคสต์เป็นผู้ส่ง
กำหนดค่าออบเจ็กต์ MediaInfo ของผู้ส่ง
ก่อนอื่น ให้กำหนดค่าออบเจ็กต์ MediaInfo
ของแอปผู้ส่งให้รวมช่องต่อไปนี้
ฟิลด์ | เนื้อหา | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้
CONTENT_ID |
||||||||||
contentUrl
|
ไม่บังคับ URL ของสตรีมสำรองเพื่อเล่นหากสตรีม DAI โหลดไม่สำเร็จ
BACKUP_STREAM_URL |
||||||||||
contentType
|
ไม่บังคับ ประเภท MIME ของสตรีมการสำรองข้อมูลเนื้อหา ซึ่งจำเป็นสำหรับสตรีม DASH เท่านั้น
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
ลิเทอรัลของสตริงหรือค่าคงที่ที่ใช้สำหรับค่านี้จะแตกต่างกันไปตามแพลตฟอร์มของผู้ส่ง | ||||||||||
customData
|
ช่อง customData มีที่เก็บคีย์-ค่าของช่องที่ต้องกรอกเพิ่มเติม
|
ตัวอย่างโค้ดบางส่วนที่จะช่วยคุณเริ่มต้นมีดังนี้
เว็บไซต์
หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บแคสต์ ให้สร้างออบเจ็กต์ MediaInfo
พร้อมข้อมูลที่จำเป็นก่อน จากนั้นจึงสร้างคำขอโหลดไปยังตัวรับเว็บ
// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
manifestUrl: "MANIFEST_URL",
networkCode: "NETWORK-CODE",
customAssetKey: "CUSTOM_ASSET_KEY",
apiKey: "API_KEY"
};
// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
() => { console.log('Load succeed'); },
(errorCode) => { console.log('Error code: ' + errorCode); });
Android
หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บแคสต์ ให้สร้างออบเจ็กต์ MediaInfo ที่มีข้อมูลที่จำเป็นก่อน จากนั้นสร้างคำขอโหลดไปยังตัวรับเว็บ
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.put("networkCode", "NETWORK-CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY")
.put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("CONTENT_STREAM_MIMETYPE")
.setStreamType(MediaInfo.STREAM_TYPE_LIVE)
.setCustomData(customData)
.build();
RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());
iOS (Obj-C)
หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บแคสต์ ให้สร้างออบเจ็กต์ GCKMediaInformation
พร้อมข้อมูลที่จำเป็นก่อน จากนั้นจึงสร้างคำขอโหลดไปยังตัวรับเว็บ
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"networkCode": @"NETWORK-CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY",
@"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];
GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
request.delegate = self;
}
iOS (Swift)
หากต้องการกำหนดค่าเหล่านี้ในผู้ส่งเว็บแคสต์ ให้สร้างออบเจ็กต์ GCKMediaInformation
พร้อมข้อมูลที่จำเป็นก่อน จากนั้นจึงสร้างคำขอโหลดไปยังตัวรับเว็บ
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"region": "API_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()
guard let mediaInfo = mediaInformation else {
print("invalid mediaInformation")
return
}
if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
request.delegate = self
}
เครื่องมือ CAC
หากต้องการกำหนดค่าเหล่านี้ในเครื่องมือคำสั่งแคสต์และการควบคุม ให้คลิกแท็บ "โหลดสื่อ" แล้วตั้งค่าประเภทคำขอโหลดที่กำหนดเองเป็น "โหลด" จากนั้นแทนที่ข้อมูล JSON ในพื้นที่ข้อความด้วย JSON นี้
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
ระบบส่งคำขอโหลดที่กำหนดเองนี้ไปยังผู้รับเพื่อทดสอบขั้นตอนที่เหลือได้
สร้างตัวรับ CAF พื้นฐาน
สร้าง Web Receiver ที่กำหนดเองตามที่เห็นใน CAF SDK Custom Web Receiver Guide
รหัสของผู้รับควรมีลักษณะดังนี้
<html>
<head>
<script
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
// ...
</script>
</body>
</html>
นำเข้า IMA DAI SDK และรับโปรแกรมจัดการโปรแกรมเล่น
เพิ่มแท็กสคริปต์เพื่อนำเข้า IMA DAI SDK สำหรับ CAF ไปยังเว็บรีซีฟเวอร์ของคุณหลังจากที่สคริปต์โหลด CAF แล้ว ในแท็กสคริปต์ ให้จัดเก็บบริบทตัวรับและ เครื่องมือจัดการโปรแกรมเล่นเป็นค่าคงที่ก่อนที่จะเริ่มตัวรับ
<html>
<head>
<script
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
เริ่มต้นตัวจัดการสตรีม IMA
<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>
สร้างตัวตัดโหลดของ Stream Manager
ก่อนที่จะส่งรายการสื่อไปยัง CAF ให้สร้างคำขอสตรีมในตัวตรวจจับข้อความ LOAD
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => { /* ... */};
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
// ...
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, createDAICastRequest);
castContext.start();
สร้างคำขอสตรีม
ใช้ฟังก์ชัน createStreamRequest
ให้เสร็จสมบูรณ์เพื่อสร้างสตรีมการแสดงพ็อดโดยอิงตามคำขอโหลด CAF
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => {
const streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
แทนที่ URL เนื้อหาด้วย URL ของไฟล์ Manifest และรหัสสตรีม
หากคำขอสตรีมสำเร็จ ให้ใช้ streamManager.getStreamId()
เพื่อดึงรหัสของสตรีมแล้วแทรกลงใน ManifestUrl โดยแทนที่ [[STREAMID]]
จากนั้นแทนที่ contentUrl
ที่มีอยู่ด้วย manifestUrl
ใหม่เพื่อให้ CAF เล่นสตรีมแบบสดด้วยพ็อดโฆษณาที่ต่อเข้าด้วยกัน
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
ตอนนี้คุณสามารถขอและเล่นสตรีมที่แสดงพ็อดด้วยเฟรมเวิร์กแอปพลิเคชันแคสต์และ IMA DAI SDK สำหรับ CAF