├── .bebelrc
├── .eslintrc.js
├── .github
└── workflows
│ └── nodejs.yml
├── .gitignore
├── .tern-project
├── Dockerfile
├── README.md
├── app.js
├── app
├── main.js
└── subtitle.js
├── config.json
├── manual
├── live.gif
├── obs setup.png
├── sample.png
├── screen.gif
├── screen.png
└── subtitle.gif
├── package-lock.json
├── package.json
├── production.sh
├── public
├── example.json
├── favicon.ico
├── stylesheets
│ ├── bootstrap.css
│ ├── if_microphone-slash.png
│ ├── if_microphone.png
│ ├── images
│ │ └── ui-icons_444444_256x240.png
│ ├── jquery-ui.css
│ ├── micswitch.css
│ ├── style.css
│ └── switch.css
├── upload
│ └── upload.txt
└── vTaiwanLogo.png
├── routes
└── api.js
├── views
├── admin.ejs
├── history.ejs
├── include.ejs
├── site.ejs
└── subtitle.ejs
├── webpack.common.js
├── webpack.dev.js
└── webpack.production.js
/.bebelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react",
5 | ],
6 | "plugins": []
7 | }
8 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "extends": "google",
3 | "parserOptions": {
4 | "ecmaVersion": 6,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true
8 | }
9 | },
10 | "rules": {
11 | "semi": 2,
12 | "comma-dangle": ["error", "never"]
13 | },
14 | "env": {
15 | "node": true,
16 | "mongo": true,
17 | "es6": true
18 | }
19 | };
20 |
--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | name: Node.js CI
2 |
3 | on: [push]
4 |
5 | jobs:
6 | build:
7 |
8 | runs-on: ubuntu-latest
9 |
10 | strategy:
11 | matrix:
12 | node-version: [8.x, 10.x, 12.x]
13 |
14 | steps:
15 | - uses: actions/checkout@v2
16 | - name: Use Node.js ${{ matrix.node-version }}
17 | uses: actions/setup-node@v1
18 | with:
19 | node-version: ${{ matrix.node-version }}
20 | - run: npm install
21 | - run: npm run build --if-present
22 | - run: npm test
23 | env:
24 | CI: true
25 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # .gitignore_global
2 | ####################################
3 | ######## OS generated files ########
4 | ####################################
5 | .DS_Store
6 | .DS_Store?
7 | *.swp
8 | ._*
9 | .Spotlight-V100
10 | .Trashes
11 | Icon?
12 | ehthumbs.db
13 | Thumbs.db
14 | ####################################
15 | ############# Packages #############
16 | ####################################
17 | *.7z
18 | *.dmg
19 | *.gz
20 | *.iso
21 | *.jar
22 | *.rar
23 | *.tar
24 | *.zip
25 | node_modules
26 | .idea/
27 | .xcuserstate
28 | xcuserdata/
29 | list.json
30 | .vscode/launch.json
31 | upload
32 | position.json
33 | dist
34 | bundle.js
35 | bundle.js.map
36 |
--------------------------------------------------------------------------------
/.tern-project:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": {
3 | "node": {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM alpine:latest
2 | RUN apk add --no-cache git nodejs nodejs-npm
3 | RUN git clone https://github.com/peterlee0127/RealTimeSubtitle
4 | WORKDIR RealTimeSubtitle
5 | RUN npm install
6 | RUN npm run build
7 | EXPOSE 8080
8 | CMD npm start
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RealTimeSubtitle
2 |
3 | 即時字幕器
4 |
5 | A free plug-in for Broadcast software(support Browser Source). We can show live guest speaking during the live event. Without any commercial software needed, we can use it with any OS (Mac/Windows/Linux......).
6 |
7 | Just embeded the display page to your input.
8 |
9 | ### Tech
10 |
11 | 1. Node.js with socket.io.
12 |
13 | ### Sample.
14 |
15 | Different color block means different source. The bottom orange block shows our subtitle systems.
16 |
17 | Sample Video
18 |
19 | Demo Video
20 |
21 |
22 |
23 |
24 | #### Setup Browser Source at OBS
25 |
26 | fill URL with your own server.
27 |
28 |
29 |
30 |