ایجاد یک برنامه ویدیویی وب

به عنوان ادامه ویدئوی جریان پست وبلاگ با خدمات وب باز ، ما در این پست یک برنامه وب برای پخش ویدیویی که ایجاد کرده ایم تهیه می کنیم.

در این راهنما از Build Tool Vite برای راه اندازی یک پروژه وب برای یک برنامه وب بر اساس چارچوب React استفاده خواهیم کرد.

تنظیم پروژه React TypeScript

دستور زیر را برای داربست یک پروژه جدید بر اساس الگوی React اجرا کنید.

% npm create vite@latest my-video-app -- --template react-ts

سپس اجرا کنید:

% cd my-video-app
% npm install
% npm run dev

مرورگر خود را به http: // localhost: 5173/باز کنید و الگوی زیر را مشاهده خواهید کرد.

یک مؤلفه پخش کننده ویدیویی ایجاد کنید

اکنون زمان آن رسیده است که یک مؤلفه پخش کننده ویدیویی اضافه کنیم. ما در این مثال از پخش کننده وب منبع باز از Eyevinn استفاده خواهیم کرد.

ابتدا کتابخانه را نصب کنید.

% npm install --save @eyevinn/web-player

سپس پوشه ای برای اجزای خود ایجاد خواهیم کرد

% mkdir src/components

در این پوشه پرونده ای به نام ایجاد خواهیم کرد Player.tsx حاوی کد زیر

import webplayer from '@eyevinn/web-player';
import { useEffect, useRef } from 'react';

import '@eyevinn/web-player/dist/webplayer.css';

export default function Player({
  src,
  autoplay = false
}: {
  src: string;
  autoplay?: boolean;
}) {
  const elRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (elRef.current) {
      const instance = webplayer(elRef.current, {});
      instance.player.load(src, autoplay);
      return () => {
        instance.destroy();
      };
    }
  }, [src]);

  return <div ref={elRef} className="h-full" />;
}

از مؤلفه پخش کننده استفاده کنید

اکنون می توانیم از این مؤلفه پخش کننده در صفحه اصلی خود استفاده کنیم. محتویات موجود در پرونده را جایگزین کنید src/App.tsx و جایگزین src ملک با URL به ویدئویی که در وبلاگ قبلی ایجاد کرده اید.

import { useState } from 'react'
import './App.css'
import Player from './components/Player'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React + Eyevinn OSC</h1>
      <div className="card">
        <Player src="https://eyevinnlab-devguide.minio-minio.auto.prod.osaas.io/devguide/VINN/52e124b8-ebe8-4dfe-9b59-8d33abb359ca/index.m3u8"/>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

export default App

اکنون هنگام به روزرسانی مرورگر باید پخش کننده ویدیو را با ویدیوی خود مشاهده کنید.

برنامه وب را بصورت آنلاین در دسترس قرار دهید

اکنون یک برنامه کاری دارید که به صورت محلی روی رایانه خود کار می کند و زمان آن است که آن را بصورت آنلاین در دسترس قرار دهید. برای اینکه آن را به صورت آنلاین در دسترس قرار دهیم ، از Eyevinn Open Source Cloud برای میزبانی این وب سایت استفاده خواهیم کرد ، همانطور که در یک پست وبلاگ در وبلاگ ابر منبع باز Eyevinn توضیح داده شده است.

ابتدا پرونده پیکربندی Vite را اصلاح کنید vite.config.ts برای استفاده از URL پایه نسبی (پیش فرض انتظار ریشه دارد /).

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
})

سپس می توانیم با اجرای دستور زیر برنامه را بسازیم.

% npm run build

به کنسول وب ابر منبع باز Eyevinn بروید و نشانه دسترسی موجود در زیر تنظیمات را بدست آورید. توکن را کپی کرده و آن را در متغیر محیط ذخیره کنید OSC_ACCESS_TOKENبشر

% export OSC_ACCESS_TOKEN=YOUR_TOKEN

اکنون دستور زیر را برای استقرار ساختمان اجرا کنید. ما وب سایت “ویدیویی” را نامگذاری می کنیم که سطل آن در آن پرونده ها قرار می گیرد.

% npx @osaas/cli@latest web publish -s video dist/

اکنون برنامه وب شما به صورت آنلاین در آدرس بازگردانده شده توسط دستور بالا در دسترس است. در مثال ما در https://eyevinnlab-video.minio-minio.auto.prod.osaas.io/video/index.html در دسترس است

پایان

این به شما نمونه ای از چگونگی ساخت یک برنامه پخش ویدیو بر اساس منبع باز بدون نیاز به میزبانی همه چیز در خانه می دهد. از پردازش ویدیو تا استقرار برنامه وب بر اساس خدمات وب باز در ابر منبع باز Eyevinn.

از آنجا که همه چیز بر اساس منبع باز است ، شما همیشه این گزینه را دارید که اگر می خواهید آن را در خانه بیاورید.