始めてwebRTCに挑戦した結果…爆散した（後編）

webRTCに挑戦した結果爆散した…

こちらの記事は前編の続きです！ぜひ前編を見てからこの記事を読んでやってください。
全編

とにかくReactでカメラを起動させないと…

前回とりあえずシンプルなJavaScriptで書いたコードをまんまReactで書いたんですけど…
あれ〜カメラ動かんやんけ〜てなことになりましたね！

あ、本日の記事は少しおまけをつけときました。

あの後親切なお方からアドバイスをもらいました…

どうやら前回の記事のときはJSXで作ったいわゆる仮想DOMを取得するときにdocument.getElementById('video');で取得しようとしていました。しかし、ここをdocument.querySelector('video');とすることでうまくいきました。
コード全体は前回の記事を遡ってくださいとおもったのですが、一応それだとめんどいはアホと言われかねないので書いときます。

Camera.js

class Camera extends Component {
    render() {
        const media = document.querySelector('video');
        navigator.mediaDevices.getUserMedia({vide:true; audio:false;})
        .then (function(stream) {
            media.srcObject = stream;
        })
        .catch (function(err){
            console.error ('mediaDevices.getUserMedia() error:',err);
            return;
        })
        return (
            <div>
                <h1>Webcam</h1> /* なんとなくタイトルをつけてるだけです */
                <video className="video" autoplay />
            </div>
        )
    };
}

ちなみに今回はメディアをしているするときに
navigator.mediaDevices.getUserMedia()でメディアを指定していますがここはnavigator.getUserMediaでも動きます。
しかし、これはMDNでは非推奨の書き方になりますので今回は前者の書き方を使用しました。なんで非推奨なのかはよくわかってません…ごめんなさい…では今後この記事を読んだ人に悪影響を与えかねんので調べました。
メディア周りをいじるときnavigator.getUserMedia()は動くブラウザと動かないブラウザが混在しておりブラウザが変わったときに挙動が異なってしまうということが起きます。これはnavigator.mediaDevices.getUserMedia()を導入したことによってこれに対応するためにブラウザがいろいろ対応しているのですが、その際に今まで使用していたnavigator.getUserMedia()はもういらん！といって非対応にしてしまったらしいです。よって開発者側は全てのブラウザに対応させるためにnavigator.mediaDevices.getUserMedia()を用いることが推奨されてます。
参照：MDN mozilla

へ〜便利な外部ライブラリ（react-webcam）かぁ〜

調べていくとどうやらReactさんでカメラを動かすにはReactWebCamという外部ライブラリを利用するのが一番楽らしいdesu!
というわけなのでとりあえずReactWebCamをプロジェクト内にインストールします。

$ npm install react-webcam

これでReactWebCamを利用できるようになりました。
でもどうやって使うんやろ〜？

react-webcamを使ってみよう！

先ほどプロジェクトにライブラリをインストールしたのでこれから実際に動かしてみます。
まぁ詳しい使い方はGitHubにあるので読みましょう！
するとどうやらいつも通りimportして使えばい良いとのことなので時をもど…
何はともあれ先程のコードは一旦全てコメントアウト！
最悪消しても良いです…

Camera.js

import React,{ Component } from 'react';
import Webcam from 'react-webcam';

class Camera extends Component {
    render(){

        // cameraSize
        const videoConstraints = {
          width: 1280,
          height:720,
        };
        // 使用メディアの指定
        const capture = {
            facingMode: {
                exact: "environment"　// リアカメラの利用、もしフロントカメラを使いたい場合はuserにする
            }
        };

        return(
            <h1>WebcamApp</h1>
            <Webcam
                audio={false}
                videoConstraints={videoConstraints}
                video={capture} />
        )
    };
}
export default Camera;

今回はとりあえずカメラが起動できて、きちんとキャプチャしてくれれば良いのでaudioはfalseにしてあります。
もし、音声を扱いたい場合はaudioをtrueにしてナンジャカンジャをいじいじしてあげましょう！
ちなみに今回はキャプチャしたものを表示するためのサイズを指定していますが指定しなくてもよしなにサイズを設定して表示してくれるみたいです。
でも自分の望んだサイズで表示されるとは限らない（というか大半の場合は表示されないと思う）のできちんと表示サイズを指定しましょう。
何はともあれとりあえずこれを表示してみようか…
これをApp.jsにインポートして一つのページとしてルーティングさせましょう。

おまけ

今後ページを少しづつ増やしていくのでreact-routerでルーティングさせていく準備もやってしまおう！
ちなみにルーティングの記事はまたどこかで書きますがとりあえず今回はプロジェクトの中で以下を実行しておいてください

$ npm install react-router-dom

そして、App.jsを編集します。

App.js

import React from 'react';
import { BrowserRouter as Router,Switch, Route } from 'react-router-dom';

// pageComponents
import Home from './pages/Home';
import Camera from './pages/Camera';

function App() {
    return (
        <div className = "App">
            <Router>
                <Switch>
                    <Route exact path = "/" component={Home} />
                    <Route path = "Camera" component={Camera} />
                </Switch>
            </Router>
        </div>
    );
}
export default App;

そうしますととりあえずルーティングは終わり。
起動してみます。

$ npm start

これを実行するとlocalhostのおそらく3000番ポートが開かれると思います。
もしすでにlocalhost3000番が使われていたら、別ポートで開きますか？というようなメッセージがターミナル上に出てきますのでyを押してエンターで続けてください。

やった〜かめらがようやっと起動しました〜〜〜〜〜
カメラを起動させるのにどれだけ時間をかけるつもりだよ…

さてこのあとは…

ここまででやっとスタートラインに立ちました…
ここからメディアをいじって何かしらサービスを作っていきたいと思います。
しかし、私非常に疲れてしまいましたのでその記事はまた次回にするとしましょう〜

最後に

今回はライブラリを使わない方法と使う方法二つをご紹介しましたが、改めてライブラリというものの偉大さを切実に実感しましたね〜
だってぽちぽち、インポート！終了！ですからね！
サービスでどのような機能を作るかをよく考えてそれを実装できそうなライブラリがあるなら積極的に使っていきたいな〜と思ういい機会でした。
また何かアドバイス等ございましたらコメント欄にお願いします！

余談？かな今回はクラスコンポーネントを利用していますがもちろんファンクショナルコンポーネントでもちゃんと動きます！動作確認済みです。