feat: 初始化屏幕播放控制系统
搭建基于 Flask 的多屏幕定时播放控制后端，提供设备管理控制台、播放端页面、媒体上传与配置文件持久化，并补充项目文档、示例配置及 MIT 许可证。
这个提交包含在：
@@ -0,0 +1,212 @@
|
||||
# 屏幕播放控制系统 / Screen Controller
|
||||
|
||||
> 一个轻量级的展厅多屏幕定时播放控制系统，方便展厅介绍员通过 Web 控制台统一管理多台显示屏的定时图片/视频播放。
|
||||
|
||||
A lightweight, web-based multi-screen scheduled playback control system for exhibition halls. It lets presenters centrally manage scheduled image/video playback across multiple displays from a single control console.
|
||||
|
||||
---
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **多设备管理**：在一台控制端集中管理多块屏幕（设备），每块屏幕对应一个独立播放列表。
|
||||
- **定时播放**：为每条内容设置开始时间，播放端到点自动切换；支持图片（可设展示秒数）与视频。
|
||||
- **可视化控制台**：无需手改 JSON，通过网页即可新增/删除设备、编辑播放列表、上传媒体文件。
|
||||
- **媒体库**：支持在控制台直接上传图片/视频，并一键插入到播放列表。
|
||||
- **局域网部署**：默认监听 `0.0.0.0`，展厅内任意设备（电脑、电视盒子、平板）通过浏览器访问播放端即可。
|
||||
- **实时轮询**：播放端每 30 秒从服务端拉取最新配置，改完即生效，无需刷新。
|
||||
|
||||
---
|
||||
|
||||
## 系统架构
|
||||
|
||||
```
|
||||
控制端 (浏览器) ──HTTP──> Flask 服务 <──HTTP── 播放端 (各屏幕浏览器)
|
||||
/ | config.json /player?device_id=xx
|
||||
管理设备/播放列表/上传 媒体文件 (static/)
|
||||
```
|
||||
|
||||
- **控制端** `/`：展厅介绍员使用的管理页面。
|
||||
- **播放端** `/player?device_id=xxx`：部署在每块屏幕的浏览器上，按配置定时播放。
|
||||
- **数据** `config.json`：设备与播放列表的持久化存储。
|
||||
- **媒体** `static/`：图片与视频文件存放目录。
|
||||
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 环境要求
|
||||
|
||||
- Python 3.8+
|
||||
- 支持现代浏览器的播放设备（建议 Chrome / Edge）
|
||||
|
||||
### 2. 安装
|
||||
|
||||
```bash
|
||||
# 克隆仓库（开源后）
|
||||
git clone <your-repo-url>
|
||||
cd screen_controller
|
||||
|
||||
# 创建虚拟环境（可选但推荐）
|
||||
python -m venv venv
|
||||
source venv/bin/activate # Windows: venv\Scripts\activate
|
||||
|
||||
# 安装依赖
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### 3. 运行
|
||||
|
||||
```bash
|
||||
python main.py
|
||||
```
|
||||
|
||||
启动后控制台会输出访问地址，默认：
|
||||
|
||||
- 控制端： `http://0.0.0.0:5000/`
|
||||
- 播放端示例： `http://<服务器IP>:5000/player?device_id=d1`
|
||||
|
||||
> 局域网内其他设备请使用**服务器的内网 IP**（如 `http://192.168.1.100:5000/`）访问。
|
||||
|
||||
### 4. 环境变量（可选）
|
||||
|
||||
可通过环境变量自定义监听配置（参见 `.env.example`）：
|
||||
|
||||
| 变量 | 说明 | 默认值 |
|
||||
| --- | --- | --- |
|
||||
| `HOST` | 监听地址，`0.0.0.0` 允许局域网访问 | `0.0.0.0` |
|
||||
| `PORT` | 监听端口 | `5000` |
|
||||
| `FLASK_DEBUG` | 调试模式，`1` 开启 | `0` |
|
||||
|
||||
---
|
||||
|
||||
## 使用说明
|
||||
|
||||
### 控制端
|
||||
|
||||
1. 打开 `http://<服务器IP>:5000/`，左侧为设备列表。
|
||||
2. 点击「+ 新增」创建设备，填写设备名称与 ID。
|
||||
3. 在「播放列表」中添加条目：
|
||||
- **类型**：图片 / 视频
|
||||
- **路径**：媒体文件在 `static/` 下的访问路径，如 `/static/video1.mp4`
|
||||
- **开始时间**：该内容开始播放的时间
|
||||
- **时长（秒）**：仅对图片有效，默认 10 秒
|
||||
4. 「媒体库」区域可直接上传本地图片/视频，上传后点击「使用」即可插入到播放列表。
|
||||
5. 点击「保存」后配置立即生效，播放端会在 30 秒内自动更新。
|
||||
|
||||
### 播放端
|
||||
|
||||
在每块屏幕上用浏览器打开对应的播放端地址，例如：
|
||||
|
||||
```
|
||||
http://<服务器IP>:5000/player?device_id=d1
|
||||
```
|
||||
|
||||
建议将播放端浏览器设为**全屏**（F11）。播放端会：
|
||||
- 按各条目 `start_time` 倒计时到点播放；
|
||||
- 视频播完后自动切换到下一条；
|
||||
- 图片按 `duration` 秒数展示后切换；
|
||||
- 每 30 秒拉取最新配置，后台修改无需人工刷新。
|
||||
|
||||
---
|
||||
|
||||
## 配置文件格式
|
||||
|
||||
`config.json` 结构如下（也可通过控制端界面编辑，无需手写）：
|
||||
|
||||
```json
|
||||
{
|
||||
"devices": [
|
||||
{
|
||||
"id": "d1",
|
||||
"name": "主屏幕",
|
||||
"playlist": [
|
||||
{
|
||||
"type": "image",
|
||||
"path": "/static/image1.png",
|
||||
"start_time": "2024-11-21T16:32:10",
|
||||
"duration": 10
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"path": "/static/video1.mp4",
|
||||
"start_time": "2024-11-21T16:55:00"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
| 字段 | 说明 |
|
||||
| --- | --- |
|
||||
| `devices[].id` | 设备唯一标识，播放端 URL 中 `device_id` 对应此值 |
|
||||
| `devices[].name` | 设备显示名称 |
|
||||
| `devices[].playlist[].type` | `image` 或 `video` |
|
||||
| `devices[].playlist[].path` | 媒体文件访问路径（位于 `static/` 下） |
|
||||
| `devices[].playlist[].start_time` | 开始播放时间（ISO 8601，本地时间） |
|
||||
| `devices[].playlist[].duration` | 图片展示秒数（视频忽略） |
|
||||
|
||||
---
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
screen_controller/
|
||||
├── main.py # Flask 后端服务
|
||||
├── config.json # 设备与播放列表配置
|
||||
├── requirements.txt # Python 依赖
|
||||
├── .env.example # 环境变量示例
|
||||
├── static/ # 媒体文件存放目录（图片/视频）
|
||||
└── templates/
|
||||
├── index.html # 控制端页面
|
||||
└── player.html # 播放端页面
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 文档导航
|
||||
|
||||
- [用户操作指引](./用户操作指引.md)：面向展厅介绍员/运维人员的日常使用手册（快速上手、常见场景、状态说明、排错）。
|
||||
- 本文档（README）：系统介绍、部署与技术说明。
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
**Q: 播放端打不开 / 一直「正在初始化」？**
|
||||
- 确认设备 ID 与 `config.json` 中一致；
|
||||
- 确认访问地址使用的是服务器**内网 IP** 而非 `localhost`（localhost 仅本机有效）。
|
||||
|
||||
**Q: 视频无法自动播放？**
|
||||
- 部分浏览器禁止有声自动播放，展厅设备建议在系统设置中允许自动播放，或保持浏览器在前台。
|
||||
|
||||
**Q: 修改配置后播放端没变化？**
|
||||
- 播放端每 30 秒轮询一次，最多等待 30 秒生效；也可手动刷新播放端页面。
|
||||
|
||||
**Q: 时间不准确？**
|
||||
- 播放以**播放设备本地系统时间**为准，请保证各屏幕设备时间同步（建议开启网络时间同步）。
|
||||
|
||||
---
|
||||
|
||||
## 开源协议
|
||||
|
||||
本项目基于 [MIT License](./LICENSE) 开源，可自由用于学习、商用与二次开发，请保留版权声明。
|
||||
|
||||
---
|
||||
|
||||
## English
|
||||
|
||||
**Screen Controller** is a lightweight web system for scheduling image/video playback across multiple screens in an exhibition hall.
|
||||
|
||||
- **Console** (`/`): manage devices, playlists, and upload media via a web UI.
|
||||
- **Player** (`/player?device_id=xxx`): runs on each screen's browser and plays content by schedule.
|
||||
- **Backend**: Flask serves config from `config.json` and media from `static/`.
|
||||
|
||||
Quick start:
|
||||
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
python main.py
|
||||
```
|
||||
|
||||
Then open `http://<server-ip>:5000/` for the console, and `http://<server-ip>:5000/player?device_id=d1` on each display. Licensed under the MIT License.
|
||||
在新工单中引用
屏蔽一个用户