创建网络视频应用程序-js教程-PHP中文网

创建网络视频应用程序

碧海醫心

发布： 2025-02-06 15:26:01

原创

813人浏览过

本指南将指导您创建一个基于react框架的网络应用程序，用于流式播放您已创建的视频，延续了之前关于使用开放式web服务的博客文章。

我们将使用Vite构建工具来设置项目。

一、设置React TypeScript项目

首先，使用以下命令创建一个新的基于React模板的项目：

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

登录后复制

运行后，访问http://localhost:5173/，您将看到React模板。

创建网络视频应用程序

二、创建视频播放器组件

我们将使用Eyevinn的开源Web播放器。

安装库:

npm install --save @eyevinn/web-player

登录后复制

创建组件文件夹:

mkdir src/components

登录后复制

创建player.tsx文件: 在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 className="h-full" ref={elRef}></div>;
}

登录后复制

三、使用播放器组件

替换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;

登录后复制

刷新浏览器，您应该可以看到视频播放器。

四、在线部署Web应用程序

我们将使用Eyevinn开源云进行部署。

修改vite.config.ts文件: 使用相对基本URL：

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

export default defineConfig({
  base: './',
  plugins: [react()],
});

登录后复制

构建应用程序:

npm run build

登录后复制

获取访问令牌: 访问Eyevinn开源云的Web控制台，获取访问令牌并将其存储在OSC_ACCESS_TOKEN环境变量中。

export OSC_ACCESS_TOKEN=your_token

登录后复制

部署构建: 使用以下命令部署构建，我们将网站命名为“video”：

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

登录后复制

部署完成后，您可以在命令返回的地址访问您的Web应用程序。例如：https://eyevinnlab-video.minio-minio.auto.prod.osaas.io/video/index.html

创建网络视频应用程序

结论

本指南展示了如何创建一个基于开源组件的视频流应用程序，并利用Eyevinn开源云进行部署，无需自行托管所有内容。

以上就是创建网络视频应用程序的详细内容，更多请关注php中文网其它相关文章！