พออัดหน้าจอเสร็จแล้วกดหยุด หน้าต่างตัดต่อของ Recordly ซึ่งเป็นโปรแกรมอัดหน้าจอโอเพนซอร์สบนเดสก์ท็อปก็จะเด้งขึ้นมาทันที บนไทม์ไลน์มีบล็อกซูมเรียงไว้ตามจังหวะที่เราขยับเมาส์ งานที่เหลือจึงไม่ใช่การเปิดไทม์ไลน์เปล่าๆ แล้วเริ่มนับหนึ่งใหม่ แค่ไล่เช็กว่าจุดไหนควรเก็บซูมไว้หรือควรลบทิ้ง

คลิปเดโมที่ดูน่าเบื่อมักไม่ได้แพ้ที่เนื้อหา แต่เป็นเพราะภาพเต็มจอนิ่งเกินไป เมาส์เลื่อนไปมาแบบกระตุกๆ และไม่มีจุดโฟกัสบอกคนดูว่าต้องมองตรงไหน ปกติแล้วงานตกแต่งทั้งสามอย่างนี้ต้องพึ่งคนตัดต่อสายโมชันกราฟิก พออัดเสร็จก็ต้องส่งไฟล์ดิบให้อีกคนทำต่อ Recordly จึงรวมเครื่องมือเหล่านี้ไว้ในโปรแกรมอัดตั้งแต่ต้น ตัวโปรแกรมใช้งานได้ฟรีทั้งบน macOS, Windows และ Linux ปัจจุบันมีดาวบน GitHub กว่า 21,800 ดวง และมีผู้ร่วมพัฒนา 69 คน

ไม่ว่างานประจำของคุณจะต้องทำคลิปสอนใช้งาน ทำคลิปส่งเคสบั๊กให้ทีมดู หรือทำเดโมโปรดักต์ส่งลูกค้า ช่วงตั้งแต่ "อัดเสร็จ" จนถึง "พร้อมส่งงาน" มักกินเวลามากที่สุด และ Recordly ก็ตั้งใจทำให้ขั้นตอนตรงนี้หายไป

คลิปดูโปรได้ด้วย 3 สิ่งนี้ ไม่ใช่ฝีมือตัดต่อที่ซับซ้อน

อย่างแรกคือ การซูมอัตโนมัติ: ระหว่างที่เรากำลังอัดหน้าจอ Recordly จะคอยตรวจจับการเคลื่อนไหวของเคอร์เซอร์แล้วสร้างจุดซูมให้อัตโนมัติ โดยจุดซูมเหล่านี้ไม่ได้ล็อกตายตัว แต่จะวางเป็นบล็อกบนไทม์ไลน์ให้เราลากย้ายตำแหน่ง ยืดหดความยาว หรือลบทิ้งได้ง่ายๆ เหมือนคลิปทั่วไป

อย่างที่สองคือ เคอร์เซอร์ที่ลื่นไหล: เวลาใช้เมาส์จริง เรามักขยับแบบกระตุก หักเลี้ยวกะทันหัน หรือสั่นจนดูรีบร้อนในวิดีโอ Recordly ปรับการเคลื่อนไหวของเคอร์เซอร์ให้เป็นแนวโค้งที่นุ่มนวลขึ้น ช่วยให้คนดูมองตามได้ทันและสบายตาขึ้น เราจึงไม่ต้องเกร็งมือขยับเมาส์ช้าๆ ตอนอัดใหม่

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

เครื่องมือในหน้าตัดต่อของ Recordly มีอะไรให้ใช้งานบ้าง

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

นอกจากนี้ ยังใส่ภาพจากกล้องเว็บแคมซ้อนเป็นวงกลมได้ โดยเลือกตำแหน่งสำเร็จรูปที่มีให้หรือกำหนดพิกัดแกน X และ Y เองก็ได้ ภาพเว็บแคมสามารถกลับด้านซ้ายขวา ปรับเงา ปรับความโค้งมน และตั้งค่าให้ย่อขยายตามจังหวะที่หน้าจอหลักซูมเข้าออกได้อัตโนมัติ

