"เวลามีค่ามากกว่าเงิน"
แชร์ App Stack ที่ใช้ในการ Live งาน Thai Dev Special Live in Silicon Valley
25 Aug 2019 13:23   [3656 views]

เมื่อวานมีจัดงาน Fireside Chat ที่ดึงคนไทยหลากหลายอาชีพใน Silicon Valley มาเจอกันพูดคุยกัน พูดง่าย ๆ ก็ Meetup นั่นแหละเพราะอยู่นี่พวกเราก็ไม่ได้เจอกันบ่อยมาก เลยนัดเจอกันเยอะ ๆ กันสักทีนึง เมื่อวานเลยมากันกว่า 50 ชีวิตเลยทีเดียว ขอบคุณทุกคนมากที่มาาาา

ซึ่งไหน ๆ ก็มีคนมากมายมารวมตัวกันโดยนัดหมายแล้วทั้งที เราก็เลยจัด Live Session ที่พูดคุยกันด้วยในชื่อว่า Thai Developers Special Live in Silicon Valley และเพื่อให้การ Live เป็นไปได้อย่างราบรื่นและคนดูที่บ้านมีความสุข เราก็เลยมีตระเตรียมให้ภาพที่ได้จากการ Live ดูมีความ Professional ที่สุดเท่าที่จะทำได้ เช่น มีหลายกล้องตัดไปมา มีภาพตกแต่งประกอบในฉาก (อย่างพวก Overlay)

แต่ ๆ ๆ ๆ ถ้าใครเคย Live ก็จะรู้ว่าที่พูดมานี้เราไม่สามารถทำได้ด้วยการ Live ธรรมดา ๆ ผ่านแอป ฯ เฟสบุ๊คปกติได้เพราะมันจะได้แค่ภาพจากกล้องเดียวและตกแต่งอะไรภาพไม่ได้เลย งานนี้เลยต้องอาศัยเทคนิควางระบบเพื่อให้ทำได้ตามที่ต้องการโดยใช้อุปกรณ์รอบตัวทุกชิ้นให้เกิดประโยชน์ กว่าจะวางทุกอย่างเสร็จก็เป็นวัน แต่ก็ได้ผลออกมาน่าพอใจ เลยเอา App Stack ที่ใช้ทำมาแชร์ให้ฟังกันครับ

Live ของงานเมื่อวาน

ก็จะได้เห็นภาพ (และเผื่อใครพลาดชม) เราเลยขอเอา Live เมื่อวานมาแปะกันก่อนเลยละกันนะะะะ

ก็จะเห็นตั้งแต่นาทีแรกละว่ามีตัดภาพไปมา ถ้ากดดูสักนาทีที่ 10 เป็นต้นไปก็จะเห็นโลโก้ขึ้นด้านขวาล่าง ฯลฯ อีกมากมาย นั่นแหละ ถามว่าทำยังไง ? อ่ะ เรามาดูกัน ๆ

App Stack ที่ใช้

งานนี้มีใช้กล้องสองตัว ไมค์สามตัว พร้อม Overlay ภาพตามจังหวะของงาน หลัก ๆ ก็มีใช้กล้องมือถือเป็นตัวถ่าย แต่ส่งภาพไปยังคอมพิวเตอร์ (Windows 10) ผ่านซอฟต์แวร์ตัดและซ้อนภาพก่อนจะส่งภาพ Live ไปยัง Facebook ต่ออีกทอดนึง นี่คืออุปกรณ์ทั้งหมดที่ใช้ในระบบเมื่อวานนี้ครับ

เจาะเป็นส่วน ๆ ตามนี้

ใช้ Windows 10 เป็น Hub

การที่จะทำให้ใช้หลาย ๆ กล้องได้และสามารถย้ายกล้องไปรอบ ๆ ได้อย่างอิสระ กล้องมือถือเลยถูกเลือกเป็น Choice แรกและ Choice เดียว ง่าย ๆ ไม่ซับซ้อน หาวิธีทำให้กล้องมือถือสตรีมภาพขึ้นคอมพิวเตอร์ในรูปแบบของ Webcam มาตรฐานให้ได้ จากนั้นที่เหลือจะง่ายละ

