feat: 添加单页直播

This commit is contained in:
LittleBoy 2025-01-22 23:07:53 +08:00
parent a478c9dd09
commit 1b72d9d4f5
15 changed files with 103 additions and 14 deletions

52
live.html Normal file
View File

@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数字人直播</title>
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.2.0/tcplayer.min.css" rel="stylesheet"/>
<style>
*, :before, :after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
}
body{
margin: 0;
}
.wrapper{}
.wrapper .video-js{
max-width: 480px;
margin: auto;
height: 100vh;
}
.wrapper video{
height: 100vh;
}
</style>
</head>
<body>
<div class="wrapper">
<video id="player-container" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
</div>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.2.0/tcplayer.v5.2.0.min.js"></script>
<script>
function init(){
fetch('http://live.s1.wm-app.xyz/api/v1/tencent/get_pull_url').then(r=>r.json()).then(ret=>{
console.log(ret)
TCPlayer('player-container', {
sources: [{
src: ret.data.flv_url, // 播放地址
}],
licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1328581896_1/v_cube.license', // license 地址,必传。参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl
});
})
}
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>

View File

@ -1,15 +1,16 @@
import AppRouter from "@/routes";
import {ConfigProvider} from "@/contexts/config";
import {AuthProvider} from "@/contexts/auth";
import LivePlayer from "@/pages/live-player";
console.log(`APP-BUILD-AT: ${AppBuildVersion}`)
function App() {
return (
<ConfigProvider>
<AuthProvider>
{AppConfig.ONLY_LIVE && AppConfig.ONLY_LIVE == 'yes'?<LivePlayer />:<AuthProvider>
<AppRouter/>
</AuthProvider>
</AuthProvider>}
</ConfigProvider>
)
}

View File

@ -164,6 +164,7 @@
@apply text-sm;
background: none;
.col{
@apply text-sm text-gray-800;
height: 42px;
}
}

View File

@ -15,7 +15,6 @@ body {
font-size: 16px;
font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif;
background-color: var(--main-bg-color);
min-width: 1000px;
}
.dashboard-layout {

View File

@ -0,0 +1,17 @@
import {useMount} from "ahooks";
import {getLiveUrl} from "@/service/api/live.ts";
import React, {useState} from "react";
import {Player} from "@/components/video/player.tsx";
import './style.scss'
export default function LivePlayer() {
const [liveUrl, setLiveUrl] = useState<string>('http://fm.live.starbitech.com/fm/prod_fm.flv')
useMount(async ()=>{
getLiveUrl().then((ret)=>{
setLiveUrl(ret.flv_url)
})
})
return <div className="live-player-wrapper ">
<Player showControls url={liveUrl} className={'h-screen'} />
</div>
}

View File

@ -0,0 +1,9 @@
.live-player-wrapper {
@apply relative m-auto h-screen w-screen max-w-[480px] content-center relative;
.player-container{
@apply bg-gray-500 w-full h-screen ;
}
video {
height: 100vh !important;
}
}

View File

@ -261,7 +261,7 @@ export default function LiveIndex() {
<div className="col cover"></div>
<div className="col title"></div>
<div className="col generated-time"></div>
<div className="col operation"></div>
<div className="col operation"></div>
</div>
</div>
<div className="">

View File

@ -56,7 +56,7 @@
}
}
.title{
@apply flex-1 pl-0 justify-start;
@apply flex-1 pl-0;
&:after{
display: none;
}

View File

@ -98,7 +98,7 @@ export default function NewEdit() {
<div className={styles.newListTable}>
<div className="header row flex">
<div className="col title"></div>
<div className="col source source"></div>
<div className="col source"></div>
<div className="col count-picture"></div>
<div className="col count-words"></div>
<div className="col time"></div>

View File

@ -188,7 +188,7 @@ export default function VideoIndex() {
<div className="col cover"></div>
<div className="col title"></div>
<div className="col generated-time"></div>
<div className="col operation"></div>
<div className="col operation"></div>
</div>
</div>
<InfiniteScroller loading={state.loading} ref={scrollerRef} onScroll={top => setState({showToTop: top > 30})}>

View File

@ -1,4 +1,4 @@
import {post} from "@/service/request.ts";
import {get, post} from "@/service/request.ts";
export function playState() {
return post<LiveState>({url: '/room/playing'})
@ -14,4 +14,11 @@ export function modifyOrder(ids: Id[]) {
export function deleteByIds(ids: Id[]) {
return post('/room/remove', {ids})
}
export function getLiveUrl() {
return get<{flv_url:string}>({
url: '/tencent/get_pull_url',
baseURL: '/api/v1'
})
}

View File

@ -1,4 +1,4 @@
import {post} from "@/service/request.ts";
import {get, post} from "@/service/request.ts";
export function getList() {
return post<DataList<VideoInfo>>('/video/list')

View File

@ -71,12 +71,13 @@ export function post<T>(params: RequestOption | string, _data?: AllType) {
})
}
export function get<T>(params: RequestOption) {
if (params.data) {
params.url += (params.url.indexOf('?') === -1 ? '?' : '&') + stringify(params.data)
export function get<T>(params: RequestOption|string) {
const options = typeof params === 'string' ? {url: params} : params;
if (options.data) {
options.url += (options.url.indexOf('?') === -1 ? '?' : '&') + stringify(options.data)
}
return request<T>({
...params,
...options,
method: 'get'
})
}

1
src/vite-env.d.ts vendored
View File

@ -12,6 +12,7 @@ declare const AppConfig: {
// 登录用户信息 key
AUTHED_PERSON_DATA_KEY: string;
API_PREFIX: string;
ONLY_LIVE: string;
};
declare const AppMode: 'test' | 'production' | 'development';

View File

@ -21,6 +21,7 @@ export default defineConfig(({mode}) => {
API_PREFIX: process.env.APP_API_PREFIX || '/mgmt/v1/metahuman',
AUTH_TOKEN_KEY: process.env.AUTH_TOKEN_KEY || AUTH_TOKEN_KEY,
AUTHED_PERSON_DATA_KEY: process.env.AUTHED_PERSON_DATA_KEY || 'digital-person-user-info',
ONLY_LIVE: process.env.ONLY_LIVE || 'no',
}),
AppMode: JSON.stringify(mode),
AppBuildVersion: JSON.stringify(AppPackage.name + '-' + AppPackage.version + '-' + dayjs().format('YYYYMMDDHH_mmss'))
@ -46,7 +47,7 @@ export default defineConfig(({mode}) => {
// rewrite: (path) => path.replace(/^\/api/, '')
},
'/api': {
target: `http://${devServerHost}`,
target: `${devServerHost}`,
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
}