相手から送られてきた映像を画像化

画像化はVideo要素 -> Canvas要素 -> img要素といった形で進めます。

完成がこんな感じです

分かりにくいですが、

上段左: video要素(相手側の映像)
上段真ん中: canvas要素
上段右: img要素
下段: video要素(自分の映像)

となっています。

index.html

        <video id="their-video" width="200" autoplay playsinline></video>
        <canvas id="canvas"></canvas><!--canvas要素-->
        <img id="img" width="400px" height="300px" /><!--img要素-->
        <video id="my-video" muted="true" width="500" autoplay playsinline></video>

また、サンプルコードに追記する形になりますが、methodsの中にcreateImage関数を用意します。

canvasにVideo要素の中身を流し込み、最後にimgタグに流し込みます。

app.js

        createImage: function(){
            const canvas = document.getElementById('canvas');
			const ctx = canvas.getContext('2d'); //canvasの描画モードを2Dに指定
            const img = document.getElementById('img');
            
            //videoの縦幅横幅を取得
            const videoElm = document.getElementById('their-video'); //相手側の映像要素
			const w = videoElm.offsetWidth;
            const h = videoElm.offsetHeight;
            canvas.setAttribute("width", w);
            canvas.setAttribute("height", h);
            
            ctx.drawImage(videoElm, 0, 0, w, h);
            img.src = canvas.toDataURL('image/png');
        }

あとはcreateImage()の発火をconnect内部などに追記すればOKです。

 connect: function(call){
            call.on('stream', stream => {
                const el = document.getElementById('their-video');
                el.srcObject = stream;
                el.play();
                setInterval(() => this.createImage(), 1000); //追記 createImage関数を1秒ごとに呼び出す
            });
        },

自分の映像のみの場合

相手側がなく、自分の手元の映像を扱いたい場合はtheir-videoをmy-videoにすればOK

app.js

const videoElm = document.getElementById('their-video');

↓に変更

app.js

const videoElm = document.getElementById('my-video');

この場合は相手と接続しなくて良いのでSkyWayなど利用しなくても出来ます。