ซึ่งก็มีแอป ฯ ที่ทำอะไรแบบนี้ได้อยู่ แต่ส่วนใหญ่จะทำงานได้กับ Windows ดังนั้นศูนย์รวมของทุกอย่างในการ Live รอบนี้จึงเป็นเป็นคอมพิวเตอร์ที่รัน Windows 10 อย่างหลีกเลี่ยงไม่ได้ ตอนแรกจะใช้ Mac อยู่แต่ก็ยอมแพ้ไปเพราะระบบปิดเกินไปจนทำอะไรพวกนี้ไม่ค่อยได้

ใช้ CamON Live Streaming บน Note 9 เป็นกล้องหลัก

สำหรับกล้องหลักเราเลือกใช้ Note 9 เพราะกล้องคมชัดและแบตเหลือเฟือ สามารถสตรีมได้สองชั่วโมงโดยแบตไม่หมด

แอป ฯ ที่ใช้สตรีมภาพขึ้นคอมพ์แบบ Webcam มีอยู่หลายตัว ลองไป 4 ตัวได้ แต่สุดท้ายเลือกใช้ CamON Live Streaming เพราะมี Latency น้อยที่สุดในขณะที่คุณภาพภาพก็อยู่ในระดับดีมาก

แอป ฯ ที่เอาไว้ติดต่อบน Windows ทำมาใช้งานง่ายมาก จิ้มทีสองทีก็ใช้งานได้แล้ว ถ้าหลุดก็ต่อใหม่ได้ทันทีโดยไม่วุ่นวายอะไร โดยรวมถือว่าแฮปปี้กับคุณภาพแอป ฯ ตัวนี้มาก

ใช้ iVCam บน iPhone 7 เป็นกล้องสอง

เพื่อให้มุมภาพไม่จำเจ เราเลยมีกล้องสองเตรียมไว้เพื่อให้ตัดไปมาได้อย่างสมูทสวยงาม แต่จะใช้ CamON อีกก็ไม่ได้เพราะระบบพวกนี้ใช้ได้แค่ 1 ตัวต่อ 1 แอป ฯ เท่านั้น ไม่สามารถสร้าง Webcam ที่สองบน Windows เครื่องเดียวกันได้ ก็เลยต้องหาแอป ฯ ที่สอง

แต่หลังจากลองมาหลายตัวจัด ๆ ก็พบว่าแอป ฯ บนแอนดรอยด์ไม่มีตัวไหนให้คุณภาพที่น่าพอใจอีกเลย ก็เลยไปลองบน iOS อีก 2-3 ตัว สุดท้ายก็เจอ iVCam ที่ทำงานได้คุณภาพดีมากกกก กล้องแทบไม่มีดีเลย์ ก็เลยตัดสินใจใช้โดยไม่ต้องคิดเยอะ และก็จับ Mount เข้า OSMO Mobile 2 เพื่อให้ตอนเดินถ่ายนั้นสมูทกว่าถือนิ่ง ๆ ด้วยมือ

ใช้ Sound Mixer + ไมโครโฟนเป็นแหล่งเสียง

เผอิญที่บ้านมี Sound Mixer + ไมโครโฟนอยู่ ก็เลยใช้เลยตรง ๆ และเอา Audio Out ต่อเข้าช่อง Mic ของคอมพิวเตอร์ ตรงไปตรงมา ไม่มีอะไรเป็นพิเศษ

ใช้ WO Mic บน S10+ เป็นไมค์ลอยสำรอง

เผอิญมีไมโครโฟนหลักแค่สองตัวแต่เป็นไมค์ลอยแค่ตัวเดียว แต่มีเหตุต้องใช้ไมค์ลอยสองตัวตอนเปิดงานจากหน้าบ้าน งานนี้ก็เลยจับ S10+ ต่อกับไมโครโฟน Rode smartLav+ และทำเป็นไมค์ลอยเข้าคอมพ์ด้วยแอป ฯ WO Mic ซึ่งทำงานได้ดีระดับหนึ่ง แต่ชอบมีดีเลย์แบบไม่คงที่ สุดท้ายเลยใช้แค่ช่วงแรกเท่านั้นและหยุดใช้ไปในที่สุด