บันทึกงานทั้งหมดเป็นไฟล์โปรเจกต์นามสกุล .recordly ได้ ขั้นตอนนี้สำคัญแต่มักถูกมองข้ามจนต้องมาเสียดายทีหลัง ถ้าปิดโปรแกรมโดยเหลือไว้แค่ไฟล์วิดีโอที่ส่งออกแล้ว วันไหนต้องกลับมาแก้คำอธิบายเพียงจุดเดียว คุณจะไม่มีบล็อกซูมและค่ากรอบเดิมให้แก้ไข และอาจต้องเสียเวลาเริ่มทำใหม่ทั้งชุดหรืออัดใหม่ทั้งคลิป

ข้อจำกัดในแต่ละระบบ และปัญหาเคอร์เซอร์ซ้อนบน Linux

ประสิทธิภาพและความพร้อมใช้งานของ Recordly แตกต่างกันไปในแต่ละระบบปฏิบัติการ โดยหน้า GitHub ระบุข้อจำกัดไว้อย่างชัดเจน:

• macOS: ต้องเป็นเวอร์ชัน 14.0 (Sonoma) ขึ้นไป เพราะการบันทึกเสียงระบบและเสียงไมโครโฟนต้องใช้ ScreenCaptureKit ของ Apple
• Windows: ต้องเป็น Windows 10 build 19041 (เวอร์ชัน 20H1 ปี 2020) ขึ้นไป ถ้าใช้เวอร์ชันเก่ากว่านั้น เคอร์เซอร์จริงของระบบอาจยังติดค้างอยู่ในวิดีโอที่อัดออกมา
• Linux: มีข้อจำกัดมากที่สุดในตอนนี้ เพราะยังซ่อนเคอร์เซอร์จริงของระบบไม่ได้ ถ้าเปิดใช้เคอร์เซอร์ตกแต่งที่โปรแกรมวาดขึ้นมา วิดีโอจะมีเมาส์ซ้อนกัน 2 ตัว (เมาส์จริงของระบบ และเมาส์ที่โปรแกรมวาดทับ) นอกจากนี้ หากต้องการบันทึกเสียงระบบบน Linux ยังต้องติดตั้ง PipeWire ซึ่งเป็นระบบจัดการเสียงของ Linux ไว้ในเครื่องก่อนด้วย

ตรงนี้จึงเป็นทางเลือกที่ผู้ใช้ Linux ต้องตัดสินใจเอง ว่าจะเปิดเคอร์เซอร์ตกแต่งแล้วยอมให้มีเมาส์ซ้อน หรือจะปิดเคอร์เซอร์ตกแต่งแล้วใช้เฉพาะเมาส์จริง ซึ่งจะได้คลิปที่สะอาดตาแต่ไม่ลื่นไหล ส่วนถ้าเลือกได้ตั้งแต่ต้นว่าจะอัดบนเครื่องไหน การใช้งานบน macOS และ Windows จะไม่มีปัญหานี้ให้กังวล

เรียก Native API ของระบบ แล้วเรนเดอร์ด้วย PixiJS

ตัวแอปสร้างขึ้นด้วย Electron ซึ่งเป็นเฟรมเวิร์กสำหรับสร้างแอปเดสก์ท็อปและควบคุมการทำงานทั้งหมดของโปรแกรม แนวทางนี้เป็นวิธีมาตรฐานของแอปเดสก์ท็อปยุคนี้ เช่นเดียวกับที่ Tauri ทำแอป desktop จากหน้าเว็บ แต่ในการอัดหน้าจอ Recordly ไม่ได้เลือกใช้เพียงทางลัดอย่างการอัดผ่านเบราว์เซอร์

เพื่อให้ทำงานได้เต็มประสิทธิภาพ ตัวแอปจึงเรียกใช้ Native API ของระบบปฏิบัติการแต่ละระบบโดยตรง:

• บน macOS จะเรียกใช้ ScreenCaptureKit ของระบบ
• บน Windows ใช้ตัวช่วยที่เชื่อมกับ Windows Graphics Capture สำหรับจับภาพหน้าจอ และใช้ WASAPI ซึ่งเป็นระบบจัดการเสียงของ Windows
• ส่วนบน Linux ยังคงอัดผ่าน API ของ Electron เทคโนโลยีระดับระบบปฏิบัติการที่ต่างกันนี้เองทำให้ทั้งสามระบบซ่อนเคอร์เซอร์ได้ไม่เท่ากัน

ภาพทั้งหมดที่เราเห็นในหน้าตัดต่อ ทั้งกรอบ พื้นหลัง เงา และการซูม ล้วนเรนเดอร์ด้วย PixiJS เอนจินกราฟิก 2D ความเร็วสูง และตัวส่งออกไฟล์ก็ใช้การจัดวางภาพชุดเดียวกับตอนแสดงผลตัวอย่าง พูดง่ายๆ คือภาพที่เห็นตอนเลื่อนดูในโปรแกรมกับไฟล์วิดีโอที่ได้ตอนกดส่งออก มาจากสูตรการวาดชุดเดียวกัน คุณจึงไม่ต้องคอยส่งออกไฟล์มาดูซ้ำแล้วซ้ำเล่าเพื่อเช็กว่าเงาหรือระยะขอบเพี้ยนหรือไม่

โค้ดกว่า 83.5% ของโปรเจกต์เขียนด้วยภาษา TypeScript ทำให้นักพัฒนาสายเว็บเข้าไปอ่านและแก้ไขโค้ดได้ทันทีโดยไม่ต้องข้ามไปเรียนรู้ภาษาใหม่ ตอนนี้ทีมงานกำลังเปิดรับ Pull Request อยู่ โดยเฉพาะเรื่องการทำงานตอนอัดบน Linux ความเสถียรของการส่งออกไฟล์ งานปรับปรุงหน้าตาโปรแกรม และงานแปลภาษา ซึ่งงานแปลภาษานี่แหละคือส่วนที่คนไทยเข้าไปช่วยได้ง่ายๆ โดยไม่ต้องแตะโค้ดหลักเลย

โอเพนซอร์สของจริง พร้อมระบบ Extension รองรับการต่อยอด

Recordly ไม่ได้เริ่มต้นพัฒนาขึ้นมาจากศูนย์ แต่เป็นการแยกสายพัฒนาออกมาจากโปรเจกต์ OpenScreen ซึ่งปัจจุบันโค้ดของ Recordly เปลี่ยนไปจากต้นฉบับเดิมมากกว่า 80% แล้ว ขณะเดียวกัน OpenScreen เองก็นำบางฟีเจอร์ เช่น แอนิเมชันการซูมจาก Recordly รุ่นแรกๆ กลับไปใช้งานด้วยเช่นกัน สองโปรเจกต์นี้จึงเป็นการแลกเปลี่ยนโค้ดเพื่อพัฒนาไปด้วยกัน มากกว่าจะเป็นแค่การคัดลอกโค้ดไปมา

นอกจากนี้ Recordly ยังรองรับระบบส่วนขยายอย่าง Extension ที่เปิดให้ทุกคนสร้างและเผยแพร่ผลงานของตัวเองผ่าน Recordly Marketplace ศูนย์รวมส่วนขยายของโปรแกรมได้อย่างอิสระ ทั้งเสียงคลิกเมาส์ กรอบจำลองหน้าจออุปกรณ์ กรอบหน้าต่างเบราว์เซอร์ และชุดวอลเปเปอร์ โดยไม่ต้องรอให้ทีมพัฒนาหลักเป็นคนทำทีละอย่าง

