Skip to content

Commit

Permalink
Release: version 0.5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
tsukumijima committed Feb 13, 2022
1 parent 528b624 commit f1f3b01
Show file tree
Hide file tree
Showing 12 changed files with 59 additions and 51 deletions.
5 changes: 3 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

# サードパーティーライブラリのダウンロードを行うステージ
# 念のため最終イメージに合わせて ubuntu20.04 にしておく
# 中間イメージなので、サイズは(ビルドするマシンのディスク容量以外は)気にしなくて良い
Expand Down Expand Up @@ -28,7 +29,7 @@ RUN ln -s /usr/lib/x86_64-linux-gnu/libamfrt64.so /usr/lib/x86_64-linux-gnu/liba

# サードパーティーライブラリをダウンロード
WORKDIR /thirdparty
RUN aria2c -x10 https://github.com/tsukumijima/KonomiTV/releases/download/v0.4.0/thirdparty.7z
RUN aria2c -x10 https://github.com/tsukumijima/KonomiTV/releases/download/v0.5.0/thirdparty.7z
RUN 7z x -y thirdparty.7z

# サードパーティーライブラリに実行権限を付与
Expand Down Expand Up @@ -103,7 +104,7 @@ COPY ./server /code/server
# ダウンロードしておいたサードパーティライブラリをコピー
COPY --from=thirdparty-downloader /thirdparty/thirdparty /code/server/thirdparty

# client の成果物をコピーdist だけで良い
# client の成果物をコピー (dist だけで良い)
COPY --from=client-builder /code/client/dist /code/client/dist

# データベースを必要な場合にアップグレードし、起動
Expand Down
78 changes: 43 additions & 35 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,10 @@
当然ながら表に泥臭い処理を見せないようにしている分、裏側の実装がそれなりに大変です。細かいところまで調整しているとかなりの手間がかかります。
それでも私が頑張れば私を含めたユーザーの視聴体験が向上するわけで、必要な犠牲かなと思っています。

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153728271-e4726109-9b60-4c70-b434-233c68a48454.png"><br>

## 備考・注意事項

