ضبط ویدیو با Vonage Video API و ریاکت
ریاکت
جاوااسکریپت
فرانتاند
نود جیاسخلاصهٔ کاملتر
ضبط ویدیو توی پروژههای واقعی خیلی سادهتر از یه دکمهی Record نیست؛ بعضیها فقط صدا میخوان، بعضیها یه فایل یکپارچه از همه شرکتکنندهها، و بعضی دیگه میخوان هر استریم رو جداگانه داشته باشن. Vonage Video API دقیقاً همین تنوع رو فراهم میکنه و Misha Behei، مهندس راهحلهای Vonage، یه اپ دمو کامل ساخته که چهار روش آرشیو رو به صورت عملی نشون میده.
فرانتاند این اپ با ریاکت و TypeScript نوشته شده و از Vite به عنوان build tool و Material UI برای کامپوننتها استفاده میکنه. بکاند هم یه سرور Node.js با Express هست که اون هم با TypeScript پیادهسازی شده. این ترکیب یه stack مدرن و آشناست که کار باهاش راحته.
اولین حالت، Audio-Only Archive هست. توی این حالت، یه Publisher ویدیویی راهاندازی میشه ولی فقط صدا ضبط میشه. یعنی ویدیو پابلیش میشه اما آرشیو فقط استریم صوتی رو نگه میداره. مناسب وقتیه که محتوای بصری اهمیتی نداره.
دومین حالت، Composed Archive هست که همه شرکتکنندهها رو توی یه فایل ویدیویی واحد ترکیب میکنه. وقتی کاربر این حالت رو فعال میکنه، هم وبکم و هم screen capture با هم ضبط میشن و نتیجه یه فایل یکپارچهست که نمای همه رو داره.
سومین حالت، Individual Archive هست. اینجا برای هر شرکتکننده یه استریم جداگانه ضبط میشه. به طور پیشفرض، Vonage همه این فایلها رو توی یه ZIP تحویل میده، ولی این دمو یه پردازش اضافه داره که ZIP رو اتوماتیک استخراج میکنه و فایلها رو به صورت تکی قابل پخش میکنه. توی این حالت دو Publisher راهاندازی میشه: یکی با background blur و یکی بدون.
چهارمین قابلیت، Experience Composer هست که از نظر فنی آرشیو نیست ولی یه استریم جدید میسازه و با آرشیو ترکیب میشه. این ابزار به یه URL عمومی دسترسی داره و اون صفحه رو ضبط میکنه. توی این دمو، یه بازی فوتبال ساده به عنوان URL همراه استفاده شده که گلها رو به صورت تصادفی به تیمها نسبت میده. نتیجه یه ویدیوی برندشده با المانهای تعاملی میشه.
نکته مهم اینه که آرشیوهای Vonage فقط ۷۲ ساعت در دسترسن. بعد از این مدت وضعیت از available به expired تغییر میکنه و دیگه نمیشه بهشون دسترسی داشت، مگه اینکه از قبل یه S3 bucket تنظیم شده باشه. توی اپ یه لیست Recent Archives هم هست که وضعیت، نام و ID هر آرشیو رو نشون میده و لینک مستقیم به Vonage Archive Inspector داره.
برای اجرای پروژه باید دو فایل .env بسازی؛ یکی برای بکاند با مقادیر API Key و Secret و پورت، و یکی برای فرانتاند با API Key. بعد از نصب dependencies با npm install، با npm run dev هم بکاند روی پورت ۳۳۴۵ و هم فرانتاند روی پورت ۵۱۷۳ بالا میآد.
نکات کلیدی:
- چهار روش آرشیو: فقط صدا، ترکیبی، جداگانه، و Experience Composer
- فرانتاند با ریاکت + TypeScript + Vite و بکاند با Node.js + Express
- Individual Archive فایلها رو به صورت ZIP تحویل میده؛ دمو اون رو اتوماتیک استخراج میکنه
- Experience Composer یه URL عمومی رو ضبط میکنه و با آرشیو اصلی ترکیب میشه
- آرشیوها فقط ۷۲ ساعت در دسترسن مگه با S3 bucket پیکربندی بشن
- برای اجرا به Vonage Video API account و Node.js نیاز داری
