VonageビデオAPIでビデオにオーバーレイを加えてください

15373 ワード
video javascript api テキストリンク
Vonageのビデオ出版社を作成するときは、ビデオストリームを直接ユーザーからのカメラからソース<video> 要素、あるいはHTML<canvas> 要素.ピクセルがキャンバスに描画されると、ビデオAPIセッションで使用する前に簡単に操作できます.
このチュートリアルでは、あなたのビデオの呼び出しに含めることができますあなたのカメラのイメージにテキストや画像のオーバーレイを追加する方法を学びます.
プロジェクトを作成するにはいくつかのコンポーネントが必要です.第一に<video> 要素はユーザーのカメラからストリームを受け取ります.各フレームは、ビデオ要素はキャンバスに描画され、そこで我々はテキストまたは画像を追加します.キャンバスの我々の望ましい出力で、我々はVonageビデオAPI Publisherのための源としてキャンバスを使うことができます.
あなたが完成したコードを見たいならば、あなたはそれを見つけることができますhttps://github.com/nexmo-community/video-overlay .

足場マークアップ


新しいプロジェクトのフォルダに新しいファイルインデックスを作成します.このファイルを次のコードで設定する
<!DOCTYPE html>
<html>
<head></head>
<body>
  <video id="v1" width="320" height="240" autoplay></video>
  <canvas id="c1" width="320" height="240"></canvas>
  <canvas id="c2" width="320" height="240"></canvas>
  <div id="vonage-publishers"></div>
  <div id="vonage-subscribers"></div>
  <script>
    // Create references to the video and canvas elements
    const v1 = document.getElementById('v1')
    const c1 = document.getElementById('c1')
    const c2 = document.getElementById('c2')
    // Get canvas contexts
    const c1Ctx = c1.getContext('2d')
    const c2Ctx = c2.getContext('2d')
  </script>
</body>
</html>
このチュートリアルでは、テキストを最初のキャンバスに追加しますc1 そして、第2のキャンバスへのイメージオーバーレイc2 .

ウェブカメラ


設定する<video> ユーザーのウェブカメラからのストリームへの要素のソース.このスニペットはデフォルトのカメラを選択します.
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => { v1.srcObject = stream })

実行毎フレーム


空を作るaddText() 関数.一旦ユーザのビデオ装置が準備ができて、『遊ぶ』ならば、あらゆるフレームに機能を走らせてください
v1.addEventListener('play', () => {
  setInterval(addText, 0)
  setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}

ビデオストリーム＆テキストをキャンバスに描画


更新addText() :
function addText() {
  // User Video
  c1Ctx.drawImage(v1, 0, 0, 320, 240)
  // Rectangle
  c1Ctx.beginPath();
  c1Ctx.fillStyle = "#584fa8";
  c1Ctx.rect(0, 190, 155, 40); // x, y of top-left, width, height
  c1Ctx.fill();
  // Text
  c1Ctx.font = "20px Monospace";
  c1Ctx.fillStyle = "white";
  c1Ctx.fillText("Kevin Lewis", 10, 215); // x, y of top-left
}
ブラウザをリフレッシュし、テキストをキャンバス上に重ねて表示する必要があります.

ビデオストリームとイメージをキャンバスに描く


まず、あなたのトップで<script> タグ、オーバーレイに使用するイメージの読み込み:
const overlayImg = new Image()
overlayImg.src = 'vonage.png'
その後、更新addImage() :
function addImage() {
  // User Video
  c2Ctx.drawImage(v1, 0, 0, 320, 240)
  // Overlay Image
  c2Ctx.drawImage(overlayImg, 10, 10, 35, 30) // x, y of top-left, width, height
}
ページは次のようになります.

ビデオAPIセッションにキャンバスを含める


新しいプロジェクトを作成するVonage Video Dashboard . 一度作成、プロジェクトツールにスクロールダウンし、新しいルーティングセッションを作成します.セッションIDを受け取り、新しいトークンを作成します.
あなたのトップで<script> , つの新しい変数をプロジェクトダッシュボードからデータを作成します
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'
次に、<script> からのタグVonage Video API Client SDK page そして、あなたの既存の上に置く<script> タグ.
あなたの下に<script> タグ、基本的なVonageビデオAPIセッションを初期化し、2番目のキャンバスから公開します.
// Initialize session
const session = OT.initSession(apiKey, sessionId)
// Create publisher
const publisher = OT.initPublisher("vonage-publishers", {
  // c1 is the text canvas. Substitute c2 if you want to use the overlay canvas.
  videoSource: c1.captureStream().getVideoTracks()[0],
  width: 320,
  height: 240
})
// Once connected to session, publish the publisher
session.connect(token, () => {
  session.publish(publisher)
})
// Show other users' streams
session.on('streamCreated', event => {
  session.subscribe(event.stream, "vonage-subscribers")
})

エレメントを隠す


The <video> and <canvas> 要素は、この作業を行うために必要ですが、おそらく、それらをあなたのウェブページで表示したくないでしょう.あなたの<head> , 次のcssを追加して隠します.
<style>
  #v1, #c1, #c2 { display: none }
</style>

どのようにあなたのビデオをスプルース？


うまくいけば、あなたはこのブログのポストが役に立つと今すぐあなたの心のコンテンツにカスタムオーバーレイを作成することができます.イメージのサイズと位置を変更するか、ユーザーが自分で編集できるようにすることもできます.
あなたは最終的なプロジェクトを見つけることができますhttps://github.com/nexmo-community/video-overlay .
今までのように、任意のサポートを必要とする場合はVonage Developer Community Slack . そこにお会いしましょう.
第2週-3配列、オブジェクト
210722