# VideoWeb

**Repository Path**: ddm9/VideoWeb

## Basic Information

- **Project Name**: VideoWeb
- **Description**: TikTube 一个能发弹幕的简单视频网站，界面参考了Youtube，后端使用Spring Boot，前端Vue，vuetifyjs。支持自动生成封面图，发送弹幕等功能。
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://tiktube.buguagaoshu.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 88
- **Created**: 2025-05-08
- **Last Updated**: 2025-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
    <img src="/img/logo.png" alt="logo" title="logo" width="50%" style="text-align:center;">
</div>

<br/>

<div align="center">
    <a href="/README_zh_CN.md">简体中文</a>
</div>

<br/>

# TikTube A simple video website with a bullet chat (danmaku) feature


## introduction 

A Simple Video Website

The website name is a mashup of TikTok and YouTube, with the logo generated by Doubao AI.

The main interface is inspired by [YouTube](https://www.youtube.com/), with some features borrowed from [Bilibili](https://www.bilibili.com/).  

Backend: Spring Boot, MySQL

Frontend: Vue, Vuetifyjs  

Most core features have been implemented, including: 

- Video upload  
- Danmaku (commenting overlay)  
- Video playback  
- Watch history  
- Favorites  
- Comments  
- Likes  
- Automatic thumbnail generation  
- Data management 
- TOTP 2FA 
- Configure multiple repositories, supporting S3 API-compatible object storage. Tested with: MinIO, Cloudflare R2.

Some minor features are still being optimized.  

Please compile the new frontend interface using the project under "TikTubeWeb".  

For ease of use and deployment, the only external dependency is the database. 

Regarding the Online DEMO: [https://tiktube.buguagaoshu.com/](https://tiktube.buguagaoshu.com/)

*This version of the DEMO is for display purposes only. As such, the administrator has disabled submission and commenting functions for regular users. If you wish to experience these features, please deploy the system yourself for testing.*

Test account:

Email: test@test.com

Password: test123456test


TOTP TEST Test account:

Email: test2@test.com

Password: test123456test

TOTP secret：JL2ZZV7W6OGXG4JYLCVXZRMDUV4XA3DDLPC3Q72IO6XB4K4EJKW4VW4IHXOMA2DCYU6WWRMNAMKXCVO7PGUIK2PCJG7TXMDSTA2JP76XV3BGAGSJAW66LFFQQYOG2KYB

you can use ：如Google Authenticator、Microsoft Authenticator


<img src="/img/otp.png" title="otp" alt="otp">


## Video demo

YouTube：<a href="https://youtu.be/HX3812cRtYA" target="_blank">https://youtu.be/HX3812cRtYA</a>

Bilibili：<a href="https://www.bilibili.com/video/BV1AV59z5ESV" target="_blank">https://www.bilibili.com/video/BV1AV59z5ESV</a>

## Quick start

**Run Environment: Java17+, Node 20+, Maven 3.9+，MySQL 8.0+**

Creating a database, Configuring Database Addresses

**Run back end server**

```bash
cd TikTube
mvn clean package
```

**Then**

```bash
java -jar target/tiktube-
```

**Run front end server**

```bash
cd TikTubeWeb
npm install
```

**Then**

```bash
npm run dev
```

**Final**

Open

```
http://127.0.0.1:5173
```


## screenshot

### Home

<img src="/img/home.png" title="Home" alt="Home">

### Video Page

<img src="/img/video.png" title="Video Page" alt="Video Page">

### Comment

<img src="/img/comment.png" title="Comment" alt="Comment">

### History

<img src="/img/history.png" title="History" alt="History">

### Subscribe

<img src="/img/subscribe.png" title="Subscribe" alt="Subscribe">

### User Home

<img src="/img/user.png" title="User Home" alt="User Home">

### Notification

<img src="/img/notification.png" title="Notification" alt="Notification">

### Publish

<img src="/img/publish.png" title="Publish" alt="Publish">

#### Video Capture

<img src="/img/Capture.png" title="Video Capture" alt="Video Capture">


### User Management

<img src="/img/admin_user.png" title="User Management" alt="User Management">


### Question

If you are unable to compile using an older version of the frontend

Frontend Fails to Compile

If you encounter the error `ESLint is not a constructor`, add `lintOnSave: false` to your `vue.config.js`.


**Tips:** The first user registered with the name admin will automatically become an administrator.

## CHANGE LOG

[CHANGELOG](/CHANGELOG.md)


## Other Links

GitHub：https://github.com/PuZhiweizuishuai/TikTube

Gitee: https://gitee.com/puzhiweizuishuai/VideoWeb