كيف تساعد تطبيقات الويب التقدّمية (PWA) وWebAssembly ونظام التشغيل ChromeOS محرّر الفيديو المستنِد إلى الويب في تقديم أداء أفضل وتجربة أكثر تفاعلية لما يصل إلى 12 مليون مستخدم.
زيادة بنسبة %97
النمو الشهري في عمليات تثبيت تطبيقات الويب التقدّمية (PWA)
تحسُّن بمقدار 2.3 x
تحسُّن في الأداء
زيادة بنسبة %9
ارتفاع معدّل الحفاظ على مستخدمي تطبيق الويب التقدّمي (PWA)
Clipchamp هو محرر فيديو على الإنترنت يتيح لأي مستخدم سرد قصص تستحق المشاركة من خلال الفيديو. يستخدم أكثر من 12 مليون صانع محتوى حول العالم Clipchamp لتعديل الفيديوهات بسهولة. نقدّم حلولاً بسيطة لإنشاء الفيديوهات، بدءًا من الأدوات البسيطة مثل الاقتصاص والقطع، وصولاً إلى الميزات العملية مثل مسجّل الشاشة، وحتى أداة إنشاء المشاركات الموجزة.
من يستخدم Clipchamp؟
إن مستخدمينا (أو المحررين اليوميين كما نسميهم) متنوعون. ليس من الضروري أن تكون محررًا فيديو باستخدام Clipchamp. على وجه التحديد، نلاحظ حاليًا فِرق المبيعات والدعم وتسويق المنتجات التي تستخدم كاميرا الويب ومسجّل الشاشة للحصول على محتوى توضيحي سريع مع نص وملفات GIF إضافية لجعله تفاعليًا. نلاحظ أيضًا أنّ الكثير من الأنشطة التجارية الصغيرة تعدّل الفيديوهات على وسائل التواصل الاجتماعي وتنشرها أثناء التنقّل.
ما هي التحديات التي يواجهها؟
ندرك أنّ تعديل الفيديوهات قد يكون مخيفًا في البداية. يكمن الافتراض في أنّ الأمر صعب، ربما بسبب التجارب السابقة المحبطة مع برامج التعديل المعقّدة. وفي المقابل، يركّز Clipchamp على السهولة والبساطة، ويقدم دعمًا بتراكبات النصوص، ومقاطع الفيديو الجاهزة، والموسيقى، والنماذج والمزيد.
نجد أنّ معظم المحرّرين اليوميين لا يريدون إنشاء صور متحركة رائعة. نتحدث إلى المستخدمين كثيرًا ونذكّرهم باستمرار بأنهم مشغولون ويريدون نشر قصتهم إلى العالم في أسرع وقت ممكن وأسهل ما يمكن، لذلك يعد هذا تركيزنا.
تطوير تطبيق ويب تقدّمي لخدمة Clipchamp
في Clipchamp، نهدف إلى تمكين الأشخاص من سرد قصصهم عبر الفيديو. لتحقيق هذه الرؤية، سرعان ما أدركنا أهمية السماح للمستخدمين باستخدام لقطاتهم الخاصة عند إعداد مشروع فيديو.
تفرض هذه الرؤية الضغط على فريق Clipchamp الهندسي للتوصل إلى تقنية يمكنها معالجة ملفات الوسائط على نطاق جيجابايت بكفاءة في تطبيق ويب. مع وضع قيود النطاق الترددي للشبكة في الاعتبار، سررنا في استبعاد أي حل تقليدي قائم على السحابة. قد يؤدي تحميل ملفات وسائط كبيرة من اتصال الإنترنت المخصص للبيع بالتجزئة إلى توفير أوقات انتظار طويلة قبل بدء التعديل، ما يؤدي بشكل فعّال إلى ترك انطباع سيئ لدى المستخدم.
دفعنا هذا إلى التبديل إلى حل ضمن المتصفح بشكل كامل، حيث يتم تنفيذ جميع "التحميلات الثقيلة" لمعالجة الفيديو محليًا باستخدام موارد الأجهزة المتوفرة على جهاز المستخدم النهائي. نراهن بشكل استراتيجي على متصفّح Chrome، وإضافةً إلى نظام ChromeOS الأساسي لمساعدتنا في التغلب على التحديات الحتمية المتعلّقة بإنشاء منصة لإنشاء الفيديوهات عبر المتصفّح.
تعتمد معالجة الفيديوهات على نقص كبير في الموارد، ما يؤثر في موارد الكمبيوتر والتخزين على حد سواء. بدأنا في إنشاء الإصدار الأول من Clipchamp على منصة Google (Portable) Native Client (PNaCl). وكان PNaCl أثناء إيقافه تأكيدًا رائعًا لفريقنا على أن تطبيقات الويب يمكن أن تكون سريعة ووقت استجابة سريع مع استمرار تشغيلها على أجهزة المستخدم.
عند التبديل إلى WebAssembly في وقت لاحق، سعدنا برؤية Chrome يقود زمام المبادرة في دمج ميزات ما بعد MVP (منتج الحد الأدنى القابل للتطبيق)، مثل عمليات الذاكرة المجمّعة، وسلاسل المحادثات، ومؤخرًا: عمليات المتّجهات ذات العرض الثابت. كان فريقنا الهندسي يتوقّع باهتمام كبير من جانب فريقنا الهندسي، ما أتاح لنا تحسين حزمة معالجة الفيديوهات للاستفادة من عمليات SIMD السائدة على وحدات المعالجة المركزية المعاصرة. وبالاستفادة من دعم تقنية SIMD لـ WebAssembly من Chrome، استطعنا تسريع بعض أعباء العمل الأكثر صعوبة، مثل فك ترميز الفيديوهات بدقة 4K وترميز الفيديو.
بفضل القليل من الخبرة السابقة وأقل من شهر من الجهد لأحد مهندسينا، تمكنا من تحسين الأداء بمقدار 2.3 مرة. على الرغم من أنّنا لا نزال تقتصر على مرحلة التجربة والتقييم في Chrome، لقد تمكّنا من طرح تحسينات SIMD هذه لغالبية المستخدمين. وعلى الرغم من أن مستخدمينا يقومون بتشغيل إعدادات مختلفة للأجهزة، إلا أننا تمكنا من ضمان تحسُّن مطابق في الأداء في الإنتاج دون ملاحظة أي آثار ضارة في معدلات الفشل.
ومؤخرًا، دمجنا واجهة برمجة التطبيقات WebCodecs API الجديدة، والمتاحة حاليًا ضمن مرحلة تجريبية أخرى من Chrome. باستخدام هذه الميزة الجديدة، سنتمكن من تحسين أداء فك ترميز الفيديوهات على الأجهزة منخفضة المواصفات كما هو الحال في العديد من أجهزة Chromebook الشائعة.
عند إنشاء تطبيق ويب تقدّمي (PWA)، من المهم تشجيعه. كما هو الحال مع العديد من تطبيقات الويب، ركّزنا على سهولة الوصول، ويشمل ذلك معلومات من قبيل تسجيل الدخول إلى مواقع التواصل الاجتماعي بما في ذلك Google، وإتاحة إمكانية وصول المستخدم بسرعة إلى مكان يمكنه فيه تعديل الفيديو، ثم تسهيل تصدير الفيديو بعد ذلك. بالإضافة إلى ذلك، روَّجنا لطلبات تثبيت تطبيق الويب التقدّمي (PWA) في شريط الأدوات وكإشعار منبثق في قائمة التنقّل في القائمة.
النتائج
إنّ تطبيق الويب التقدّمي (PWA) من Chrome القابل للتثبيت يعمل بشكل جيد جدًا. يسعدنا جدًا أن نشهد زيادة بنسبة 9% في معدل الحفاظ على المستخدمين لدى مستخدمي تطبيقات الويب التقدّمية (PWA) مقارنةً بمستخدمي أجهزة الكمبيوتر المكتبي العادية. كان تثبيت تطبيق الويب التقدّمي (PWA) هائلاً، حيث تزايد بمعدل 97% شهريًا منذ أن أطلقنا تطبيق الويب التقدّمي (PWA) قبل خمسة أشهر. وكما ذكرنا سابقًا، نجحت تحسينات WebAssembly SIMD في تحسين الأداء بمقدار 2.3 مرة.
![حزيران (يونيو) 2020: ألف عملية تثبيت تقريبًا. تموز (يوليو) 2020: حوالى 5 آلاف عملية تثبيت. آب (أغسطس) 2020: حوالى 12 ألف عملية تثبيت. أيلول (سبتمبر) 2020: حوالى 20 ألف عملية تثبيت. تشرين الأول (أكتوبر) 2020: حوالى 30 ألف عملية تثبيت.](https://web.dev/static/case-studies/clipchamp/image/june-2020-1k-installs-4695334a9f617.png?authuser=6&hl=ar)
ملف
يسرّنا التفاعل مع تطبيق الويب التقدّمي (PWA) واستخدام تطبيق الويب التقدّمي الخاص بنا. ونعتقد أنّ ميزة الاحتفاظ بالمستخدمين في Clipchamp قد استفادت من تثبيت تطبيق الويب التقدّمي (PWA) ويسهل الوصول إليه. لاحظنا أيضًا أنّ تطبيق الويب التقدّمي (PWA) يقدّم أداءً أفضل بالنسبة إلى المحرّر، ما يجعله أكثر جاذبية ويشجّع المستخدمين على العودة إلى موقعك الإلكتروني.
نحن متحمسون في المستقبل بشأن الفرصة التي يوفّرها ChromeOS لعدد أكبر من المستخدمين لإنجاز المزيد من المهام بجهد أقل. على وجه التحديد، نحن متحمسون بشأن بعض عمليات الدمج المريحة مع نظام التشغيل المحلي عند التعامل مع الملفات. نعتقد أن هذا سيساعد في تسريع سير العمل لمحرّرينا اليوميين المشغولين، وهذا من أهم أولوياتنا.