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

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

一、设置React TypeScript项目

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

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

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

二、创建视频播放器组件

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

1. 安装库:

npm install --save @eyevinn/web-player

2. 创建组件文件夹:

mkdir src/components

3. 创建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(null);

  useEffect(() => {
    if (elRef.current) {
      const instance = webplayer(elRef.current, {});
      instance.player.load(src, autoplay);
      return () => instance.destroy();
    }
  }, [src]);

  return 
;
}

三、使用播放器组件

替换src/App.tsx文件的内容，并将src属性中的URL替换为您之前创建的视频链接：

极限网络办公Office Automation

专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬

下载

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

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

  return (
    <>
      
Vite + React + Eyevinn OSC
      

        
         setCount(count => count + 1)}>
          Count is {count}
        
      
    
  );
}

export default App;

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

四、在线部署Web应用程序

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

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

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

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

2. 构建应用程序:

npm run build

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

export OSC_ACCESS_TOKEN=your_token

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

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

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

结论

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