シェア:
){kind=small}
Vonageの元デベロッパー・アドボケイトで、ロンドンの地元テック・コミュニティをサポートする役割を担っていた。彼は経験豊富なイベントオーガナイザーであり、ボードゲーマーであり、ムーというかわいい犬のパパでもある。また、You Got This（幸せで健康的な仕事生活に必要なコア・スキルに関するイベント・ネットワーク）のリード・オーガナイザーでもある。
Vonage Video APIでビデオにオーバーレイを追加する
所要時間：1 分
Vonage Video パブリッシャーを作成する際、Video ストリームはユーザーカメラ、エレメント、HTML エレメントから直接取得できます。ピクセルがキャンバスに描画されると、Video API セッションで使用する前に簡単に操作できます。
このチュートリアルでは、ビデオ通話で使用するカメラ画像に、テキストや画像のオーバーレイを追加する方法をご紹介します。
このプロジェクトを動かすには、いくつかのコンポーネントが必要だ。まず、エレメントがユーザーのカメラからのストリームを取り込みます。各フレームの Video 要素は canvas 上に描画され、そこにテキストや画像を追加します。キャンバス上に希望の出力があれば、キャンバスを Vonage Video API パブリッシャのソースとして使用し、友人とのビデオセッションで使用することができます。
完成したコードをご覧になりたい方は、以下をご覧ください。 https://github.com/nexmo-community/video-overlay.
新しいプロジェクト・フォルダーを作成し、index.htmlを作成する：
<!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>
このチュートリアルでは、1つ目のキャンバスにテキストを追加し、2つ目のキャンバス c1にテキストを追加し、2 番目のキャンバスに画像のオーバーレイを追加します。 c2.
要素のソースを <video>要素のソースをユーザーのウェブカメラからのストリームに設定します。このスニペットはデフォルトのカメラを選択します：
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { v1.srcObject = stream })
空の addText()関数を作成する。ユーザーのVideoデバイスが準備できて「再生」したら、関数を毎フレーム実行する：
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
}あなたのページはこのように見えるはずだ：
で新しいプロジェクトを作成します。 ビデオダッシュボードで新しいプロジェクトを作成します。.作成後、Project Toolsまでスクロールダウンし、新しいRoutedセッションを作成します。セッションIDを取得し、新しいトークンを作成します。
プロジェクトのトップに <script>の一番上に、プロジェクト・ダッシュボードからのデータで3つの新しい変数を作成します：
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'次に <script>タグを Vonage Video API Client SDKページからタグをコピーします。ページからタグをコピーし、既存の <script>タグの上に置きます。
タグの一番下にある <script>タグの下部で、基本的な Video 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")
})
その <video>要素と <canvas>要素はこの機能を実現するために必要だが、おそらくウェブページでは表示したくないだろう。あなたの <head>で、それらを隠すために以下のCSSを追加してください：
<style>
#v1, #c1, #c2 { display: none }
</style>
このブログ記事がお役に立ち、心ゆくまでカスタムオーバーレイを作成できることを願っています。画像のサイズや位置を変更したり、ユーザーが自分で編集できるようにすることもできます。
最終プロジェクトは下記でご覧いただけます。 https://github.com/nexmo-community/video-overlay.
これまで通り、サポートが必要な場合はお気軽に Vonage開発者コミュニティSlack.そこでお会いできることを楽しみにしています。