ในฝั่งความเคลื่อนไหวของโปรเจกต์ ปัจจุบันปล่อยอัปเดตออกมาแล้วถึง 46 รุ่น (เวอร์ชันล่าสุดคือ v1.3.3) ตัวโปรเจกต์ใช้สัญญาอนุญาตแบบ AGPL 3.0 ซึ่งมีเงื่อนไขผูกกับการเปิดเผยซอร์สโค้ด ถ้าบริษัทใดต้องการนำไปต่อยอดเป็นผลิตภัณฑ์ ควรศึกษาเงื่อนไขให้ชัดเจนก่อนตัดสินใจ แต่สำหรับผู้ใช้งานทั่วไปที่ต้องการดาวน์โหลดมาอัดคลิป ก็ใช้ได้ฟรีทันทีโดยไม่ต้องกังวลเรื่องนี้

ส่งออกไฟล์ได้ทั้ง MP4 และ GIF

เมื่อตัดต่อเสร็จเรียบร้อย Recordly มีตัวเลือกการส่งออกไฟล์ให้ 2 รูปแบบหลัก คือ MP4 ซึ่งปรับแต่งคุณภาพไฟล์ได้ และ GIF ที่ตั้งค่าได้ทั้งเฟรมเรต การเล่นวนลูป รวมถึงขนาดไฟล์สูงสุดที่ต้องการ

วิธีเลือกแบบง่ายๆ คือดูจากบริบทของคนดูเป็นหลัก:

• ถ้าคลิปยาวเกิน 10 วินาที หรือมีเสียงพูดบรรยายประกอบ การส่งออกเป็น MP4 จะให้ผลลัพธ์ที่คุ้มค่าและคุณภาพดีกว่า
• แต่ถ้าต้องการส่งเคสบั๊กให้เพื่อนร่วมทีมเห็นทันทีจากคอมเมนต์ในกล่องแจ้งปัญหาบน GitHub โดยไม่ต้องเสียเวลากดเล่น ไฟล์ GIF ที่บีบอัดขนาดมาอย่างดีจะช่วยให้ดูคลิปได้รวดเร็วกว่ามาก

เริ่มต้นใช้งานง่ายๆ แค่ดาวน์โหลดตัวติดตั้ง ไม่ต้องคอมไพล์เอง

วิธีเริ่มต้นที่ง่ายและเร็วที่สุดคือเข้าไปที่หน้า Releases ของโปรเจกต์ แล้วดาวน์โหลดไฟล์ติดตั้งสำหรับระบบปฏิบัติการที่ใช้อยู่ ส่วนผู้ใช้ Arch หรือ Manjaro Linux ก็มีแพ็กเกจในคลังซอฟต์แวร์ชุมชนอย่าง AUR ให้ติดตั้งผ่านคำสั่ง yay -S recordly-bin ได้ทันที

แม้เราจะบิลด์โปรแกรมขึ้นมาเองจากซอร์สโค้ดได้ แต่แนะนำให้โหลดตัวติดตั้งสำเร็จรูปจะสะดวกกว่ามาก เพราะบน macOS จำเป็นต้องติดตั้ง Xcode Command Line Tools ชุดเครื่องมือพัฒนาของ Apple ก่อน และแอปที่บิลด์ขึ้นมาเองมักจะติดระบบความปลอดภัยของ macOS

สำหรับคลิปแรก แนะนำให้ลองอัดสั้นๆ สัก 30 ถึง 40 วินาทีก่อน แล้วโฟกัสที่การปรับแต่งแค่ 2 ค่าหลัก คือ ความลื่นของเคอร์เซอร์ และ ระยะขอบของกรอบ สองค่านี้ช่วยให้คลิปดูเป็นมืออาชีพขึ้นได้มากที่สุดเมื่อเทียบกับเวลาที่ใช้ ส่วนคำอธิบายประกอบและเสียงเสริมค่อยลองใส่ในคลิปถัดไป

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

---

ที่มา: โปรเจกต์ Recordly บน GitHub