- 現在 β 版で、まだ実験的なプロダクトです。当初よりかなり安定してきましたが、まだ保証ができる状態ではありません。
- まだ安定しているとは言えませんが、それでも構わない方のみ導入してください。
- 使い方などの説明も用意できていないため、自力でトラブルに対処できるエンジニアの方以外には現状おすすめできません。
- 今後インストーラーを開発予定ですが、後述の通り現時点ではインストール方法がかなり煩雑になっています。他の環境でちゃんと動作するのかさえも微妙です。
- 完成予想はおろか、TVRemotePlus で実装していた機能に関してもまだ完全にカバーできていないため、現時点で TVRemotePlus を代替できるレベルには達していません。
- TVRemotePlus の後継という位置づけのソフトですが、それはあくまで「精神的な」ものであり、実際の技術スタックや UI/UX は完全に新規で設計されています。
- 確かに TVRemotePlus の開発で得られた知見を数多く活用していますし開発者も同じではありますが、ユーザービリティや操作感は大きく異なると思います。
- TVRemotePlus の技術スタックでは解決不可能なボトルネックを根本的に解消した上で、「同じものを作り直す」のではなく、ゼロから新しいテレビ視聴・録画視聴のユーザー体験を作り上げ、追求したいという想いから開発しています。
- どちらかというと録画視聴機能の方がメインの予定でいますが、前述のとおり、現時点ではテレビのライブ視聴機能のみの実装です。構想は壮大ですが、全て実装し終えるには年単位で時間がかかるでしょう。
- 今のところ、スマホ・タブレットは横画面表示のみ対応しています。将来的には縦画面でも崩れずに表示できるようにする予定です。
- タブレットは Fire HD 10 (2021), iPad mini 4, iPad mini 6 で動作することを確認済みです。
- スマホ(横画面)は実験的なもので、今後 UI が大幅に変更される可能性があります。
- iPhone は Media Source Extensions API に対応していないため、現時点では動作しません。
- 今後 LL-HLS 再生モードを実装する予定ですが、私が iPhone を常用していない事もあり、実装時期は未定です。
- また、iPad でホーム画面に追加したアイコンから単独アプリのように起動した場合も (PWA)、同様に動作しません。
- 今後、開発の過程で設定や構成が互換性なく大幅に変更される可能性があります。
- ユーザービリティなどのフィードバック・不具合報告・Pull Requests (PR) などは歓迎します。
- 技術スタックはサーバー側が Python + [FastAPI](https://github.com/tiangolo/fastapi) + [Tortoise ORM](https://github.com/tortoise/tortoise-orm) + [Uvicorn](https://github.com/encode/uvicorn) 、クライアント側が Vue.js + [Vuetify](https://github.com/vuetifyjs/vuetify) の SPA です。
- Vuetify は補助的に利用しているだけで、大部分は独自で書いた SCSS スタイルを適用しています。
- コメントを多めに書いたりそれなりにきれいにコーディングしているつもりなので、少なくとも TVRemotePlus なんかよりかは読みやすいコードになっている…はず。
- 他人が見るために書いたものではないのであれですが、一応自分用の [開発資料](https://mango-garlic-eff.notion.site/KonomiTV-90f4b25555c14b9ba0cf5498e6feb1c3)[DB設計](https://mango-garlic-eff.notion.site/KonomiTV-544e02334c89420fa24804ec70f46b6d) 的なメモを公開しておきます。もし PR される場合などの参考になれば。

## 動作環境

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153731898-c9743df8-794b-4498-ac25-017662f38759.png"><br>

### サーバー

- **Windows PC または Linux PC**
Expand Down Expand Up @@ -89,11 +65,35 @@
- PWA モードでは Safari 側のバグにより、テレビのライブストリーミングに失敗します。
- 前述のとおり、iOS Safari への対応は当面の間行いません。

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153729029-bbcd6c16-9661-4f61-b7a9-64df8c1e4586.png"><br>
## 備考・注意事項

- 現在 β 版で、まだ実験的なプロダクトです。当初よりかなり安定してきましたが、まだ保証ができる状態ではありません。
- まだ安定しているとは言えませんが、それでも構わない方のみ導入してください。
- 使い方などの説明も用意できていないため、自力でトラブルに対処できるエンジニアの方以外には現状おすすめできません。
- 今後インストーラーを開発予定ですが、後述の通り現時点ではインストール方法がかなり煩雑になっています。他の環境でちゃんと動作するのかさえも微妙です。
- 完成予想はおろか、TVRemotePlus で実装していた機能に関してもまだ完全にカバーできていないため、現時点で TVRemotePlus を代替できるレベルには達していません。
- TVRemotePlus の後継という位置づけのソフトですが、それはあくまで精神的なものであり、実際の技術スタックや UI/UX はゼロから設計されています。
- 確かに TVRemotePlus の開発で得られた知見を数多く活用していますし開発者も同じではありますが、ユーザービリティや操作感は大きく異なると思います。
- TVRemotePlus の技術スタックでは解決不可能なボトルネックを根本的に解消した上で、「同じものを作り直す」のではなく、ゼロから新しいテレビ視聴・録画視聴のユーザー体験を作り上げ、追求したいという想いから開発しています。
- どちらかというと録画視聴機能の方がメインの予定でいますが、前述のとおり、現時点ではテレビのライブ視聴機能のみの実装です。構想は壮大ですが、全て実装し終えるには年単位で時間がかかるでしょう。
- 今のところ、スマホ・タブレットは横画面表示のみ対応しています。将来的には縦画面でも崩れずに表示できるようにする予定です。
- タブレットは Fire HD 10 (2021), iPad mini 4, iPad mini 6 で動作することを確認済みです。
- スマホ(横画面)は実験的なもので、今後 UI が大幅に変更される可能性があります。
- iPhone は Media Source Extensions API に対応していないため、現時点では動作しません。
- 今後 LL-HLS 再生モードを実装する予定ですが、私が iPhone を常用していない事もあり、実装時期は未定です。
- また、iPad でホーム画面に追加したアイコンから単独アプリのように起動した場合も (PWA)、同様に動作しません。
- 今後、開発の過程で設定や構成が互換性なく大幅に変更される可能性があります。
- ユーザービリティなどのフィードバック・不具合報告・Pull Requests (PR) などは歓迎します。
- 技術スタックはサーバー側が Python + [FastAPI](https://github.com/tiangolo/fastapi) + [Tortoise ORM](https://github.com/tortoise/tortoise-orm) + [Uvicorn](https://github.com/encode/uvicorn) 、クライアント側が Vue.js + [Vuetify](https://github.com/vuetifyjs/vuetify) の SPA です。
- Vuetify は補助的に利用しているだけで、大部分は独自で書いた SCSS スタイルを適用しています。
- コメントを多めに書いたりそれなりにきれいにコーディングしているつもりなので、少なくとも TVRemotePlus なんかよりかは読みやすいコードになっている…はず。
- 他人が見るために書いたものではないのであれですが、一応自分用の [開発資料](https://mango-garlic-eff.notion.site/KonomiTV-90f4b25555c14b9ba0cf5498e6feb1c3)[DB設計](https://mango-garlic-eff.notion.site/KonomiTV-544e02334c89420fa24804ec70f46b6d) 的なメモを公開しておきます。もし PR される場合などの参考になれば。

## 事前準備

### ドライバ
<img width="100%" src="https://user-images.githubusercontent.com/39271166/153729029-bbcd6c16-9661-4f61-b7a9-64df8c1e4586.png"><br>

### チューナーのドライバ変更

必須ではありませんが、Windows で PLEX 製チューナーを利用している場合は、事前にドライバを [px4_drv for WinUSB](https://github.com/tsukumijima/px4_drv) に変更しておくことを推奨します。
px4_drv では公式ドライバと比べてチューナーの起動時間が大幅に短縮されています。その分 KonomiTV での視聴までにかかる待機時間も速くなるため(5秒以上速くなる)、より快適に使えます。
Expand Down Expand Up @@ -154,10 +154,10 @@ Mirakurun または EDCB から局ロゴを取得できなかった場合は、
> 同梱されているロゴは `server/data/logo/``NID(ネットワークID)-SID(サービスID).png` として、256×256 のフォーマットで保存されています。
> チャンネルのネットワーク ID とサービス ID がわかっていれば、自分で局ロゴ画像を作ることも可能です。
<img width="100%" src="https://user-images.githubusercontent.com/39271166/153729193-7a616b29-d437-45dd-bafc-f930b56dd580.png"><br>

## インストール方法(暫定)

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153729193-7a616b29-d437-45dd-bafc-f930b56dd580.png"><br>

以下は暫定的なインストール方法です。将来的にはインストーラーでインストールできるようにする予定ですが、現時点では煩雑な手順になっています。
すべての環境でこの通りに進めて動くとは限りません。保証もできないので、すべて自己責任のもとでお願いします。

Expand All @@ -184,7 +184,7 @@ VCEEncC に関しても対応済みのつもりですが、手元に環境がな

事前に、後述の設定ファイルの編集を行ってください。最低でも config.yaml が存在する状態にしておく必要があります。

あとは他のソフトウェアと同様に、`docker-compose up` を実行するだけで、KonomiTV のサーバーが起動します。他のインストール手順は実行不要です
あとは他のソフトウェアと同様に、`docker-compose up` を実行するだけで、KonomiTV のサーバーが起動します。これでインストールは完了です
バックグラウンドで常時起動させたいときは、`docker-compose up -d` と実行してください。

### 1. pipenv のインストール
Expand Down Expand Up @@ -314,10 +314,10 @@ rm ./data/database.sqlite
pipenv run aerich upgrade
```

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153728655-afe25279-2d42-4150-bfdf-71de62dde44d.jpg"><br>

### 6. 設定ファイルの編集

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153728655-afe25279-2d42-4150-bfdf-71de62dde44d.jpg"><br>

ここまで手順通りにやっていれば Readme.md のあるフォルダに config.example.yaml があるはずなので、**同じ階層に config.yaml としてコピーします。**
設定ファイルは YAML ですが、JSON のようなスタイルで書いています。括弧がないとわかりにくいと思うので…

Expand Down Expand Up @@ -385,10 +385,10 @@ API ドキュメント (Swagger) は http://localhost:7000/api/docs にありま

とはいえ最低限視聴できる状態にはなっているはずです。まずは使ってみて、もしよければ感想をお聞かせください。

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153728574-e9ea2938-89ca-4f0d-81f4-3987b08adcf2.png"><br>

## 開発者向け情報

<img width="100%" src="https://user-images.githubusercontent.com/39271166/153728574-e9ea2938-89ca-4f0d-81f4-3987b08adcf2.png"><br>

### サーバー

Uvicorn は ASGI サーバーで、FastAPI で書かれた KonomiTV のアプリケーションサーバーを実行します。
Expand All @@ -413,6 +413,14 @@ API サーバーは別のポート (7000) でリッスンされているので
クライアントの静的ファイルは、`client/dist/` に配置されているビルド済みのものをサーバー側で配信するように設定されています。
そのため、`yarn build` でクライアントのビルドを更新したのなら、サーバー側で配信されるファイルも同時に更新されることになります。

## Special Thanks

- [xtne6f](https://github.com/xtne6f) さん: KonomiTV と EDCB を連携するための実装や、[tsreadex](https://github.com/xtne6f/tsreadex) の実装の依頼・開発などで多大なご協力をいただきました。
- [rigaya](https://github.com/rigaya) さん: QSVEncC・NVEncC・VCEEncC での動作オプションや不具合の対応、エンコードパラメーターのアドバイスなどを支援していただきました。
- [xqq](https://github.com/xqq/mpegts.js) さん: [mpegts.js](https://github.com/xqq/mpegts.js) で MPEG-TS をダイレクトストリーミングできるようになり、わずか最短 1.5 秒の低遅延でテレビを視聴することができるようになりました。mpegts.js のヘルプやプレイヤーへの導入のサポートなども支援していただきました。

KonomiTV の開発にあたり、ほかにも多くの方からサポートやフィードバックをいただきました。この場をお借りして厚く感謝申し上げます。

## License

[MIT License](License.txt)
1 change: 1 addition & 0 deletions client/dist/assets/css/app.7b2ec17c.css

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion client/dist/assets/css/app.7dbdd8c6.css

This file was deleted.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Open+Sans:wght@600;700&display=swap"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp_s.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"><title>KonomiTV</title><link href="/assets/css/app.7dbdd8c6.css" rel="preload" as="style"><link href="/assets/css/chunk-vendors.8ef953e5.css" rel="preload" as="style"><link href="/assets/js/app.d1a5668b.js" rel="preload" as="script"><link href="/assets/js/chunk-vendors.9091e8fb.js" rel="preload" as="script"><link href="/assets/css/chunk-vendors.8ef953e5.css" rel="stylesheet"><link href="/assets/css/app.7dbdd8c6.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/icons/favicon-32px.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/icons/favicon-16px.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#0D0807"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="KonomiTV"><link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png"><meta name="msapplication-TileColor" content="#000000"></head><body style="background:#1E1310;color:#FFEAEA;"><noscript><strong>We're sorry but KonomiTV doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/assets/js/chunk-vendors.9091e8fb.js"></script><script src="/assets/js/app.d1a5668b.js"></script></body></html>
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Open+Sans:wght@600;700&display=swap"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp_s.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"><title>KonomiTV</title><link href="/assets/css/app.7b2ec17c.css" rel="preload" as="style"><link href="/assets/css/chunk-vendors.8ef953e5.css" rel="preload" as="style"><link href="/assets/js/app.bf991577.js" rel="preload" as="script"><link href="/assets/js/chunk-vendors.9091e8fb.js" rel="preload" as="script"><link href="/assets/css/chunk-vendors.8ef953e5.css" rel="stylesheet"><link href="/assets/css/app.7b2ec17c.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/icons/favicon-32px.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/icons/favicon-16px.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#0D0807"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="KonomiTV"><link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png"><meta name="msapplication-TileColor" content="#000000"></head><body style="background:#1E1310;color:#FFEAEA;"><noscript><strong>We're sorry but KonomiTV doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/assets/js/chunk-vendors.9091e8fb.js"></script><script src="/assets/js/app.bf991577.js"></script></body></html>
Loading

0 comments on commit f1f3b01

Please sign in to comment.