JavaScript

CSSのカスタマイズ

この時点で、Vonage Videoを使ったクライアントの完成です。この最後のステップでは、"ピクチャー・イン・ピクチャー "レイアウトを作成するための基本的なCSSカスタマイズについて説明します。

  1. 空白のapp.cssファイルをコードエディターで開き、以下のコードを追加する：
body, html {
    background-color: gray;
    height: 100%;
}

#videos {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#subscriber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#publisher {
    position: absolute;
    width: 360px;
    height: 240px;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    border: 3px solid white;
    border-radius: 3px;
}
  1. CSSを保存したら、2つの別々のブラウザ・タブでインデックスを再び開いてください。2つのビデオ・ストリームが表示されるはずですが、1つはより小さく、より大きなビデオ・ストリームの中に入れ子になっています。

上のCSSを見ると、これは #publisher div.この「ピクチャ・イン・ピクチャ」レイアウトは、ビデオチャットでは一般的な方法ですが、CSSを自由に調整して、これらのdivのサイズや位置を好きなだけ弄ってください。

基本的なビデオチャット

Vonage Video API プラットフォームの基本概念（ビデオ、音声、メッセージングによるユーザ間のコミュニケーション方法など）を学びます。Vonage Video API の基本的なフローを説明します。

手順
1
概要
2
始める前に
3
Vonageビデオアプリケーションの設定
4
プロジェクトフォルダーとHTMLテンプレートの作成
5
認証の設定
6
セッションへの接続とパブリッシャの作成
7
加入者の初期化
8
ブラウザでコードをテストする
9
CSSのカスタマイズ
10
結論