WebRTC에서 얻은 비디오를 이미지로 만들기

이런 분위기에서 정기적으로 영상을 영상화하여 img 요소에 넣는 것을 해보겠습니다.



화상화할 수 있으면 여러가지 응용을 할 수 있으므로 우선 만든 샘플을 바탕으로 화상화해 봅니다.

SkyWay 샘플을 Vue.js로 작성하는 자습서 vol1

SkyWay 샘플을 Vue.js로 작성하는 자습서 vol2

원래 코드는 여기입니다. 우선은 수중에서 움직여 봅시다.

상대방이 보낸 영상을 영상화

이미징은 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 함수를 준비합니다.

캔버스에 비디오 요소의 내용물을 흘려 넣고 마지막으로 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 등 이용하지 않아도 됩니다.