初めに
この記事はweb開発初心者を前提として書いております。（筆者の体験談）
「馬鹿かこいつ！こんな基礎中の基礎も知らずにwebやるとか頭おかしんじゃね〜の！出直してこい！」とか思わず生暖かい目で見守ってやってください。
そして、僕と同じ状況のあなた！心配しないで！あなたよりポンコツはいくらでもいます！
現に今目の前の記事を書いてる人も相当のポンコツです！
webカメ使って楽しいことしたい！
とある大学の授業で何かしら作品作ってって言われたからとりあえず私未踏の地WebRTCに挑戦したろ！
今までカメラとか一度も使ったことないけど多分videoタグ当たりをJSで軽くいじるんやろ〜
余裕余裕…じゃない！ん？
何をどうすればいいかよくわからん！
というわけでWebRTC初心者の私が勉強しながらも頑張った証を残そうと思います。
私と同じでWebRTCやってみたいけどよくわからないという人の助けになればいいな〜
ひとまずWebRTCを行うためには…？
まぁweb開発で困ったことあったらみんなご存知のMDNを見れば大体解決できるのですが、私はそもそも何をしていいかわからないからどのドキュメントを読めばいいかわからない（何がわからないのかわからない！）という状態だったのでとりあえずGitHubに溢れかえっているWebRTCのコードを読みあさってみることにしました。すると！どうやらMediaツール周りのリクエストや制約云々をいじればいけるということがわかってきました！
Mediaツール周りのリクエスト
まぁ考えてみればwebカメラいじるんだからそりゃそこらへんいじるわな！
というわけでここまででわかったことはNavigatorというObjectでgetUserMediaにて使用するメディアツールの情報を呼び出すことから始めましょう！
DocumentObjectModel
DocumentObjectModel、通称DOMですね！
これは簡単に言えばJavaScriptからHTMLのhタグやらpタグやらに接続しいじくり回すためのオブジェクトモデルです。
より正確に知りたいという方ははいでましたMDNさんを参照してください！
そしてこのDOMというものはツリー構造をようしており、このツリーの最小の単位をNodeと言います。
このツリーのNodeに対して干渉していくことでイベントを起こすことができます。
また、このイベントというものはNodeに対してイベントハンドラーというものを割り当てて起こすことができます。
なぜ今このDOMが出てきたのか…
それはこのあとDOMを動かしながらでないと私たち(ユーザ)がみている画面をJavaScriptから動かすことができないからです。ちなみに今回はWebRTCということなのでwebカメラを動かします。そのための表示フィールドとでも言っておきましょうかそれをこのDOMを用いて作成し、表示していきましょう。
ちょこっとWebcamを起動してみましょ
ちょっとここまでコードが出てこなかったので、「なんだこの記事ふざけやがって〜！」と思った方ここからコードを少し書きますよ〜
それでは実際に作っていきます。
とりあえずシンプルなJavaScriptでやってみよう！
webでカメラを利用して何かをするときは基本的にはhtmlのvideoタグをいじいじしながら開発をしていくことが多いみたいです。
ちなみに、videoタグはこれだけではなくwebに動画を埋め込む際にも利用されたりと、メディアをいじるときにはよく出てくるものらしい…
というわけで今回はvideoタグをHTMLで用意し、JavaScriptにvideoタグの要素を取得しDOMを操作していこうと思います。
<body>
<h1>Sample Camera App</h1>
<video id = "video" autoplay></video>
<script type = "javascript">
const media = document.getElementById('video'); // これは皆さんご存知HTMLのvideoタグのidを指定してDOM要素を取得する手順です。
navigator.mediaDevices.getUserMedia({video:true, audio: false}) // 今回は写れば良しということでマイクはOFFで行きます
.then (function(stream) {
media.srcObject = stream;
})
.catch (function(err){
console.error('mediaDevices.getUserMedia() error:',err);
return;
})
</script>
</body>
これでうまくいくはずです…！
うまくいった！
まぁこないな感じでやれますわ〜
しかし今のご時世フレームワークを用いてユーザ体験の向上やサーバサイドレンダリングやら静的サイトジェネレーターやらを行うのが当たり前と言われておりますが（筆者の周りでわ…）応用編として今回は私くしが実際にお勉強中のReactでやってみようと思います。
そしてあわよくば今現在大学の課題で作っているカメラに写っている人の数を検出して人数を表示するというところにまで持っていきたい！
とまぁ自分語りはここら辺にしてやっていきましょう〜
これは完全に僕の好みというかReact使う人たちは大体そうだと思いますけど、今回はCameraコンポーネントを作成しApp.jsにimportして作ろうと思います。
import React,{ Component } from 'react';
class Camera extends Component {
render() {
const media = document.getElementsByClassName('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>
)
};
}
export default Camera;
とりあえずこれでカメラを起動して画面にリアルタイムで表示してくれるはず…
なんですが、おや？
webカメラは起動したけど画面に表示してくれない…
何かエラーは出ているのかな〜
あれ⁉︎
エラーもない！
どうしよう！
Reactわけわから〜ん！
いやJavaScriptなのか？
なんだよこれ！
もうWebやめる！