Remotion – ליצור וידאו עם ריאקט

העולם מתשנה במהירות. לפני כמה חודשים מי חלם שנוכל להשתמש בטכנולוגיות עוצמתיות CSS, Canvas, SVG , לחשוב כמו מתכנתים על פונקציות על מערכים שמחזירות ערכים, שימוש חוזר בקומפוננטות למינהם, בקוד שניתן לשנותו בקלות כנהוג, וכל זה במגרש הביתי, הIDE?

פגשתי בספרית Remotion פריימוורק מבוסס ריאקט וts, שאיתו אפשר להכין קבצי וידאו ולרנדר אנימציות, ובסופו של דבר לסוגר גם קובץ וידאו ממש, עובר לסוחר ברשתות החברתיות והאפלקציות ההודעות למינהם.

זה הוידאו הרשמי שהם עשו בשביל להראות את היכולות

דיסקלימיר – לא עובד בוינדוס בנתיים, אל תנסו. וכמו כן בנתיים את האודיו צריכים להוסיף ידני בתוכנה אחרת, הם עובדים על זה, אבל אפשר לשמוע את הטראק שאותו רוצים להשמיע ולהתאים את הפריימס.

כל מה שצריך בשביל למנף את הפריימוורק זה ידע ממש בסיסי בקי פריימס, וכל השאר קוד. בפרייורק הזה כל סרטון מורכב מאבני בנין אשר מוגדרת לו מראש מתי הוא צריך להופיע ולכמה זמן. זה בגדול. אפשר לקבץ כמה כאלה לסצנה, ולעשות את הקומפוזציה על המסך בסופו של דבר עם css postion רגיל.

לא היה לי כל כך הרבה זמן להתעסק עם זה, וגם מה שאני הוצאתי מתחת ידי לא ממש משהו (היה חשוב לי להתשמש בmap…), בפרט שלקח לי זמן להאבק עם זה בוינדוס עד שמצאתי שהם פשוט לא תומכים בזה כרגע, כמה שורות הקוד האלה:

import { useCurrentFrame, interpolate, Sequence, AbsoluteFill } from 'remotion';
const Title: React.FC<{ title: string }> = ({ title, margin }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });

  return <div style={{ opacity, margin }}>{title}</div>;
};

const arr = ['I ', ' Love ', ' React '].map((p, i) => {
  return (
    <Sequence from={i * 30} durationInFrames={40}>
      <Title margin={i * 110} title={p} />
    </Sequence>
  );
});
export const Test = () => {
  return (
    <AbsoluteFill>
      <div style={{ color: 'black', backgroundColor: 'white', fontSize: 400 }}>{arr}</div>
    </AbsoluteFill>
  );
};

הניבו את זה, אמנם לא משהו והיה אפשר להשיג את זה בCSS גם בכמה שורות אבל לסגור את זה כוידאו, ולמנף את זה הלאה רמות מטורפות לא היה אפשר עם css על כל פנים לא בכזו קלות.

האפשריות הם אינסופיות, וללא ספק מביאות איתם עידן חדש בכל הנושא של data visualization. אם עד היום ההינו מראים ליוזר איזה דש בורד שמקסימום יש בו כמה אנימציות עם svg, עם זה אפשר להראות לו וידאו ממש ותהליכים שלמים, עם דטה חיצוני. כמו כן אפשר לקסטם תוכן שנשלח למשתמש, אם עד היום היו שולחים לך מייל עם שם פרטי בכותרת, עכשיו תוכל לקבל וידאו מותאם אישית על השימוש שלך במוצר עם השם והתמונה שלך במקום, כמו שספוטיפי עשו בסוף השנה החולפת שהראו למשתמש ערכים על השימוש בשנה החולפת. כמו כן מבחינת אנליטקס, נוכל לקבל מהמשתמש את הקורינדטות של העכבר בזמן שהוא באתר, לשים ברקע png של מה שהוא ראה ונוכל לראות את כל התהליך (יש את זה כבר היום בכל מיני סוגי אנליטקס). הרבה מתוכן המועבר ברשתות החברתיות ואלפקציות ההודעות זה וידאו בפורמט זה או אחר, וכעת יהיה אפשר לשלוח וידאו מותאם אישית לצרכי מרקטינג כאילו זה היה לינק או הודעת טקסט מותאמת אישית. כאשר סוגרים את הוידאו אפשר לתת ארגומנטים, ומשם למשוך מידע על המשתמש כמו שם פרטי וכו׳ וכל מיני ערכים. השמים הם הגבול. כאן יש דוגמא למשהו שחיקה את הרעיון של ספוטיפי.

מבחינה מסוימת זה שוק חדש למתכנתים, אם עד היום היה צריך אנימטור או משהו כזה בשביל לעשות אנימציה קבל לסרטון ביוטיוב או משהו כזה, משהו שבקלות אפשר לעשות עם SVG אבל לא היה דרך להמיר את זה לפורמט וידאו שאפשר לעבוד איתו עם תוכנות עריכת וידאו, היום אפשר.

מבחינת חווית השימוש במוצר, אהבתי מאוד, אני עדיין נאבק לסגור SVG כמו שצריך אבל אני מאמין זה יגיע. הדוקו טוב מאוד, קופיפיסטאבילי (כלומר שאפשר להעתיק דוגמאות כמו שהן ולראות אותם אצלך ולשחק איתם מאוד בקלות, דוקו טוב חייב כזה דבר לדעתי, וזכורים לטוב nexmo שבדוגמאות שלהם כבר מוטמעים הapi keys לפי היוזר, הם מוסתרים בקונטרול C ומתגלים בקונטול V), אבל קצת ידע בעריכת וידאו מאוד עוזר להתמצאות, יחד עם הקונספט הבסיסי של השכבות. הפיתוח מגיע עם "במה" וטיימליין למטה, ממש כמו בכל תוכנת עריכת וידאו, עם הוט רילואד ושיקוך מידי של שינויים.

אני לא יודע אם כולם יעשו עם זה מצגות למסיבת סוף שנה, אבל בהחלט אנו רואים כאן תופעה שלא היתה קיימת בעבר. מתכנת ריאקט, ברגע אחד, יכול לנצל את כל הידע שהוא צבר והנסיון, לתחום חדש לגמרי של אנימציות ויצירת קטעי וידאו, עם כל הכלים שעומדים לרשותו, בסביבה בה הוא כבר נמצא. הדבר בהחלט יביא להסלמת התחרות בהתאמה האישית למשתמש והחוויה הנגזרת מכך, וידרוש התמקצעות גם בתחום הזה. דבר זה אופיני יותר לתחום הפרונט אנד מאשר לתחומים אחרים, מכיון שהמגרש בו היוזר מבצע אינטרקציה קיבל חשיבות יתרה עקב ההצע הגדול המתחרה על תשומת הלב שלו.