1. ภาพรวม
Codelab นี้จะสอนวิธีสร้างแอปตัวรับสัญญาณเว็บที่กําหนดเองซึ่งใช้ Cast Ad Breaks API
Google Cast คืออะไร
Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยัง TV ได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่เป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้
Google Cast SDK ช่วยให้คุณขยายแอปเพื่อควบคุมทีวีหรือระบบเสียงได้ Cast SDK ช่วยให้คุณเพิ่มคอมโพเนนต์ UI ที่จําเป็นได้ตามรายการตรวจสอบการออกแบบ Google Cast
รายการตรวจสอบการออกแบบ Google Cast มีไว้ให้ผู้ใช้ของ Cast ใช้งานได้ง่ายและคาดการณ์ได้ในทุกแพลตฟอร์มที่รองรับ
สิ่งที่เรากําลังจะสร้าง
หลังจากที่คุณสร้าง Codelab นี้เสร็จแล้ว คุณจะสร้าง Cast Receiver ที่ใช้ประโยชน์จาก Break API ใหม่ได้
สิ่งที่คุณจะได้เรียนรู้
- วิธีใส่ช่วงพักของ VMAP และ VAST ในเนื้อหาสําหรับ Cast
- วิธีข้ามคลิปช่วงพักโฆษณา
- วิธีปรับแต่งลักษณะการทํางานของช่วงพักโฆษณาเริ่มต้นเมื่อทําการค้นหา
สิ่งที่ต้องมี
- เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
- บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
- อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กําหนดค่าด้วยการเข้าถึงอินเทอร์เน็ต
- ทีวีหรือจอภาพที่มีอินพุต HDMI หรือ Google Home Hub
ประสบการณ์การใช้งาน
- คุณจะต้องมีความรู้เกี่ยวกับการพัฒนาเว็บมาก่อน
- ประสบการณ์ที่ผ่านมาในการสร้างแอปพลิเคชันผู้ส่งและผู้รับการแคสต์
คุณจะใช้บทแนะนํานี้อย่างไร
คุณจะให้คะแนนประสบการณ์ในการสร้างเว็บแอปอย่างไร
2. รับโค้ดตัวอย่าง
คุณสามารถดาวน์โหลดตัวอย่างโค้ดทั้งหมดลงในคอมพิวเตอร์ของคุณได้...
และคลายไฟล์ ZIP ที่ดาวน์โหลด
3. การทําให้ผู้รับใช้งานได้ภายในเครื่อง
หากต้องการใช้อุปกรณ์รับสัญญาณบนเว็บกับอุปกรณ์ Cast คุณต้องโฮสต์อุปกรณ์ดังกล่าวไว้ในตําแหน่งที่อุปกรณ์ Cast เข้าถึงได้ ถ้ามีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจดบันทึก URL ไว้ เนื่องจากต้องใช้ในหัวข้อถัดไป
หากไม่มีเซิร์ฟเวอร์พร้อมให้ใช้งาน คุณก็ใช้ Firebase Hosting หรือ ngrok ได้
เรียกใช้เซิร์ฟเวอร์
เมื่อคุณตั้งค่าบริการที่คุณเลือกแล้ว ให้ไปที่ app-start และเริ่มเซิร์ฟเวอร์ของคุณ
โปรดจด URL สําหรับผู้รับที่โฮสต์ของคุณ ซึ่งจะนําไปใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันในคอนโซลนักพัฒนาซอฟต์แวร์ Cast
คุณต้องลงทะเบียนแอปพลิเคชันของคุณเพื่อให้สามารถเรียกใช้ตัวรับสัญญาณที่กําหนดเอง ดังเช่นใน Codelab นี้บนอุปกรณ์ Chromecast หลังจากที่คุณลงทะเบียนแอปพลิเคชัน คุณจะได้รับรหัสแอปพลิเคชันที่แอปพลิเคชันผู้ส่งของคุณต้องใช้ในการเรียก API เช่น ในการเรียกใช้แอปพลิเคชันตัวรับ
คลิก "เพิ่มแอปพลิเคชันใหม่"
เลือก "ตัวรับสัญญาณที่กําหนดเอง" ซึ่งเป็นสิ่งที่เรากําลังสร้าง
ป้อนรายละเอียดของผู้รับใหม่ อย่าลืมใช้ URL ที่คุณลงท้ายด้วย
ในส่วนสุดท้าย จดรหัสแอปพลิเคชันที่กําหนดให้กับผู้รับรายใหม่
นอกจากนี้ คุณต้องลงทะเบียนอุปกรณ์ Google Cast เพื่อให้เข้าถึงอุปกรณ์ของผู้รับก่อนเผยแพร่ เมื่อคุณเผยแพร่แอปพลิเคชันตัวรับสัญญาณแล้ว แอปพลิเคชันนั้นจะใช้งานได้กับอุปกรณ์ Google Cast ทั้งหมด สําหรับวัตถุประสงค์ของ Codelab นี้ ขอแนะนําให้คุณทํางานกับแอปพลิเคชันรีซีฟเวอร์ที่ไม่ได้เผยแพร่
คลิก "เพิ่มอุปกรณ์ใหม่"
ป้อนหมายเลขซีเรียลที่พิมพ์ไว้ด้านหลังอุปกรณ์ Cast และตั้งชื่อที่สื่อความหมาย นอกจากนี้ คุณยังค้นหาหมายเลขซีเรียลได้โดยแคสต์หน้าจอใน Chrome เมื่อเข้าถึง Google Cast SDK Developer Console
ผู้รับและอุปกรณ์อาจใช้เวลา 5-15 นาทีเพื่อเตรียมพร้อมสําหรับการทดสอบ หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์ Cast
5. เตรียมโครงการเริ่มต้น
ก่อนที่จะเริ่มต้น Codelab การอ่านคู่มือนักพัฒนาซอฟต์แวร์ซึ่งให้ภาพรวมของฟังก์ชันการทํางานของโฆษณาใหม่อาจเป็นประโยชน์
เราจําเป็นต้องเพิ่มการสนับสนุนสําหรับ Google Cast ไปยังแอปพลิเคชันเริ่มต้นที่คุณดาวน์โหลด ต่อไปนี้คือคําศัพท์ของ Google Cast ที่เราจะใช้ใน Codelab นี้
- แอปผู้ส่งทํางานในอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
- แอปตัวรับจะทํางานบนอุปกรณ์ Google Cast
ตอนนี้คุณพร้อมที่จะสร้างโปรเจ็กต์เริ่มต้นเพิ่มเติมโดยใช้ตัวแก้ไขข้อความที่คุณชื่นชอบแล้ว โดยทําดังนี้
- เลือกไดเรกทอรี
app-startจากตัวอย่างการดาวน์โหลดโค้ด - เปิด
js/receiver.jsและ index.html
โปรดทราบว่าในขณะที่ทํา Codelab นี้ http-server ควรจะเลือกการเปลี่ยนแปลงที่คุณทํามา หากไม่พบ แสดงว่าพยายามฆ่าและรีสตาร์ท http-server แทน
สําหรับผู้ส่ง เราจะใช้การแก้ไขข้อบกพร่องของเครื่องรับ CAF เช่นกันเพื่อเริ่มเซสชันการแคสต์ รีซีฟเวอร์ออกแบบมาเพื่อเริ่มเล่นสตรีมโดยอัตโนมัติ
การออกแบบแอป
แอปฝั่งผู้รับจะเริ่มเซสชันการแคสต์และจะสแตนด์บายจนกว่าคําขอโหลด (เช่น คําสั่งในการเล่นสื่อ) จากผู้ส่งจะมาถึง
แอปประกอบด้วยมุมมองหลัก 1 มุมมองที่กําหนดไว้ใน index.html และไฟล์ JavaScript 1 ไฟล์ชื่อ js/receiver.js ซึ่งมีตรรกะทั้งหมดเพื่อให้ตัวรับสัญญาณทํางานได้
index.html
ไฟล์ html นี้จะมี UI ทั้งหมดสําหรับแอปรับของเรา ในขณะนี้ค่าเหล่านี้ว่างเปล่า
Receiver.js
การจัดการสคริปต์นี้จะจัดการตรรกะทั้งหมดสําหรับแอปรีซีฟเวอร์ของเรา ขณะนี้มีตัวรับ CAF พื้นฐาน
6. เพิ่ม VMAP ลงในเนื้อหา
ในการเริ่มต้น ให้เปิดผู้ส่งเว็บใน Chrome ป้อนรหัสแอปพลิเคชันของผู้รับที่คุณได้รับในแผงควบคุมสําหรับนักพัฒนาซอฟต์แวร์ Cast SDK แล้วคลิก "ตั้งค่า"
ในรีซีฟเวอร์ เราจําเป็นต้องเพิ่มตรรกะบางอย่างเพื่อรวมโฆษณาไว้ในเนื้อหา
คัดลอกบรรทัดต่อไปนี้ลงในไฟล์ js/receiver.js ซึ่งประกอบด้วยตัวอย่างแท็ก VMAP จาก DoubleClick พร้อมด้วยการสุ่ม
const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));
ใน js/receiver.js file ให้ค้นหาฟังก์ชัน playerManager.setMessageInterceptor และเพิ่มค่าต่อไปนี้ก่อนบรรทัด return request; สุดท้ายในฟังก์ชัน
request.media.vmapAdsRequest = {
adTagUrl: vmapUrl,
};
หมายเหตุ: ออบเจ็กต์ที่กําหนดให้กับ vmapAdsRequest ข้างต้นเป็นออบเจ็กต์ VastAdsRequest เวอร์ชันย่อ
บันทึกการเปลี่ยนแปลงของคุณไปยัง js/receiver.js และเริ่มต้นเซสชันการแคสต์บนผู้ส่งเว็บด้วยการคลิกขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก "แคสต์" สตรีมโฆษณาควรเริ่มเล่นทันที
7. เพิ่ม VAST ลงในเนื้อหาของคุณ
หากคุณติดตั้งโค้ด VMAP จากด้านบนแล้ว โปรดแสดงความคิดเห็นให้เราทราบ ต่อไปนี้เราจะอธิบายวิธีใช้โฆษณา VAST ในเนื้อหา
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js ซึ่งประกอบด้วยคลิป VAST break 6 คลิปจาก DoubleClick และคลิปแบบสุ่ม คลิปช่วงพักโฆษณาเหล่านี้จะกําหนดให้กับช่วงพัก 5 รายการ และระบุตําแหน่งของช่วงพักแต่ละช่วงด้วย
const addVASTBreaksToMedia = (mediaInformation) => {
mediaInformation.breakClips = [
{
id: "bc1",
title: "bc1 (Pre-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc2",
title: "bc2 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc3",
title: "bc3 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc4",
title: "bc4 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc5",
title: "bc5 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc6",
title: "bc6 (Post-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
}
];
mediaInformation.breaks = [
{
id: "b1",
breakClipIds: ["bc1"],
position: 0
},
{
id: "b2",
breakClipIds: ["bc2"],
position: 15
},
{
id: "b3",
breakClipIds: ["bc3","bc4"],
position: 60
},
{
id: "b4",
breakClipIds: ["bc5"],
position: 100
},
{
id: "b5",
breakClipIds: ["bc6"],
position: -1
}
];
};
หมายเหตุ: พร็อพเพอร์ตี้ breakClipIds ของช่วงพักคืออาร์เรย์ ซึ่งหมายความว่าคลิปแยกหลายๆ คลิปสามารถกําหนดให้กับแต่ละช่วงพักได้
ใน js/receiver.js file ให้ค้นหาจุดตัดข้อความ LOAD กล่าวคือบรรทัดที่ขึ้นต้นด้วย playerManager.setMessageInterceptor และเพิ่มบรรทัดต่อไปนี้ก่อนบรรทัด return request; สุดท้ายในฟังก์ชัน
addVASTBreaksToMedia(request.media);
บันทึกการเปลี่ยนแปลงของคุณไปยัง js/receiver.js และเริ่มต้นเซสชันการแคสต์บนผู้ส่งเว็บด้วยการคลิกขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก "แคสต์" สตรีมโฆษณาควรเริ่มเล่นทันที
8. ข้ามช่วงพักโฆษณา
CAF มีคลาสใหม่ที่ชื่อว่า BreakManager ซึ่งจะช่วยคุณในการนํากฎทางธุรกิจที่กําหนดเองไปใช้สําหรับลักษณะการทํางานของโฆษณา สมมติว่าคุณต้องการให้ระยะเวลาผ่อนผันเพื่อข้ามโฆษณาหลังจากผ่านไปสักระยะหนึ่ง
ผู้ส่งในตัวอย่างของเราไม่มีตัวควบคุมสื่อ ลองเพิ่มออฟเซ็ตเริ่มต้นเป็น 10 วินาทีเพื่อให้สตรีมเริ่มเล่นหลังโฆษณาตอนต้น แต่ก่อนช่วงพักโฆษณาตอนกลางรายการแรกที่เวลา 15 วินาที
ค้นหา playerManager.setMessageInterceptor และเพิ่มบรรทัดต่อไปนี้ก่อนถึง return request
request.currentTime = 10;
บันทึกไฟล์ receiver.js และเริ่มเซสชันการแคสต์ คุณจะเห็นเนื้อหาโหลดใน 10 วินาที แล้วเล่นโฆษณาในอีก 5 วินาทีต่อมา
ตอนนี้เรามาเพิ่มกฎเพื่อข้ามโฆษณาตอนกลางที่จุด 15 วินาทีกัน
คุณจะต้องมีอินสแตนซ์ของ BreakManager เพื่อตั้งค่าจุดตัดสําหรับการโหลดช่วงพัก คัดลอกบรรทัดต่อไปนี้ลงในไฟล์ js/receiver.js หลังจากบรรทัดที่มีตัวแปร context และ playerManager
const breakManager = playerManager.getBreakManager();
คราวนี้ เราจะมาเริ่มสกัดกั้นด้วยกฎเพื่อข้ามช่วงพักโฆษณาที่เกิดขึ้นก่อน 30 วินาทีไปก่อน ดักจับนี้ทําหน้าที่เหมือนกับดักตัวแปล LOAD บน PlayerManager ยกเว้นตัวนี้มีการโหลดเฉพาะ BreakClips
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js
breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
/** Below code will skip playback of break clips if the break position is less than 30 **/
let breakObj = breakCtx.break;
if(breakObj.position < 30)
return null;
else
return breakClip;
});
หมายเหตุ: เราแสดงผลค่า null ที่นี่สําหรับ BreakClips ที่ควรข้าม
บันทึกการเปลี่ยนแปลงของคุณไปยัง js/receiver.js และเริ่มต้นเซสชันการแคสต์บนผู้ส่งเว็บด้วยการคลิกขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก "แคสต์"
สตรีมควรเริ่มเล่น แต่จะไม่มีการข้ามการบล็อกโฆษณาที่เราเห็นใน 15 วินาทีก่อนหน้านี้
9. การปรับแต่งพฤติกรรมการกรอวิดีโอ
เมื่อผู้ใช้กรอไปข้างหน้า การพักการเล่นระหว่างการค้นหาจาก และ รอการค้นหาสุดท้ายจะเล่นก่อนที่การเล่นเนื้อหาจะเริ่มจากตําแหน่ง searchTo เมื่อผู้ใช้กรอวิดีโอกลับ จะไม่มีการเล่นช่วงพัก นี่คือลักษณะการทํางานเริ่มต้นของการพัก
เราปรับแต่ง BreakManager เพื่อปรับแต่งเวลาพักระหว่างเล่นในการค้นหา เราใช้ setBreakSeekInterceptor ของ BreakManager เพื่อระบุพฤติกรรมที่กําหนดเองตามที่เราต้องการ มีการเรียกใช้ setBreakSeekInterceptor เมื่อใดก็ตามที่ดําเนินการค้นหา
เราส่งผ่านฟังก์ชันเรียกกลับไปยัง setBreakSeekInterceptor ฟังก์ชันเรียกกลับจะถูกส่งผ่านวัตถุที่มีตัวแบ่งทั้งหมดระหว่างตําแหน่ง requestFrom กับตําแหน่ง requestTo
มาตั้งค่าตัวช่วยสกัดกั้นด้วยกฎเพื่อเล่นช่วงพักชมการแข่งขันที่คั่นระหว่างตําแหน่ง "FromFrom" กับ "LookTo"
คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ js/receiver.js
breakManager.setBreakSeekInterceptor(function(breakSeekData) {
/**
*
* Below code will play an unwatched break between seekFrom and seekTo position
* Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
*/
let breakToPlay;
for (let i = 0; i < breakSeekData.breaks.length; i++) {
if (!breakSeekData.breaks[i].isWatched) {
breakToPlay = breakSeekData.breaks[i];
}
}
if (breakToPlay){
breakSeekData.breaks = [breakToPlay];
return breakSeekData;
}
});
หมายเหตุ: เราจะไม่แสดงข้อผิดพลาด ถ้าเราแสดงผล breakSeekData ตามเดิม ช่วงพักทั้งหมดระหว่าง requestFrom จะเล่นที่ toTo จะเล่น
บันทึกการเปลี่ยนแปลงของคุณไปยัง js/receiver.js และเริ่มต้นเซสชันการแคสต์บนผู้ส่งเว็บด้วยการคลิกขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก "แคสต์" สตรีมโฆษณาควรเริ่มเล่นทันที
10. ขอแสดงความยินดี
ขณะนี้คุณทราบวิธีเพิ่มโฆษณาในแอปพลิเคชันตัวรับสัญญาณโดยใช้ SDK ตัวรับสัญญาณล่าสุด
โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์ช่วงพักโฆษณา