Simplewebrtcを使用してWeBRTCビデオチャットアプリケーションを構築します-jsチュートリアル-php.cn

Building a WebRTC Video Chat Application with SimpleWebRTC

に基づいて、ライブビデオチャットアプリケーションを構築しますこの本「6 JavaScript Projects」には、この記事が含まれており、現代のJavaScript開発に関する洞察を得ることを目的としています。 WeBRTCの台頭と、リアルタイムのポイントツーポイント通信を処理するブラウザの能力が強化されているため、リアルタイムアプリケーションの構築はこれまで以上に簡単です。このチュートリアルでは、SimplewebrtcとWeBRTCの実装時に作業を簡素化する方法について説明します。プロセス全体を通して、メッセージング機能を備えたWeBRTCビデオチャットアプリケーションを構築します。 Webrtcとピアツーピア通信に関する背景知識が必要な場合は、「Dawn of Webrtc」と「Getusermedia APIの初心者」を読むことをお勧めします。

コアポイント

SimpleWebrtcは、WeBRTCの実装を簡素化し、ブラウザー固有のコードを作成せずに異なるブラウザで実行できるリアルタイムビデオおよびオーディオアプリケーションを簡単に作成できるようにするJavaScriptライブラリです。

このチュートリアルでは、SimpleWebrTCを使用してビデオチャットアプリケーションを構築する方法を示しています。これには、Expressサーバーで単一ページアプリケーションを設定し、依存関係管理にnode.jsとnpmが必要です。

重要な依存関係には、Simplewebrtc、スタイル設定のセマンティックUI CSS、dom OperationsのjQuery、テンプレート用のハンドルバー、およびWebサーバーとしての表現が含まれます。
アプリケーションは、チャットルームの作成と参加、メッセージの送信、複数のビデオストリームの処理をサポートし、Simplewebrtcが複雑なポイントツーポイント通信シナリオを管理する能力を実証します。
アプリケーションは、ZEITの
このチュートリアルは、ライブラリの使いやすさとクロスブラウザーの互換性を強調したSimplewebrtcを使用して、機能が豊富なリアルタイム通信アプリケーションを構築する方法に関する包括的なガイドを提供します。
now
継続する前に使用する主なツールを理解することが重要です。 SimpleWebrtcは、WeBRTCポイントツーポイントデータ、ビデオ、およびオーディオコールを簡素化するJavaScriptライブラリです。

SimpleWebrtcは、ブラウザWeBRTC実装のラッパーとして機能します。既にご存知かもしれませんが、ブラウザベンダーは、異なる機能を実装するための単一のアプローチに完全には同意しません。つまり、各ブラウザには異なるWeBRTC実装があります。開発者として、サポートする予定のブラウザごとに異なるコードを記述する必要があります。 Simplewebrtは、このコードのラッパーとして機能します。露出したAPIは使いやすく理解しやすいため、クロスブラウザーWeBRTCを実装するのに最適です。

webrtcビデオチャットアプリケーションをビルド

アプリを実践的に構築する時が来ました。 Expressサーバーで実行される単一のページアプリケーションを構築します。

このチュートリアルのコードをGitHubリポジトリからダウンロードできることに注意してください。それを実行したり、自宅でフォローしたりするには、ノードとNPMをインストールする必要があります。これらに慣れていない場合、またはインストールヘルプが必要な場合は、以前のチュートリアルをご覧ください：

nvm
npm Getting Guide Guide —Nodeパッケージマネージャー

ウェブカメラ付きのコンピューターまたはラップトップも必要です。そうでない場合は、モニターの上部に接続できるUSBウェブカメラが必要です。リモート接続をテストするには、友人または2番目のデバイスが必要になる場合があります。

依存関係

次の依存関係を使用してプロジェクトを構築します。

プロジェクトの設定

ワークスペースに移動して、

と呼ばれるフォルダーを作成します。 VSCODEまたはお気に入りのエディターでフォルダーを開き、次のファイルとフォルダー構造を作成します。 simplewebrtc-messenger

または、必要に応じて、コマンドラインを介して同じことができます：

<code>simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js</code>

ログイン後にコピー

<code>mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js</code>

ログイン後にコピー

を開いて、次のコピーをコピーします。

README.md

gitリポジトリを使用する予定がある場合は、

<code># Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.</code>

ログイン後にコピー

ファイルに

を追加します。次のコマンドを使用して、node_modulesファイルを生成します。 .gitignore package.json次の出力を取得する必要があります：

<code>npm init -y</code>

ログイン後にコピー

今すぐ依存関係をインストールしましょう：

{
  "name": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "A tutorial on building a WebRTC video chat app using SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ログイン後にコピー

インストール中に、このコードを

：

にコピーします

<code>npm install express handlebars jquery semantic-ui-css simplewebrtc</code>

ログイン後にコピー

サーバーコードは非常に標準です。コメントを読んで、何が起こっているのかを確認してください。 server.js

次に、

const express = require('express');

const app = express();
const port = 3000;

// 设置公共文件夹为根目录
app.use(express.static('public'));

// 从客户端提供对node_modules文件夹的访问
app.use('/scripts', express.static(`${__dirname}/node_modules/`));

// 将所有流量重定向到index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.listen(port, () => {
  console.info('listening on %d', port);
});

ログイン後にコピー

ファイルを設定しましょう：

（index.htmlコードをここに挿入する必要があります。スペースの制限のために、ここで省略しています。元のテキストを参照して完全なコードを取得してください）public/index.html

次に、基本的なクライアントJavaScriptコードを設定しましょう。このコードを：にコピーします

最後に、GitHubリポジトリからこの画像をダウンロードして、フォルダーに保存します。 public/js/app.js

ここで、アプリケーションを実行できます：

window.addEventListener('load', () => {
  // 将所有客户端代码放在这里
});

ログイン後にコピー

public/imagesブラウザでURLを開きます

、次のことを確認する必要があります。

（スペースの制限のために、ここに画像を挿入する必要があります。ここでは省略してください。元のテキストを参照して写真を取得してください）

<code>npm start</code>

ログイン後にコピー

localhost:3000

（以下のコンテンツは、元のテキスト構造に従ってコードセグメントを同様に処理し続けます。スペースの制限により、後続のコードセグメントと写真はすべてここで省略されています。完全なコードと完全なコードについては元のテキストを参照してください。写真。）

結論

このチュートリアルでは、Simplewebrtcとそれを使用してライブアプリケーションを作成する方法を学びました。具体的には、ユーザーがテキストを送信してリモートピアにビデオ通話を行うことができるメッセージングアプリケーションを作成しました。 SimpleWebrtcは、WebアプリケーションでWeBRTCを簡単に実装できる優れたクロスブラウザーライブラリです。

このチュートリアルで使用されているコードがGitHubで利用できることを忘れないでください。それをクローンし、何かクールなものを作成し、楽しんでください！

（FAQパーツはここで省略されています。スペースの制限のため、ここでは省略されています。完全なFAQコンテンツについては、元のテキストを参照してください。）

以上がSimplewebrtcを使用してWeBRTCビデオチャットアプリケーションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。