איך אפליקציות PWA, WebAssembly ו-ChromeOS עוזרות לעורך סרטונים מבוסס-אינטרנט לספק ביצועים טובים יותר וחוויה מעניינת יותר ל-12 מיליון משתמשים.
97%
הגידול החודשי במספר התקנות ה-PWA
2.3x
שיפור ביצועים
9%
שימור גבוה יותר של משתמשי PWA
Clipchamp הוא עורך הסרטונים באינטרנט, שפועל בדפדפן, שמאפשר לכל אחד לספר סיפורים ששווה לשתף באמצעות סרטונים. יותר מ-12 מיליון יוצרים ברחבי העולם משתמשים ב-Clipchamp כדי לערוך סרטונים בקלות. אנחנו מציעים פתרונות פשוטים ליצירת סרטונים, מכלים אינטואיטיביים כמו חיתוך וחיתוך, ועד תכונות פרקטיות כמו מקליט המסך, ואפילו יוצר הממים.
מי משתמש ב-Clipchamp?
המשתמשים שלנו (או עורכים רגילים, כמו שאנחנו קוראים להם) הם מגוונים. לא נדרשת מומחיות כדי לערוך סרטונים באמצעות Clipchamp. באופן ספציפי, צוותים של מכירות, הדרכת תמיכה ושיווק מוצרים משתמשים במצלמת האינטרנט ובמקליט המסך כדי להציג תוכן הסבר מהיר עם טקסט נוסף וקובצי GIF כדי להפוך את האירוע למעניין. אנחנו גם רואים שהרבה עסקים קטנים עורכים ומפרסמים סרטונים ברשתות חברתיות תוך כדי תנועה.
עם אילו אתגרים הם מתמודדים?
ברור לנו שעריכת סרטונים יכולה להיות מאיימת בהתחלה. ההנחה היא שזה קשה, כנראה בגלל חוויות מתסכלות קודמות בתוכנות עריכה מורכבות. לעומת זאת, Clipchamp מתמקד בקלות ובפשטות, ומספק תמיכה עם שכבות-על של טקסט, מוזיקה וסרטונים ממאגר, תבניות ועוד.
גילינו שרוב העורכים היומיים לא רוצים ליצור יצירות מופת של סרטי קולנוע. אנחנו מדברים עם המשתמשים הרבה, ואנחנו מזכירים כל הזמן שהם עסוקים ורוצים להפיץ לעולם את הסיפור שלהם במהירות ובקלות, ולכן אנחנו מתמקדים כאן.
פיתוח Clipchamp PWA
המטרה שלנו ב-Clipchamp היא להעצים אנשים לספר את הסיפורים שלהם באמצעות וידאו. כדי לממש את החזון הזה, הבנו במהרה לאפשר למשתמשים להשתמש בחומר מצולם משלהם כשהם יוצרים פרויקט וידאו.
התובנה הזו גרמה ללחץ על צוות המהנדסים של Clipchamp לפתח טכנולוגיה שיכולה לעבד ביעילות קובצי מדיה בקנה מידה של ג'יגה-בייט באפליקציית אינטרנט. תוך התחשבות במגבלות רוחב הפס ברשת, הצלחנו לשלול במהירות פתרון מסורתי מבוסס-ענן. העלאת קובצי מדיה גדולים מחיבור לאינטרנט קמעונאי יכולה תמיד ליצור זמני המתנה עצומים לפני שאפשר יהיה להתחיל לערוך, וכתוצאה מכך חוויית המשתמש תיפגע.
לכן החלטנו לעבור לפתרון שפועל בדפדפן מלא, שבו כל 'העבודה הקשה' בעיבוד סרטונים מתבצעת באופן מקומי באמצעות משאבי חומרה שזמינים במכשיר של משתמש הקצה. אנחנו מהמרים באופן אסטרטגי על דפדפן Chrome, ועל ידי הרחבת הפלטפורמה של ChromeOS, כדי לעזור לנו להתגבר על האתגרים הבלתי נמנעים של בניית פלטפורמה ליצירת סרטונים בדפדפן.
עיבוד הסרטונים צורב מאוד משאבים, ומשפיע על משאבי המחשב והאחסון. התחלנו לפתח את הגרסה הראשונה של Clipchamp על גבי Native Client (נייד) של Google (PNaCl). למרות שבסופו של דבר יצא משימוש, PNaCl היה אישור מצוין לצוות שלנו על כך שאפליקציות אינטרנט יכולות לפעול במהירות ובזמן אחזור נמוך, ועדיין פועלות בחומרה של משתמש קצה.
מאוחר יותר עברנו ל-WebAssembly, שמחנו לראות ש-Chrome מוביל את השילוב של תכונות Post-MVP, כמו פעולות זיכרון בכמות גדולה, שרשור (threads), והאפשרות האחרונה: פעולות וקטוריות ברוחב קבוע. צוות מהנדסי התוכנה שלנו ציפו מאוד לאפשרות הזו, והציעו לנו לבצע אופטימיזציה של סטאק עיבוד הווידאו כדי לנצל את היתרונות של פעולות SIMD, הנפוצות ביותר במעבדים עכשוויים. בזכות התמיכה ב-WebAssembly SIMD של Chrome, הצלחנו להאיץ כמה עומסי עבודה כבדים במיוחד, כמו פענוח וידאו באיכות 4K וקידוד וידאו.
עם מעט ניסיון קודם ותוך פחות מחודש מאמץ לאחד מהמהנדסים שלנו, הצלחנו לשפר את הביצועים פי 2.3. אנחנו עדיין מוגבלים לגרסת המקור לניסיון של Chrome, אבל כבר יכולנו להשיק את שיפורי ה-SIMD האלה לרוב המשתמשים שלנו. המשתמשים שלנו מפעילים הגדרות חומרה שונות לגמרי, אבל הצלחנו לאשר עלייה תואמת בביצועים בסביבת הייצור בלי לראות השפעה מזיקה בשיעורי התקלה.
לאחרונה, שילבנו את ה-WebCodecs API החדש, שזמין כרגע במסגרת גרסת מקור אחרת של גרסת הניסיון של Chrome. באמצעות היכולת החדשה הזו, נוכל לשפר עוד יותר את הביצועים של פענוח וידאו בחומרה במפרט נמוך, כפי שאפשר למצוא במכשירי Chromebook פופולריים רבים.
כשיוצרים PWA, חשוב לעודד שימוש בה. כמו באפליקציות אינטרנט רבות, התמקדנו בקלות בגישה שמאפשרת גישה קלה, כולל התחברות לרשתות חברתיות, כולל Google, הכנסת המשתמש במהירות למקום שבו הוא יכול לערוך סרטון ואפשרות לייצא את הסרטון בקלות. בנוסף, קידמנו את ההנחיות להתקנת PWA בסרגל הכלים וכהודעה קופצת בתפריט הניווט.
תוצאות
גרסת ה-PWA של Chrome הניתנת להתקנה השיגה ביצועים ממש טובים. שמחנו לראות ששיעור השימור בקרב משתמשי PWA היה גבוה ב-9% בהשוואה למשתמשים הרגילים שלנו במחשבים. מאז שהשקנו לפני חמישה חודשים את אפליקציית ה-PWA, ההתקנה של ה-PWA הייתה אדירה, בשיעור של 97% בחודש. וכמו שציינו בעבר, השיפורים של WebAssembly SIMD שיפרו את הביצועים פי 2.3.
![יוני 2020: כ-1,000 התקנות. יולי 2020: כ-5,000 התקנות. אוגוסט 2020: כ-12,000 התקנות. ספטמבר 2020: כ-20,000 התקנות. אוקטובר 2020: כ-30 אלף התקנות.](https://web.developers.google.cn/static/case-studies/clipchamp/image/june-2020-1k-installs-4695334a9f617.png?authuser=9&hl=he)
פרופיל
אנחנו מופתעים לטובה מהמעורבות וההטמעה של ה-PWA שלנו. לדעתנו שימור המשתמשים ב-Clipchamp עזר לנו כי ה-PWA מותקן וקל יותר להגיע אליו. כמו כן, שמנו לב שגרסת ה-PWA מניבה ביצועים טובים יותר עבור העורך, מה שהופך אותה למושכת יותר ומשכנעת אנשים לחזור.
במבט לעתיד, אנחנו נרגשים מההזדמנות שמערכת ChromeOS מספקת להרבה יותר משתמשים להספיק יותר בפחות מאמץ. באופן ספציפי, אנחנו שמחים על חלק משילובי הנוחות עם מערכת ההפעלה המקומית בעבודה עם קבצים. אנחנו חושבים שזה יעזור לזרז את תהליכי העבודה של העורכים היומיומיים העמוסים שלנו, וזה אחד מהנושאים העומדים בראש סדרי העדיפויות שלנו.