【新規事業】SkyWayでモザイク加工したカメラ映像を送ってみるよ（後編）【プロト開発】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/b6d31427-3ef7-8a1a-d68e-896254c9be43.png)

# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

アイディアの検証のために、先日作成した[SkyWay*の1対1通信アプリ](https://qiita.com/Shinkijigyo_no_Usagi/items/1d4e1cccbb6de9aa4526)に自分たちの機能を載せていこう！となる中で

**①カメラ映像に加工すること**
**②加工した映像をSkyWayを通じて送ること**

が必要になりました。

*[SkyWay](https://webrtc.ecl.ntt.com/)…NTTコミュニケーションズが提供する、ビデオ・音声通話を簡単に実装できるSDKとAPIです

# この記事の位置づけ

今回は上記のうち「**②加工した映像をSkyWayを通じて送ること**」についての記事になります。


# あらすじ
前回、カメラ映像にモザイク加工を実装しました。

https://qiita.com/Shinkijigyo_no_Usagi/private/31332c1033d564e34c96

こんなかんじ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/89a67e0b-c0b6-c488-9531-845c3f6569f9.png)
次は、このモザイク加工をかけた映像を相手側に送ります。

# そもそもSkyWayってCanvas送れるの？
#### イメージはあった
どうやってSkyWay越しに映像を送るのか分からないけれど、
[過去の経験](https://qiita.com/Shinkijigyo_no_Usagi/items/a72c374e4d27f4b1a431)から「カメラの映像にあれやこれやするのはCanvasを使うだろう」と考えていたので、
こんな実装イメージ（仮説）を持っていました。

* **カメラ映像を使って加工したCanvasを作って**
* **そのCanvas映像をSkyWayで送る**

ですので「CanvasをSkyWayで送れるのか？」と言う部分さえ解決できたら
この手順で機能を実現できます。

## SkyWayでやり取りする情報を確認する

「SkyWayで送れる形」についてまず調べてみます。
現状、カメラ映像を送っている部分を確認することにしました。

#### SkyWayのAPI仕様を確認
SkyWayで「映像を送る」処理の入り口はここ

```JavaScript:main.js
document.getElementById('call-btn').onclick = () => {
    const theirID = document.getElementById('their-id').value;
    const mediaConnection = peer.call(theirID, localStream);
    setEventListener(mediaConnection);
};
```
`peer.call()`メソッドの第２引数に`localStream`を渡しているだけです。（あら簡単）

`peer.call()`メソッドのAPI仕様を確認してみます。
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/9ba5649b-2206-c2be-4e8c-eccf56f7a740.png)
>[APIリファレンス：SkyWay](https://webrtc.ecl.ntt.com/api-reference/javascript.html#methods)より引用

第２引数は`MediaStream`オブジェクトと定義されていることがわかりました。
つまり、`MediaStream`オブジェクトの映像の部分にオリジナルの加工が出来たらOK！

## CanvasからMediaStreamをつくる方法を探す
SkyWayで送るのに必要なのは「MediaStream」だと分かりました。
ということは　**CanvasからMediaStreamを作る方法**　があれば送れるはず…！
早速、サラサラッとググります。

ググった結果
>canvas の前面をリアルタイムにキャプチャした動画を CanvasCaptureMediaStream (en-US) として返すメソッド
>[captureStream：MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream)

を見つけました。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/af5c5ae3-811c-5c24-0724-8b409072c518.png)
>[captureStream：MDN Web Docs](https://webrtc.ecl.ntt.com/api-reference/javascript.html#methods)より引用

って書いてあるし。

探してたのこれっぽい！
いける！いけるぞ～～～！

# CanvasをMediaStreamへ

早速、試してみます。
```diff_JavaScript:main.js
navigator.mediaDevices.getUserMedia({ video:{ width: CVS_WIDTH , height: CVS_HEIGHT }, audio: true })
    .then(stream => {
        myVideo.srcObject = stream;
        myVideo.play();

-       localStream = stream;
+       localStream = myCvs.captureStream(30);   
        
        myVideo.onloadeddata = () => {
            setInterval(() => {
                if(isMosaicEnabled){
                    mosaicMyCvs();
                }else{
                    copyToMyCvs();
                }
            }, 1000 / 30);
        }
    }).catch(error => {
        console.error('mediaDevice.getUserMedia() error:', error);
});
```

書き替えたのは１行だけです。

`peer.call()`メソッドの第２引数渡している`localStream`を、
getUserMedia()で取得したMediaStreamではなく、
モザイクを描画しているmyCvsをキャプチャしたCanvasCaptureMediaStreamに。

流れはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/f9b8a864-ba2e-14b4-3a50-5ab70dde8f4a.png)

動かしてみると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/4e664f19-02d0-376a-23dd-f6cf6840c6da.png)
モザイクがかかったカメラ映像が送れました～！やった～～～！

# コード全体
既存コードからすこしリファクタリングしてますが、機能の変更部分は上記の1文だけです。
<details><summary>index.html</summary><div>

