本指南将指导您创建一个基于react框架的网络应用程序，用于流式播放您已创建的视频，延续了之前关于使用开放式web服务的博客文章。
我们将使用Vite构建工具来设置项目。
一、设置React TypeScript项目
首先，使用以下命令创建一个新的基于React模板的项目：
<code class="bash">npm create vite@latest my-video-app -- --template react-ts</code>
运行后，访问http://localhost:5173/，您将看到React模板。
二、创建视频播放器组件
我们将使用Eyevinn的开源Web播放器。
- 安装库:
<code class="bash">npm install --save @eyevinn/web-player</code>
- 创建组件文件夹:
<code class="bash">mkdir src/components</code>
-
创建
player.tsx文件: 在src/components文件夹中，创建一个名为player.tsx的文件，并添加以下代码：
<code class="typescript">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>;
}</code>
三、使用播放器组件
极限网络办公Office Automation
下载
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
替换src/App.tsx文件的内容，并将src属性中的URL替换为您之前创建的视频链接：
<code class="typescript">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/52e124124b8-ebe8-4dfe-9b59-8d33abb359ca/index.m3u8" />
<button onClick={() => setCount(count => count + 1)}>
Count is {count}
</button>
</div>
</>
);
}
export default App;</code>
刷新浏览器，您应该可以看到视频播放器。
四、在线部署Web应用程序
我们将使用Eyevinn开源云进行部署。
-
修改
vite.config.ts文件: 使用相对基本URL：
<code class="typescript">import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
base: './',
plugins: [react()],
});</code>
- 构建应用程序:
<code class="bash">npm run build</code>
-
获取访问令牌: 访问Eyevinn开源云的Web控制台，获取访问令牌并将其存储在
OSC_ACCESS_TOKEN环境变量中。
<code class="bash">export OSC_ACCESS_TOKEN=your_token</code>
- 部署构建: 使用以下命令部署构建，我们将网站命名为“video”：
<code class="bash">npx @osaas/cli@latest web publish -s video dist/</code>
部署完成后，您可以在命令返回的地址访问您的Web应用程序。例如：https://eyevinnlab-video.minio-minio.auto.prod.osaas.io/video/index.html
结论
本指南展示了如何创建一个基于开源组件的视频流应用程序，并利用Eyevinn开源云进行部署，无需自行托管所有内容。
