はじめに
簡単なミニアプリ作成にあたり、Webカメラの実装にチャレンジしました。正直「すごく難しいんだろうな。。不安」でしたが、参考記事の力もあり無事にできました。
今回はそんな実装の流れを簡単にまとめたいと思います。
プラス、未経験エンジニアのわーちゃんが、「〇〇でもわかる！」を目指してコードの意味をかみ砕いてみました。
メインで使用する技術・参考記事
メディアキャプチャとストリーム API (メディアストリーム)
というものを使用します。
あくまで例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webカメラテスト</title>
</head>
<body>
<h1>Webカメラの映像</h1>
<video id="userVideo" autoplay></video>
<script src="smilescript.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
startCamera();
});
// カメラを起動する関数
function startCamera() {
const userVideo = document.getElementById("userVideo");
// カメラの映像を取得
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then((stream) => {
userVideo.srcObject = stream; // 映像を video タグに表示
})
.catch((error) => {
console.error("カメラの起動に失敗しました:", error);
});
}
document.addEventListener("DOMContentLoaded", () => { ... })
ページの読込が完了したら{}内のコードを実行
カメラを起動する関数 startCamera()
カメラ映像を映す <video> タグ (id="userVideo") を取得
video: true, audio: false では、
✅ video: true → 映像を取得
✅ audio: false → 音声は取得しない（不要ならオフにすることで、余計な権限を求めない）
navigator.mediaDevices.getUserMedia
読取専用プロパティ。詳しくは下記サイト参照
.then((stream) => { ... }) は、カメラの映像が取得できたときに実行する処理
stream は カメラから送られてくる映像データ
userVideo.srcObject = stream; → 取得した映像を <video> タグにセット
※「カメラの映像データ (stream) を <video> に流し込む」というイメージ
catch() は「失敗したときの処理」
カメラが使えない場合（例: 許可しなかった、カメラが接続されていない） に catch() の中の処理が実行
error には「なぜ失敗したのか？」というエラーメッセージが入る。
autoplayについて
autoplay は<video>タグ に指定する属性で、ページを開いたときや動画が読み込まれたときに、自動的に再生を開始する ためのもの。
ですが、以下サイトのメモには次のようなことが記載されているので使用の際には一度確認することをお勧めします。
現行のブラウザーでは、音声（またはミュートされていない音声トラック付きの動画）が自動再生されないように設定されています。これは、自動的に音声が再生されるサイトはユーザーにとって不快な体験になり得るからです。正しい自動再生の使い方についての追加情報は autoplay ガイドを参照してください。
さいごに
最近、実装に挑戦するとき「不安」な気持ちが先行してしまうことがよくあります。
でも、毎回不安を感じていると 「倒せる敵も倒せない！」（ゲーム感覚） ことに気づきました。
攻略したその先には 「新しい技術」「さらなる強敵」 が待っている。
だからこそ、これからもいろんな技術に挑戦していきます！
この記事が少しでも参考になれば嬉しいです✨