Reactjs - フラスコを使用してプライベート S3 バケットに保存された 1 GB のビデオ ファイルを React js フロントエンドに表示します

okwaves2024-01-25  7

reactjs で大きなビデオ ファイルを表示/ストリーミングする必要があります。これらのファイルは、ユーザーが反応フォームとフラスコを使用してプライベート s3 バケットにアップロードされています。

getObject メソッドを試しましたが、ファイル サイズが大きすぎます。署名付き URL を取得するメソッドでは、ファイルをダウンロードする必要がありました。

私は AWS-python-react セットアップを初めて使用します。 React で大きなビデオ ファイルを表示するための最良/最も効率的/低コストのアプローチは何ですか?



------------------------

AWS は他のストリーミング固有のサービスを提供していますが、それらを S3 から取得したい場合は、適切なクライアント/ビデオプレーヤーを使用して torrent を使用してファイルを取得できます。ファイル全体をダウンロードしなくても、再生を開始できます。

Python を使用していると述べたので、次のように AWS SDK を使用してこれを行うことができます。

import boto3

s3 = boto3.client('s3')
response = client.get_object_torrent(
    Bucket='my_bucket',
    Key='/some_prefix/my_video.mp4'
)

応答オブジェクトの形式は次のとおりです。

{
    'Body': StreamingBody()
}

完全なドキュメントはこちらです。

その後、Webtorrent などを使用してフロントエンドでストリーミングできます。

このアプローチについて注意すべき 2 つの点 (ドキュメントを引用):

Amazon S3 は、2016 年 5 月 30 日以降に開始された AWS リージョンでは BitTorrent プロトコルをサポートしていません。 サイズが 5 GB 未満のオブジェクトの torrent ファイルのみを取得できます。

7

やあ、ありがとう。以前は firebase を使用していました。誰かが私に s3 を使用することを提案しました (s3 は firebase より安いため)。他のストレージ オプションも検討することに前向きです。

– jsdbt

2020 年 9 月 5 日 5:17

1

Np.オブジェクト ストレージ ソリューションとしての S3 は、実際には優れた費用対効果の高い提案ですが、それ自体はユースケースにとって最良の選択肢ではありません。プロジェクトの範囲についてはわかりませんが、特に CloudFront を検討する必要があります。これは、特に、S3 をオリジンとする RTMP (ストリーミング) ディストリビューション。つまり、S3 にファイルを保存し、そのストレージ機能を活用しながら、CDN と S3 の利点も活用できます。ストリーミング。

– アンドレ.IDK

2020 年 9 月 5 日 14:28

ありがとう。確認してみます。また、さらなるコンテキストが役立つ場合は、各ユーザーが最大 30 GB (月あたり) を占めるビデオ ファイルをアップロードできると仮定します。そして、これらのビデオはすべてreactjsで表示されます。 1 か月あたり最大 1,000 人のユーザーを抱えることができると仮定します。

– jsdbt

9月2020 年 6 月 6 日、6:09

新しい情報があっても、私は以前の回答/コメントを支持します。

– アンドレ.IDK

2020 年 9 月 7 日 10:11

こんにちは、ビデオファイルがreactjs codepen.io/drngke/pen/abNGbEgに読み込まれていません

– jsdbt

2020 年 9 月 11 日 11:37

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。