Agora.ioでカメラ映像にWaterMark(透かし)を入れる方法

8341 ワード
Agora.io JavaScript 初心者 WebRTC 透かし JavaScript テキストリンク

Agora.ioではWebSDKでカメラ映像を取得するAPIが用意されています。ですが、今回の件名にあるように少し映像を加工して配信したい場合もあります。
そのような要件に対応すべく、加工した映像を配信するAPIも用意されています。
この記事では例としてWaterMark(透かし)を入れる方法を解説します。

サンプルはGithubに公開しています。

実装方法

カメラ映像の取得

AgoraのAPIでカメラ映像取得する場合はcreateCameraVideoTrackを利用しますが、今回は加工をする為、getUserMediaを利用します。
canvas上にカメラ映像と画像を描画しています。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const canvasStream = canvas.captureStream(30);

//中略

async function createCustomVideo() {

  const video = document.createElement("video");
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 480, height: 320 }
  });

  var image = new Image();
  image.src = 'sakura.png';

  video.srcObject = stream;
  video.onloadedmetadata = () => {
    video.play();
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    render();
  };

  function render() {
    ctx.drawImage(video, 0, 0);
    ctx.drawImage(image, 0, 0, 150, 150);
    window.requestAnimationFrame(render);
  }

}

加工した映像の配信

加工した映像をcreateCustomVideoTrackに渡します。

  [ options.uid, localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([
    // join the channel
    client.join(options.appid, options.channel, options.token || null),
    // create local tracks, using microphone and camera
    AgoraRTC.createMicrophoneAudioTrack(),
    AgoraRTC.createCustomVideoTrack({
      mediaStreamTrack: canvasStream.getVideoTracks()[0],
    })
  ]);

実行結果

このように春らしくサクラの画像が映像の上に重なって表示されます。

その他の参考

Agora社のGithubには動画ファイルを映像ソースとして配信するサンプルも提供されています。
サンプルはGithubにあります。

最後に

agora.ioに関するお問い合わせはこちらから