ノートPCのカメラを操作して、ブラウザ上に映像を映す方法です。
目次
表示するHTML側のポイント
WebRTCという技術なのですが、理論を理解していなくても使えます。。
ブラウザに表示する手順です。
HTMLにVideoタグを配置します。
<video id="myVideo" autoplay="1" ></video>
HTMLのbodyの最後のほうに、JavaScriptを指定します。
今回は「webcam.js」という名前にしましたが、別に名前はなんでもかまいません。
<script src="js/webcam.js"></script>
Webカメラを使うJavaScript
JavaScriptを作ります。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById('myVideo');
var localStream = null;
navigator.getUserMedia({ video: true, audio: false },
function (stream) { // for success case
video.srcObject = stream;
},
function (err) { // for error case
console.log(err);
}
);
うまくいけば、WEBカメラの利用許可を求めてきます。
そこで許可すればVideoタグを配置した場所にうつるはずです。
うまくいかない場合は、JavaScriptの記述ミスか、ブラウザの設定でカメラの利用を許さないようになっているか調べます。
最新のブラウザで動く書き方と動かない書き方
このHTMLやJavaScriptのサンプルはネットにたくさんあります。
でも、最新のバージョンのブラウザでは動かないものがあるので注意が必要です。
見分け方は簡単です。
上記の
video.srcObject = stream;
の部分が
video.src = window.URL.createObjectURL(stream);
のようになっているものはエラーになります。
メッセージはブラウザによって違います。
chromeの場合。
Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
FireFoxの場合。
URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
Edgeの場合。
Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
メッセージは開発者ツールのコンソールで確認します。
URL.createObjectURLは非推奨
以前は正解だった書き方が、なんでエラーになるようになったかの理由は、WebRTCで、URL.createObjectURL が非推奨になった・・ということらしいです。
こんなメッセージがでてた・・という情報がちょこちょこありました。
URL.createObjectURL with media streams is deprecated and will be removed in
M69, around September 2018. Please use HTMLMediaElement.srcObject instead.メディアストリームを使用した URL.createObjectURL は非推奨です。
2018年9月頃のM69です。代わりにHTMLMediaElement.srcObjectをご利用ください。
今の自分の環境のChromeのバージョンは「88」です。
2018年で非推奨ですから、とっくに使えなくなってて当然・・です。
エラーといっても、気づけば、どうってことはない話なのですが。
ではでは。