ใช้แอป ฯ OBS เป็นซอฟต์แวร์รวมทุกอย่างเข้าด้วยกัน

OBS (Open Broadcast Software) เป็นสุดยอดซอฟต์แวร์ทรงพลังที่เกิดมาเพื่อทำหน้าที่รวม Media Source ทุกอย่างเข้าด้วยกันเพื่อสตรีมออกไปเป็นช่องทางเดียว อยากเปิดกล้องไหน เอาไว้ตำแหน่งไหน อยากวาง Overlay อะไร (เช่นโลโก้) อยากเปิดเสียงไหนดังค่อยเท่าไหร่ ทำได้หมดทุกอย่าง และนี่แหละที่เป็นพระเอกของงานนี้ ! และที่สำคัญ ... ฟรี !

โดยภาพที่ถูกสตรีมออกสามารถทำได้หลายแบบ แต่แบบที่ใช้ในอีเว้นต์นี้คือเปิดเป็น RTMP และเชื่อมกับ Facebook Live ด้วย Stream Key (เป็นระบบ Custom Live) ซึ่งภาพที่ออกจากแอป ฯ OBS จะดีเลย์ประมาณ 3-5 วิก่อนจะไปแสดงบน Facebook Live

ใช้ Facebook Live ดึงภาพ/เสียงจาก OBS ไปขึ้น Live

ก็อย่างที่บอกด้านบน ระบบ Facebook Live สามารถดึง Streaming จาก OBS ไปขึ้น Live ได้โดยตรง ก็แค่กด Start Streaming บนแอป ฯ OBS และเริ่ม Live บน Facebook ได้ทันที เย้ เย

ผลลัพธ์และคุณภาพโดยรวม

รู้สึกแฮปปี้กับผลลัพธ์ที่ได้มากกกก ภาพและเสียงคมชัด การตัดภาพไปมาพร้อมมี Overlay ทำให้ Live ดูโปรขึ้นมาก ๆ ไม่เหมือนกับ Live น่าเบื่อ ๆ อีกต่อไป

ข้อเสียคือต้องมีคนคอยคุมระบบ (โดยเฉพาะ OBS) ยังไงก็ขอบคุณทีมงานทุกท่านที่มาช่วยคอนโทรลระบบต่าง ๆ ด้วยนะคร้าบบบ ไม่มีทุกท่านไม่มีทางราบรื่นแบบเน้

ปัญหาที่เจอ: ภาพเสียงไม่ Sync

ปัญหาเดียวที่เจอในระบบที่เซตขึ้นมาคือภาพและเสียงไม่ Sync กัน เพราะว่ามันมาจากคนละ Source กันโดยสิ้นเชิง ทำให้บางทีพอเกิดภาพดีเลย์ก็จะทำให้เสียงและภาพไม่ตรงกันละ ทำให้เกิดภาพเสียงไม่ Sync กันอย่างที่เห็นใน Live เมื่อวาน

ยังไงเก็บไว้เป็นโจทย์แก้ไขรอบหน้า ๆ =D

ก็หวังว่าจะมีประโยชน์ เผื่อใครจะทำ Live อะไรสนุก ๆ หรู ๆ หรา ๆ ก็ลองดูนะคร้าบ ของเล่นเยอะ !

บทความที่เกี่ยวข้อง

Apr 18, 2019, 08:35
21984 views
วิธีอัปรูป Live Focus / Portrait ที่ถ่ายด้วยมือถือซัมซุงและ Huawei ให้เป็น 3D Photo บนเฟสบุ๊ค
Aug 25, 2019, 13:23
3656 views
แชร์ App Stack ที่ใช้ในการ Live งาน Thai Dev Special Live in Silicon Valley
0 Comment(s)
Loading