シェア:
){kind=small}
クリスはデベロッパー・リレーションズ・ツーリング・マネージャーで、お気に入りのツールを開発するチームを率いています。彼は15年以上、クライアントワークからビッグデータ、大規模システムに至るまで、様々な言語と種類のプロジェクトでプログラミングをしてきました。オハイオ州に住み、家族と過ごしたり、ビデオゲームやTTRPGゲームをしたりしている。
React用Vonage Videoリファレンスアプリを始める
所要時間：1 分
私たちは、できるだけ早くAPIを使えるようになってほしいと願っていますが、時にはそれが大変な作業に思えることもあります。一部のAPIは1、2行のコードで済みますが（私はあなたを見ています メッセージAPI)、いくつかのAPIは、その性質上、より多くのセットアップを必要とします。Vonage Video APIは、より困難と思われるAPIの1つです。
恐れることはない！私たちは サンプルバックエンドそして フロントエンドのサンプルコードがあるだけでなく、より完全な機能を持つアプリケーションを見たい、あるいは始めたいと思うかもしれません。そのために React用Vonageビデオ・リファレンス・アプリケーション.これは、すぐに使えるように設計されたアプリケーションで、独自のアプリケーションを構築する方法を学んだり、独自のニーズの基礎として使用したりすることができます。
わずか数分でリファレンス・アプリケーションをチェックアウトする2つの異なる方法を提供します。この記事が終わるころには、React用リファレンス・アプリケーションの実行バージョンが、当社のクラウド・ランタイム・ホスティング製品またはローカル・マシンのいずれかで実行されていることでしょう。
ローカル・マシンでアプリケーションを実行したくない、または実行できない場合は、Vonageのクラウド・ランタイム・プラットフォームを使用して、アプリケーションの実行を処理し、リファレンス・アプリでアプリケーションを見て回る間、アプリケーションのホスティングを提供することができます。これにより、コードをデプロイするためのブラウザ内エディターとシステムが起動します。ブラウザ内でエディタを起動するため、ChromeまたはChromeベースのブラウザを使用することを推奨します。
Cloud Runtimeでアプリケーションを実行する：
をご覧ください。 React 用 Vonage Video API リファレンス・アプリケーションページをご覧ください。
サインインしていない場合は、「サインインして始める」をクリックしてください。
ページの見出しのすぐ下にある "Get Code "タブをクリックする。
新しい開発環境を作成する」ボタンをクリックします。
リージョンを選択し、ワークスペース名を "Video-reference-demo "のように入力し、"Continue "をクリックする。
Cloud Runtimeは、コードエディタを備えたワークスペースを作成し、プロジェクトの認証をすべて設定します。
上部のナビゲーションバーから「表示」を選択し、「ターミナル」をクリックしてワークスペースのターミナルを表示します。
でアプリケーションを実行する。
yarn deploy-vcr.
Cloud Runtimeのコードエディタでは、サードパーティCookieを有効にする必要がある場合があり、ブロックされていることが検出されると、有効にする方法を説明するポップアップが表示される場合があります。これはVisual Studio Codeウェブエディタ自体によるもので、サードパーティCookieを有効にしないと、Cloud Runtimeの使用に影響が出る可能性があります。これがプライバシーの問題になる場合は、コードをローカルまたはサーバーで実行する方法を確認してください。
Cloud Runtimeはプロジェクトをパッケージ化し、ホスティング・プラットフォームに送信し、アプリケーションをビルドします。これには数分かかる場合があります。完了すると、次のような画面が表示されます：
/-------
| インスタンスがデプロイされました！
| インスタンスID: 503d54fc-5bec-xxxx-xxxx-24fb10ee0e48
| インスタンスサービス名：neru-xxxxxxx-vonage-video-react-app-vonage-video-react-app
| インスタンスホストアドレス： https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud
\-------一番最後には、実行中のインスタンスへの URL を指定します。 https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud.このURLをコピーして、新しいタブまたはウィンドウを開き、アドレスバーに貼り付けてください。リファレンスアプリのスタート画面が表示されるはずです：
Vonage Video Reference App for React Landing Page
リファレンスアプリを使い始めて、どのような機能が含まれているかを確認し、あなたのプロジェクトの基盤として機能するかどうかを評価することができます。新しいルームを作成し、ビデオ会議で利用可能な機能をチェックし、さらに人々を招待することができます。私たちのビデオプラットフォームが提供するほぼすべての主要な機能が利用可能です。
Cloud Runtimeに戻ってコードを調べることができます。これにより、アプリケーションを自分のニーズに合わせてカスタマイズしたり、コードのさまざまな部分がどのように機能するかを確認したりできます。
コードに変更を加えた場合は、単純に yarn deploy-vcrを実行するだけで、変更をホスティング・プラットフォームにデプロイすることができます。ファイルを編集してもすぐには利用できないので、ブラウザで利用できるようにする前にコードをデプロイする必要があります。
コードを編集したり再デプロイするためにコード・ビューに戻りたい場合は、自分の ワークスペースページにアクセスすると、ワークスペースのカードが表示されます：
Example Instance Card for the Reference App in Cloud Runtime
タイルをクリックすればコードそのものを見ることができるが、実行中のインスタンスを見たいだけなら、ケバブメニュー（右上の3つの丸）をクリックして、"URLをコピー "をクリックすればいい。
ローカルで実行するには、以下のものがプリインストールされている必要がある：
コマンドライン・ターミナル
Vonageアプリケーションとそれに関連する秘密鍵
これらの説明は、ローカルターミナルがインストールされ、シェルの使い方の基本的な知識があることを前提としています。コマンド例は、Linux、WSL、または macOS ターミナルで動作するはずです。PowershellやCMDを使用している場合は、コマンドを修正する必要があるかもしれません。
Vonage アプリケーションの作成は、Vonage Dashboard または Vonage CLI.
すべての前提条件をインストールしたら
に向かってください。 vonage-video-react-appへどうぞ。 GitHub リポジトリ
緑色の "Code" ボタンをクリックし、表示されるドロップダウンでアドレスの横にある "Copy" アイコンをクリックします。GitHub にログインしている場合は SSH アドレスが、ログアウトしている場合は HTTPS アドレスが表示されるかもしれません。どちらでも構いません。
PCでターミナル・ウィンドウを開く。
リファレンス・アプリケーションをインストールするディレクトリに移動します。
リファレンス・アプリケーション・プロジェクトのクローンを作成します。
git cloneと、先ほどコピーしたアドレス：
ギット クローン git@github.com:Vonage/vonage-video-react-app.git
ディレクトリを
vonage-video-react-app/ディレクトリに変更する。デフォルトの設定ファイルをコピーする。UNIXマシンではcpを使う。
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
ファイルを開き
backend/.env/ファイルを開き、アプリケーションIDと秘密鍵を使って以下の2行を編集する。この2行はファイルの先頭付近にあるはずです。
vonage_app_id=''
vonage_private_key=''
クローンしたプロジェクトのルートに、依存関係をインストールする：
ヤーン
開発サーバーを実行する：
糸開発
アプリケーションのブートストラップが終了すると、訪問する「ローカル」アドレスが表示されます。あなたのマシンで他に何も起動していなければ、次のアドレスにアクセスできるはずです。
http://localhost:5173/にアクセスし、部屋の作成画面を見ることができるはずです：
どの方法でリファレンス・アプリケーションをインストールして使用することにしても、自由にコードを探求し、実験することができます。Reactを使って様々なフロントエンドのオプションを実装する方法や、管理機能をすべて処理するバックエンドサーバーをセットアップする方法をチェックできます。
リファレンスアプリについて私たちとおしゃべりしませんか？ 私たちの盛んな 開発者コミュニティでフォローしてください。 X(旧 Twitter)でフォロー、または 開発者向けニュースレター.つながりを保ち、進捗を共有し、最新の開発者向けニュース、ヒント、イベントを入手しましょう！