```HTML:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1対1ビデオ通話</title>
    <style type="text/css">
        .container{
            width: 900px;
        }
        .main-wrapper{
            height: 600px;
        }
        .my-section{
            float: left;
            width: 50%;
            height: 100%;
        }
        .their-section{
            float: right;
            width: 50%;
            height: 100%;
        }
        #my-video{
            position:absolute;
            top:140px;
            left:10px;
            z-index:1;
        }
        #my-canvas{
            position:absolute;
            top:140px;
            left:10px;
            z-index:2;
        }
        #my-setting{
            position:absolute;
            top:420px;
            left:10px;
            z-index:3;
        }
    </style>
</head>
<body>
    <h1>1対1ビデオ通話のサンプル</h1>
    <div class="container">
        <div class="my-section">
            <p class="my-id-label">自分のPeerID: <span id="my-id"></span></p>
            <video id="my-video" width="360px" height="270px" autoplay muted playsinline></video>
            <canvas id="my-canvas"></canvas>
            <div id="my-setting" >
                <input type="button" id="mosaic-btn" value="モザイク">
                <span id="mosaic-enabled">OFF</span>
            </div>
        </div>
        <div class="their-section">
            <p>
                <label class="call-id-form-label" for="their-id">相手のPeerID: </label>
                <input id="their-id" class="call-id-form">
                <button type="button" id="call-btn">発信</button>
            </p>
            <video id="their-video"  width="360px" height="270px" autoplay muted playsinline></video>    
        </div>
    </div>
    <script src="//cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
    <script src="./main.js"></script>
</body>
</html>
```
</div></details>
<details><summary>main.js</summary><div>

```js:main.js
// window.__SKYWAY_KEY__ = 'SkyWayのAPI Keyを入れてね';

let localStream;
const myVideo = document.getElementById('my-video');
myVideo.onloadeddata = () => {
    setInterval(() => {
        if(isMosaicEnabled){
            mosaicMyCvs();
        }else{
            copyToMyCvs();
        }
    }, 1000 / 30);
}

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

const CVS_WIDTH = 360
const CVS_HEIGHT = 270

const myCvs = document.getElementById('my-canvas');
const myCtx = myCvs.getContext('2d');
myCvs.width = CVS_WIDTH;
myCvs.height = CVS_HEIGHT;
myCvs.style.width = `${CVS_WIDTH}px`;
myCvs.style.height = `${CVS_HEIGHT}px`;

navigator.mediaDevices.getUserMedia({ video:{ width: CVS_WIDTH , height: CVS_HEIGHT }, audio: true })
    .then(stream => {
        myVideo.srcObject = stream;
        myVideo.play();
        localStream = myCvs.captureStream(30);
    }).catch(error => {
        console.error('mediaDevice.getUserMedia() error:', error);
});

const MOSAIC_SIZE = 20;
const mosaicMyCvs = () => {
    myCtx.clearRect(0, 0, CVS_WIDTH, CVS_HEIGHT);
    const mosaicCvs = document.createElement('canvas');
    const mosaicCtx = mosaicCvs.getContext('2d');
    mosaicCvs.width = CVS_WIDTH ;
    mosaicCvs.height = CVS_HEIGHT ;
    mosaicCvs.style.width = `${CVS_WIDTH}px`;
    mosaicCvs.style.height = `${CVS_HEIGHT}px`;
    mosaicCtx.drawImage(myVideo, 0, 0);
    const imageData = mosaicCtx.getImageData(0, 0, CVS_WIDTH, CVS_HEIGHT);
    //モザイクサイズ単位でループ
    for (let y = 0; y < myCvs.height; y = y + MOSAIC_SIZE) {
        for (let x = 0; x < myCvs.width; x = x + MOSAIC_SIZE) {
            // 該当ピクセルの色情報を取得
            const cR = imageData.data[(y * myCvs.width + x) * 4];
            const cG = imageData.data[(y * myCvs.width + x) * 4 + 1];
            const cB = imageData.data[(y * myCvs.width + x) * 4 + 2];
            // モザイクサイズの正方形を描画
            myCtx.fillStyle = `rgb(${cR},${cG},${cB})`;
            myCtx.fillRect(x, y, x + MOSAIC_SIZE, y + MOSAIC_SIZE);
        }
    }
}

const copyToMyCvs = () => {
    myCtx.drawImage(myVideo, 0, 0, CVS_WIDTH, CVS_HEIGHT);
}

let isMosaicEnabled = false;
document.getElementById('mosaic-btn').onclick = () => {
    if (isMosaicEnabled) {
        isMosaicEnabled = false;
        document.getElementById('mosaic-enabled').textContent = "OFF";
    } else {
        isMosaicEnabled = true;
        document.getElementById('mosaic-enabled').textContent = "ON";
    }
}

const peer = new Peer({
    key: window.__SKYWAY_KEY__,
    debug: 3
});

peer.on('open', () => {
    document.getElementById('my-id').textContent = peer.id;
});

document.getElementById('call-btn').onclick = () => {
    const theirID = document.getElementById('their-id').value;
    const mediaConnection = peer.call(theirID, localStream);
    setEventListener(mediaConnection);
};

const setEventListener = mediaConnection => {
    mediaConnection.on('stream', stream => {
        theirVideo.srcObject = stream;
        theirVideo.play();
    });
}

peer.on('call', mediaConnection => {
    mediaConnection.answer(localStream);
    setEventListener(mediaConnection);
});
```
</div></details>


# 実は…
加工した映像をSkyWayを通じて送れた！
と喜んでいたものの、後日、ある事実に気付いて悩むことになります。

ウサギーは何を見落としていたのでしょうか？

# おわりに
なにやら不穏な終わり方をしてしまいましたが、
「**カメラ映像を送る**」と言う観点であれば、上記のコードは決して間違いではありません。
ヒントは”**audio**”です。

こちらも次の記事にしようと思いますので、お付き合いいただけると嬉しいです。