クリップ用の自己ホスト可能な TikTok フィード
自分のビデオを使って TikTok フィードを作成する
Erin は、TikTok のよく知られた垂直スワイプ フィードを使用して自分のクリップを表示できる、シンプルで自己ホスト可能なサービスです。 TikTokのインターフェースを使ってフィルタリングされたビデオを表示できる自己ホスト可能なアプリのリクエストがRedditにあったので、作成しました。
Erin には次の機能がすべて実装されています。
これらに加えて、Erin は完全に Caddy によって提供される React アプリにすぎないことに注意してください。 Caddy は、認証、静的ファイルの提供、React アプリの提供をすべて一度に処理します。
*: ビデオをマスクしてフィードから非表示にすることができます。どのビデオがマスクされているかを確認したり、マスクを解除したりしたい場合は、
Mask
ボタンを長押しするとマネージャーが開きます。
**: デフォルトでは、Erin はフォルダーとそのサブディレクトリ内のすべてのビデオからランダム フィードを作成します。ただし、カスタム フィード (プレイリスト) を作成したい場合は、サブディレクトリを作成し、それに応じてビデオを整理できます。例:
https://my-server.tld/directory-a
/directory-a
ディレクトリにあるビデオからフィードを作成し、任意のパスで機能します (そのため、ネストされたフォルダーがサポートされます)。
***: メタデータ ファイルを使用して、すべてのビデオのチャンネル (アバターと名前付き)、キャプション、リンクを表示できます。メタデータ ファイルはビデオ フォルダー内のどこにでも配置でき、拡張子を JSON に置き換えて、関連するビデオのファイル名と一致する必要があります。例:
my-video.mp4
にはmy-video.json
にメタデータを含めることができます。メタデータ形式はここに示されています。また、カスタム スタイルと効果のためにキャプションで生の HTML を使用できることに注意してください。
詳細については、「構成」を参照してください。
続行する前に、Docker、Docker Compose、またはスタンドアロン展開に関係なく、すべてのビデオ ファイルを含むvideos
ディレクトリが作成されていることを確認してください。後で、このディレクトリは Erin のインスタンスで利用できるようになります (ボリュームを Docker コンテナにバインドするか、ディレクトリを Caddyfile の隣に置くことによって)。
コマンド ラインで Docker を使用して Erin を非常に迅速に実行できます。
次のコマンドを使用できます。
# Create a .env file
touch .env
# Edit .env file ...
# Option 1 : Run Erin attached to the terminal (useful for debugging)
docker run --env-file .env -p < YOUR-PORT-MAPPING > -v ./videos:/srv/videos:ro mosswill/erin
# Option 2 : Run Erin as a daemon
docker run -d --env-file .env -p < YOUR-PORT-MAPPING > -v ./videos:/srv/videos:ro mosswill/erin
注:開始に役立つように、
sample.env
ファイルがリポジトリのルートにあります。
注:
docker run --env-file
使用する場合は、AUTH_ENABLED
とAUTH_SECRET
の周りの引用符を必ず削除してください。そうしないと、Docker によってバックグラウンドで実行される予期しない補間と型変換が原因でコンテナーがクラッシュする可能性があります。
すぐに開始できるように、いくつかのdocker-compose
ファイルの例が「examples/」ディレクトリにあります。
各例の説明は次のとおりです。
docker-compose.simple.yml
: docker-compose
ファイルで直接指定された環境変数を使用して、ポート 443 でフロントフェイシング サービスとして Erin を実行します。
docker-compose.proxy.yml
: ポート 443 でリッスンするプロキシの背後で、ポート 80 で実行される Erin のセットアップ。
docker-compose
ファイルが適切に作成されたら、次のコマンドを使用できます。
# Run Erin in the current terminal (useful for debugging)
docker-compose up
# Run Erin in a detached terminal (most common)
docker-compose up -d
# Show the logs written by Erin (useful for debugging)
docker logs < NAME-OF-YOUR-CONTAINER >
Erin を実行するには、 .env
ファイルに次の環境変数を設定する必要があります。
注:コマンドラインで提供される通常の環境変数も機能します
注:開始に役立つように、
sample.env
ファイルがリポジトリのルートにあります。
パラメータ | タイプ | 説明 | デフォルト |
---|---|---|---|
PUBLIC_URL | boolean | Erin のインスタンスにリモートでアクセスするために使用されるパブリック URL。 (標準の 80 または 443 でない場合は、HTTP / HTTPS とポートを含めてください。末尾のスラッシュは含めないでください) (Caddy の公式ドキュメントをお読みください) | https://ローカルホスト |
AUTH_ENABLED | string | 基本認証を有効にするかどうか。 (このパラメータは大文字と小文字が区別されます) (可能な値: true、false) | 真実 |
AUTH_SECRET | string | Erin のインスタンスを保護するために使用されるパスワードの安全なハッシュ。 | secure-password のハッシュ |
APP_TITLE | string | ブラウザのタブに表示するカスタム タイトル。 (ヒント: Erin に現在のビデオのタイトルを動的に表示させたい場合は、ここで[VIDEO_TITLE] を使用できます。) | Erin - 自分のクリップの TikTok フィード |
AUTOPLAY_ENABLED | boolean | 自動再生を有効にするかどうか。 (このパラメータは大文字と小文字が区別されます) (可能な値: true、false) | 間違い |
PROGRESS_BAR_POSITION | string | 進行状況バーを画面上のどこに配置するか。 (このパラメータは大文字と小文字が区別されます) (可能な値:bottom、top) | 底 |
ヒント:インスタンスの安全なハッシュを生成するには、次のコマンドを使用します。
docker run caddy caddy hash-password --plaintext " your-new-password "
注 :
docker-compose.yml
環境変数を使用する場合、パスワード ハッシュにドル記号が含まれている場合は、それらをすべて 2 倍にします。そうしないと、アプリがクラッシュします。たとえば、$ab$cd$efxyz
$$ab$$cd$$efxyz
になります。これは、docker-compose
文字列補間システムに関する注意事項によるものです。
Erin の実行中に問題が発生した場合は、発生する可能性のある次の一般的な問題を参照してください。
これらのどれもあなたのケースに当てはまらない場合は、お気軽に問題を開いてください。
Erin は Caddy Web サーバーの上に座っています。
結果として :
それ以外に、次の要件が満たされていることを確認してください。
Erin がプロキシなしのスタンドアロン アプリケーションとして実行される場合:
A erin XXX.XXX.XXX.XXX
for https://erin.your-server-tld
).env
ファイルが「構成」セクションに従って適切に構成されていることを確認してください。Erin が Docker 内またはプロキシの背後で実行される場合:
PUBLIC_URL
が.env
に適切に設定されていることを確認してください。いずれにせよ、重要な部分は設定と Caddy の公式ドキュメントを読むことです。
Erin がビデオ ファイルを提供するには、次の要件を遵守する必要があります。
.mp4
、 .ogg
、 .webm
のいずれかです。 (Web ブラウザーでサポートされている拡張子のみです。)/srv/videos
に配置されます。ビデオが Docker コンテナ内の適切な場所にあることを確認するには、次のことができます。
docker exec -it <NAME-OF-YOUR-CONTAINER> sh
を実行します。ls /srv/videos
を実行します。すべてが適切に構成されているにもかかわらず、Erin がまだビデオを見つけることができない場合は、リクエストが/media/
に送信されたときのブラウザーの Javascript コンソールとネットワーク タブの出力を含む問題を開いてください。ブラウザのキャッシュ、無効な構成、または無効な認証情報が原因である可能性があります。
現時点では、新しいビデオ ファイルを Docker でマウントされているビデオ ディレクトリに置くだけです。 Erin はこれらの新しいファイルを自動的に取得し、ブラウザを更新するとそれらが表示されます。
Erin は、ファイル名をインターフェースに表示するタイトルに自動的に変換します。
演算される変換は次のとおりです。
-
になります
__
-
になりますファイルに名前を付けるのに役立つ例をいくつか示します。
Vegas-trip__Clip-1.mp4
Vegas trip - Clip 1
になりますSpanish-language__Lesson-1.mp4
Spanish language - Lesson 1
Spiderman-1.ogg
がSpiderman 1
になるErin はブラウザを更新するたびにビデオ ファイルをランダムにシャッフルします。
そのため、ビデオが表示される順序は特に決まりはありません。
現時点では、Erin はサポートされている拡張子を持つビデオのみを取得しようとします。
サポートされている拡張子は、 .webm
、 .mp4
、および.ogg
です。
ただし、Safari は.ogg
サポートしていないようなので、これらのビデオは Safari ユーザーには無視されることに注意してください。
より多くの拡張機能 (特に Safari ユーザー向け) をサポートするためのアドバイスやアイデアがある場合は、お気軽に問題を開いてください。
Caddy が生成したパスワード ハッシュで Docker / Docker Compose を使用する場合、いくつかの注意点があるようです。
従うべきルールは次のとおりです。
docker run ... --env-file .env ...
使用すると、 AUTH_SECRET
には引用符がまったく含まれず、すべてのドル記号はエスケープなしでそのまま残される必要があります。または倍増docker-compose.yml
ファイル経由で Docker Compose を使用して Erin をデプロイした場合、 AUTH_SECRET
のドル記号は 2 倍になっている必要があります。例: i$am$groot
はi$$am$$groot
になります。ただし、パスワード ハッシュは次のコマンドで生成する必要があることに注意してください。
docker run caddy caddy hash-password --plaintext " your-new-password "
お気軽に問題を開いて、何が起こったのか、そしてあなたの環境について説明してください。
おいおい!感謝の意を表し、私たちの前進を助けてくれた人々やプロジェクトについて言及することは常に良い考えです。
これらのプロジェクトの背後にある個人/チームに深く感謝します。
Erin が気に入った場合、または何らかの形で役に立った場合は、Erin について言及することを忘れないでください。