feat: 添加单页直播
This commit is contained in:
parent
a478c9dd09
commit
1b72d9d4f5
52
live.html
Normal file
52
live.html
Normal 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>
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -164,6 +164,7 @@
|
||||
@apply text-sm;
|
||||
background: none;
|
||||
.col{
|
||||
@apply text-sm text-gray-800;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
17
src/pages/live-player/index.tsx
Normal file
17
src/pages/live-player/index.tsx
Normal 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>
|
||||
}
|
9
src/pages/live-player/style.scss
Normal file
9
src/pages/live-player/style.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -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="">
|
||||
|
@ -56,7 +56,7 @@
|
||||
}
|
||||
}
|
||||
.title{
|
||||
@apply flex-1 pl-0 justify-start;
|
||||
@apply flex-1 pl-0;
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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})}>
|
||||
|
@ -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'
|
||||
})
|
||||
}
|
@ -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')
|
||||
|
@ -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
1
src/vite-env.d.ts
vendored
@ -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';
|
||||
|
||||
|
@ -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/, '')
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user