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にあります。
