14° : สิบสี่องศา Programmer's Blog

สิงหาคม 6, 2015

เกริ่น QML animations & transitions

Filed under: Computer Graphics,Development,Linux,multimedia,Qt,X11 — ป้ายกำกับ:, , , , , — สี่สิบดีกรี @ 11:22 pm

Screenshot from 2015-08-06 23:05:48 Screenshot from 2015-08-06 16:59:47

เคยเขียนไปเมื่อนานมาแล้วว่า สิ่งที่น่าสนใจของ QML อีกอย่างหนึ่งที่สำคัญก็คือ animation & transitions วันนี้ก็ได้มีโอกาสลองเล่นและเรียนรู้ ก็ต้องทำความเข้าใจกับมันพอสมควรเมื่อเริ่มต้น ตอนนี้ผมก็ยังงูๆปลาๆอยู่เลยครับ อิอิ

ด้วยความตั้งใจแต่เริ่มแรกคือ คำถามที่ค้างคาใจมานานว่า ไม่มีอะไรมาแทน flash และ action script เลยเหรอ สำหรับการทำ cg บน tv เพราะโปรแกรมอย่าง CasparCG นั้นก็ใช้ flash ที่นี้ถ้าเราต้องการทำระบบ live streaming เองละ จะใส่กราฟิกและอนิเมชั่นลงไปได้ยังงัย

คราวก่อนผมลอง cairo overlay ลงบน gstreamer element แค่ใช้เวลาเอา svg ขึ้นเนี่ยก็นานแล้วครับ และถ้าต้องโหลดเยอะๆ ดูเหมือนก็จะมีผลต่อ performance เหมือนกัน

คราวนี้เลยลองใหม่ ใช้วิธีเขียน QML application เลย แล้วค่อยทำ screencast เฉพาะส่วน ผมลองเอาไปถ่ายทอดสดลงบน youtube ก็ได้ดังที่เห็น

อ่าว หมดแรงเล่าซะละ ต่อคราวหน้าครับ

credit : กราฟิกสนาม Designed by Freepik.com

พฤศจิกายน 30, 2014

Video Compositing with LibCairo

Filed under: Computer Graphics,Development,multimedia — ป้ายกำกับ:, , , , , , — สี่สิบดีกรี @ 11:30 pm

ในที่สุดก็ได้ฤกษ์เอา BlackMagic DeckLink Studio ออกมาเล่นอะไรสักอย่างสักทีครับ ดองไว้เป็นปีละ จริงๆซอฟแวร์ทำ Cg ฟรีๆก็มี ดูน่าจะดีด้วย นั่นคือ CasparCG ซึ่งรองรับ DeckLink ซะด้วย เพียงแต่มันไม่มีเวอร์ชั่นบน Linux ก็เลยปล่อยผ่านไปก่อน

วันนี้จึงได้ทำการทดลองเขียนโปรแกรม เอาภาพวิดิโอจาก webcam USB นี่ละ เพราะรอ กล้อง SDI 720p จากจีนอยู่ยังไม่มาสักที ไม่งั้นคงได้ทดสอบการ์ด DeckLink ในการรับอินพุตด้วยแล้ว ซึ่งการ์ดในตระกูล DeckLink นั้นมี driver รองรับสามารถใช้กับ Linux ได้เกือบทุกรุ่นครับ แม้กระทั่งรุ่นเล็กราคาไม่กี่พันบาท จึงเป็นทางเลือกที่ีดีทางหนึงในการเอามาใช้งาน

IMG_0080-s

ส่วนประกอบหลักของโปรแกรมก็คือ GStreamer ครับ ผมเขียนด้วย C โดยมี Elements หลักๆก็คือ v4l2 source, libcairo และ decklink sink นั่นเอง เพื่อทดสอบว่าเราก็สามารถทำ graphics บน tv แบบง่ายๆได้โดยใช้เครื่องมือไม่ต้องมากมายหรือแพงๆ ตัวอย่างนี้ผมลองใส่ตัวอักษรวิ่งกับนาฬิกาเข้าไป ซึ่งส่วนประกอบของนาฬิกานั้นมาจากไฟล์ svg

ลองนึกถึงการถ่ายทอดสดลง youtube เล่นๆเวลามีกิจกรรมอะไร หรืออยากทำรายการเป็นของตัวเอง แล้วใส่กราฟิกเข้าไปแบบเรียลไทม์ได้ ก็ทำให้ดูโปรขึ้นมากเลยทีเดียว อิอิ (ผมคิดเอาเองนะครับ)

libcairo ค่อนข้างเป็น lib พื้นฐานต้องเหนื่อยเหมือนกันหากอยากได้กราฟิกที่ซับซ้อนเหมือน flash ก็หวังไว้ว่าอีกไม่นาน จะมีปลั๊กอิน QML ทำได้ในลักษณะอย่างนี้เหมือน libcairo ซึ่งก็น่าจะทำให้ทำอะไรได้ง่ายขึ้นอีกไม่น้อยเลยครับ

Powered by WordPress