Amazon SumerianとWebRTC(SkyWay)で簡単な全天球カメラビデオチャット(1:1)を作ってみる

17165 ワード
Sumerian SkyWay SkyWay テキストリンク

Amazon SumerianでWebRTC(SkyWay)を使って簡単な全天球カメラビデオチャットを作ってみたので作成手順をメモしておく。
実行すると自分のpeer idが表示されるので相手に知らせて入力欄に入れてもらいconnectボタンを押すとビデオチャットが行える。
お互い全天球カメラをWebカメラとして接続していれば相手に球面に貼り付けた状態で表示される（通常のWebカメラだと球面に貼り付けられて歪む）。

作成手順

Amazon Sumerianで簡単な全天球画像ビューワーを作ってみる - Qiita と同じ手順を実施して以下のようにHTMLとスクリプトを変更する。

  • HTML
<input id="peerid" readonly="readonly" type="text"><br />
<input type="text" id="ctnpeerid"><input type="button" id="connectbtn" value="connect"><br />
  • スクリプト
'use strict';

function makeVideo(stream) {
    let video = document.createElement('video');
    video.crossOrigin = 'anonymous';
    video.srcObject = stream;
    video.muted = false;
    video.autoplay = false;
    video.loop = true;
    video.oncanplay = (ctx) => {
        video.width = video.videoWidth;
        video.height = video.videoHeight;
    };
    return video;
}

function setup(args, ctx) { 
    var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    p.then(function (localStream) {
        ctx.localStream = localStream;

        ctx.peer = new Peer({
            key: args.peerkey,
            //debug: 3
        });

        ctx.peer.on('open', () => {
            document.getElementById("peerid").value = ctx.peer.id;
        });

        ctx.peer.on('error', (err) => {
            alert(err.message);
        });

        ctx.peer.on('call', (call) => {
            call.answer(ctx.localStream);
            setupCall(args, ctx, call);
        });

        document.getElementById("connectbtn").addEventListener('click', () => {
            let peerid = document.getElementById("ctnpeerid").value;
            const call = ctx.peer.call(peerid, ctx.localStream);
            setupCall(args, ctx, call);
        });
    });

}

function addVideo(args, ctx, stream) {
     ctx.video = makeVideo(stream);

    var videoMat = args.target.meshRendererComponent.materials[0];
    var texture = ctx.texture = new sumerian.Texture(null, {
        generateMipmaps: false,
        minFilter: 'BilinearNoMipMaps',
        repeat: [-1, 1],
    });
    texture.updateCallback = () => {
        return texture.image && !texture.image.paused;
    };
    texture.readyCallback = () => {
        return texture.image && texture.image.readyState === 4;
    };
    texture.setImage(ctx.video);
    videoMat.setTexture('DIFFUSE_MAP', texture);
    args.target.meshRendererComponent.materials[0] = videoMat;
    ctx.material = videoMat;
    ctx.video.play();
}

function setupCall(args, ctx, call) {
    if (ctx.call) {
        ctx.call.close();
    }
    ctx.call = call;

    call.on('stream', (stream) => {
        addVideo(args, ctx, stream);
    });
}

function cleanup(args, ctx) {
    ctx.video = null;
}

var parameters = [
    {
        name: "Target",
        key: "target",
        type: "entity"
    },
    {
        name: "PeerKey",
        key: "peerkey",
        type: "string"
    }
];
  • スクリプトのExternal Resourcesにhttps://cdn.webrtc.ecl.ntt.com/skyway-latest.js を指定する。
  • スクリプトのtarget parameterにSphere100.fbx配下のpSphere1_phong1を設定する。
  • SkyWayでアプリを作成して、利用可能ドメインにap-northeast-1.sumerian.amazonaws.comやap-northeast-1.sumerian.awsあたりを追加しておく。権限はAPIキー認証を利用する以外はチェックを入れておく。
  • スクリプトのpeerkey parameterにSkyWayアプリのAPIキーを指定する。