序文
皆さんこんにちは、私は@小善学习です、友達は私をシャオ・ゼンと呼ぶこともできます〜
1 対 1 の音声通話とビデオ通話、および画面共有機能を実装する場合は、乳母レベルのチュートリアルであるこの記事を参照してください。ゼロから実装する必要はありません。簡単に実装できます。 SoundNet SDK を直接統合することから始めます。
この記事では、私が実際に遭遇したいくつかの問題を共有して、友人が落とし穴を回避できるようにします。記事の知識ポイントに間違いがある場合は、私を修正してください。一緒に学び、一緒に進歩しましょう〜
01 背景紹介
SoundNet では、両端に豊富なオーディオおよびビデオ SDK が用意されており、この記事では Web エンド SDK を使用します。
この記事では主に、SoundNet SDK を使用して Web 側のオーディオおよびビデオ通話と画面共有機能を実装する方法を友人と共有します. また、友人が落とし穴に足を踏み入れるのを記録して防止するために、実際に遭遇するいくつかの問題についても説明します.同時に、0から1までの実戦を共有することで、より多くの友人を助けることができることも願っています.
02 下準備
実際の戦闘の前に、次の準備が必要です。
• Npm & Node.js
• html & CSS & JavaScript などのフロントエンド開発基盤
• Shengwang アカウントの登録、Shengwang APPID、一時的なトークンの申請、詳細についてはShengwang プラットフォームの使用開始を参照してください。
Shengwang アカウントをお持ちでない場合は、こちらから無料で登録できます。各アカウントには、1 か月あたり 10,000 分の無料割り当てがあります。個人的な学習/デバッグであれば、時間は十分にあります。
私の個人的な開発環境、具体的な情報は次のとおりです。
• MacBook Pro
• Visual Studio Code: v1.75.1
• Npm: v8.19.3
• Node.js: v16.19.0 • Agora SDK: v4.2.1、ここから
SDK をダウンロードします。• Google Chrome: v110.0.5481.177
03 実習
[事前準備] により、関連する構成が完了し、既にApp ID、チャネル、一時的なトークン、SoundNet SDK が用意されています. この実際の戦闘では、主に、オーディオとビデオの通話と画面の 2 つのデモについて詳細に説明します。小麦を分け合う。
3.1 音声通話とビデオ通話を実現する
実際の戦闘を開始する前に、まずデモの構成構造体を宣言し、
以下の 5 つのファイルを含む Agora_VideoCall という名前のフォルダーを作成します。
• index.html: Web アプリケーションのユーザー インターフェイスの設計に使用
• index.css: Web ページ スタイルの設計に使用
• basicVideoCall.js: 主に AgoraRTCClient を介してオーディオおよびビデオ コール ロジック コードを実装
• AgoraRTC_N-4.2.1 .js: 音声ネットワーク オーディオおよびビデオ SDK
• アセット: サードパーティ ライブラリ、主にユーザー インターフェイスの設計に使用
index.html ファイルに Acoustics SDK をインポートします. 詳細については、詳細なコードを表示できます. 次に、オーディオとビデオの呼び出しと画面共有の実装ロジックについて詳しく説明します.
<script src="./AgoraRTC-N-4.2.1.js"></script>
3.1.1 オーディオとビデオの通話ロジックを実現する
以下のコードはすべてbasicVideoCall.jsのテキストに書かれています
1) 最初に AgoraRTC.createClient メソッドを呼び出してクライアント オブジェクトを作成します。つまり、クライアント オブジェクトを作成します。
var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
2) アプリ ID、トークン、チャネル、およびユーザー ID の変数を定義し、矢印機能を使用して、ページが呼び出されたときにオーディオおよびビデオ通話チャネルに参加します。
var options = {
appid: null,
channel: null,
uid: null,
token: null
};
$(() => {
var urlParams = new URL(location.href).searchParams;
options.appid = urlParams.get("appid");
options.channel = urlParams.get("channel");
options.token = urlParams.get("token");
options.uid = urlParams.get("uid");
if (options.appid && options.channel) {
$("#uid").val(options.uid);
$("#appid").val(options.appid);
$("#token").val(options.token);
$("#channel").val(options.channel);
$("#join-form").submit();
}
})
3) チャンネルに参加する
参加関数は、ローカルのオーディオおよびビデオ トラックを RTC チャネルに追加するように定義されています。このとき、アプリ ID、トークン、チャネル、およびユーザー ID を関数に渡す必要があります。ルームに参加した後、オーディオ トラックとビデオ トラックを公開する必要があるため、オーディオ トラックとビデオ トラックを作成する必要があります。これらのローカル オーディオ トラック オブジェクトとビデオ トラック オブジェクトをパラメーターとしてチャネルに公開するために publish メソッドが呼び出されます。
オーディオおよびビデオ トラックを作成するときは、最初にcreateMicrophoneAudioTrack を呼び出す必要があることに注意してください: マイクによって収集されたオーディオからローカル オーディオ トラック オブジェクトを作成し、次にcreateCameraVideoTrackを呼び出して、カメラによって収集されたビデオからローカル ビデオ トラック オブジェクトを作成します。( createCameraVideoTrackを最初に呼び出した場合、ローカルのビデオ プレビュー画面はページに表示されません)
作成後、play メソッドを呼び出してローカル プレビューを表示し、publish メソッドを呼び出して RTC チャネルに公開します。play メソッドと publish メソッドの使用には順序がなく、誰が最初に来るかは問題ではないことに注意してください。
async function join() {
[ options.uid, localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([
// 加入频道
client.join(options.appid, options.channel, options.token || null, options.uid || null),
// 创建本地音视频track
//AgoraRTC.createCameraVideoTrack(),
AgoraRTC.createMicrophoneAudioTrack(),
AgoraRTC.createCameraVideoTrack()
]);
localTracks.videoTrack.play("local-player");
$("#local-player-name").text(`localVideo(${options.uid})`);
await client.publish(Object.values(localTracks));
console.log("publish success");
}
4) チャネルのリモート ユーザー ロジックを追加または削除する
同じチャネルのリモート ユーザーをローカル インターフェイスに追加することを実現し、リモート ユーザーが公開をキャンセルすると、ユーザーはローカルから削除されます。
function handleUserPublished(user, mediaType) {
const id = user.uid;
remoteUsers[id] = user;
subscribe(user, mediaType);
}
function handleUserUnpublished(user, mediaType) {
if (mediaType === 'video') {
const id = user.uid;
delete remoteUsers[id];
$(`#player-wrapper-${id}`).remove();
}
}
5) リモート オーディオおよびビデオ ロジックをサブスクライブする
リモート ユーザーがオーディオとビデオを公開するとき、ローカル ユーザーはオーディオとビデオの呼び出しを実現するために、それにサブスクライブする必要があります。サブスクライブ関数では、リモート ユーザーのユーザー ID である 2 つのパラメーターを渡す必要があります。同じチャネルとリモートの mediaType と call play メソッドで、1 対 1 のマイク接続を実現するために、リモート ユーザーのオーディオとビデオを再生します。
async function subscribe(user, mediaType) {
const uid = user.uid;
// 订阅远端用户
await client.subscribe(user, mediaType);
console.log("subscribe success");
if (mediaType === 'video') {
const player = $(`
<div id="player-wrapper-${uid}">
<p class="player-name">remoteUser(${uid})</p>
<div id="player-${uid}" class="player"></div>
</div>
`);
$("#remote-playerlist").append(player);
user.videoTrack.play(`player-${uid}`);
}
if (mediaType === 'audio') {
user.audioTrack.play();
}
}
6) イベントを聞く
リモート ユーザーがオーディオ トラックとビデオ トラックを公開または非公開にする場合、ローカルはそれを監視する必要があります。参加関数では、client.on(“user-published”, handleUserPublished) イベントと client.on(“user-unpublished” 、handleUserUnpublished) イベント、次のように
client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished);
7) チャンネルを離れる
ユーザーが終了ボタンをクリックすると、ローカルおよびリモートのオーディオおよびビデオ トラックが停止します。
async function leave() {
for (trackName in localTracks) {
var track = localTracks[trackName];
if(track) {
track.stop();
track.close();
localTracks[trackName] = undefined;
}
}
3.1.2 デモ表示
次に、デモを実行し、APPID、トークン、チャネル、ユーザー ID を入力し、[参加] をクリックします。ローカル画面が表示されます。他のユーザーと接続する場合は、URL を再度コピーして、同じ APPID、トークン、チャネルを入力します、Lianmaiを実現できます。すぐに試してください。
3.2 マイクによる画面共有
画面共有とは、ローカル ユーザーの画面コンテンツを他のリモート ユーザーとビデオ イメージの形式で共有することです。その動作原理は、実際にはcreateScreenVideoTrackを介して画面共有ビデオ トラック オブジェクトを作成することです。スクリーン キャプチャ プロセス中に、ブラウザはどのスクリーンを共有する必要があるかを尋ね、エンド ユーザーの選択に従ってスクリーン情報を取得します。
上記のオーディオとビデオのデモに基づいて、画面共有機能を実現します。
3.2.1 画面共有 UI を追加する
ScreenShare ボタンを index.html ページに追加する
3.2.2 画面共有の実装ロジック
以下のコードはすべてbasicVideoCall.jsのテキストに書かれています
1) シェア機能の実装
上記の join 関数と同様に、主に画面共有を有効にしたり、 createScreenVideoTrackを使用して画面共有用のビデオ トラック オブジェクトを作成したり、ビデオ エンコーディングに関するいくつかの簡単な構成を実行したりするために使用されます。この関数は、リスナー イベントも追加する必要があります。
async function share() {
client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished);
let screenTrack;
[options.uid, localTracks.audioTrack, screenTrack] = await Promise.all([
client.join(options.appid, options.channel, options.token || null, options.uid || null),
AgoraRTC.createMicrophoneAudioTrack(),
AgoraRTC.createScreenVideoTrack({
encoderConfig: {
framerate: 15,
height: 720,
width: 1280
}
}, "auto")
]);
2) 画面共有のオーディオとビデオのトラックを追加し、play メソッドを呼び出して、ローカルの画面共有ビデオを再生します。
if(screenTrack instanceof Array){
localTracks.screenVideoTrack = screenTrack[0]
localTracks.screenAudioTrack = screenTrack[1]
}
else{
localTracks.screenVideoTrack = screenTrack
}
localTracks.screenVideoTrack.play("local-player");
$("#local-player-name").text(`localVideo(${options.uid})`);
3) 画面共有を公開する
ローカル オーディオと画面共有画像を RTC チャネルに公開します。
if(localTracks.screenAudioTrack == null){
await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack]);
}
else{
await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack, localTracks.screenAudioTrack]);
}
4) 共有機能の実装ロジックでは、「トラック終了」イベントをバインドする必要があります.画面共有が停止すると、アラームがエンドユーザーに通知されます.
localTracks.screenVideoTrack.on("track-ended", () => {
alert(`Screen-share track ended, stop sharing screen ` + localTracks.screenVideoTrack.getTrackId());
localTracks.screenVideoTrack && localTracks.screenVideoTrack.close();
localTracks.screenAudioTrack && localTracks.screenAudioTrack.close();
localTracks.audioTrack && localTracks.audioTrack.close();
});
3.2.3 デモ表示
画面共有がクリックされると、ユーザーは共有するページを選択するように求められ、デフォルトの音声オプションもあります.共有をクリックすると、画面共有を解除できます.
04 まとめ
オーディオ、ビデオ、および画面共有用の Web アプリケーションを実装する場合は、この記事 + Shengwang SDK から学習できます。あまり慣れていない場合は、最初に「クイック スタート - オーディオおよびビデオ通話の実装」を読むことができます。 Shengwang によって。
In practice, it should note that when creating an audio and video track, you need to call createMicrophoneAudioTrack first , and then call createCameraVideoTrack .最初にcreateCameraVideoTrackを呼び出すと、ローカル ビデオ プレビュー画面はページに表示されません。
一般的に、この記事で提供されているデモは比較的単純なものであり、仮想背景、AI ノイズ リダクションなどの他の機能を追加する場合は、これに基づいて引き続き機能を追加できます。
（本文終わり）
参考文献
•サウンド ネットワークのアカウントを登録します
•関連する SDK をダウンロードします
•クイック スタート - 音声通話とビデオ通話を実現します