#概要
WebARやWebビデオ通話など、カメラを使うWebアプリを作る際、フロントとバックを切り替える必要がある。
javascriptを使ってカメラを切り替える方法を共有する。
#コード
index.js
var cameraFacing = false;
// clickイベントリスナーで、切り替えボタンがタップされた時に切り替えを行う。
change_btn.addEventListener("click", function(e){
e.preventDefault();
var vi = document.querySelector('video');
const mode = cameraFacing ? "environment" : "user";
// フロントカメラをそのまま使うと、左右反転してしまうので、activeクラスとcssでミラー処理
cameraFacing ? document.querySelector('video').classList.remove("active") : document.querySelector('video').classList.add("active");
// canvasはAR.jsを使っている時
cameraFacing ? document.querySelector('canvas').classList.remove("active") : document.querySelector('canvas').classList.add("active");
// Android Chromeでは、セッションを一時停止しないとエラーが出ることがある
stopStreamedVideo(vi);
// カメラ切り替え
navigator.mediaDevices.getUserMedia({ video: { facingMode: mode } })
.then(stream => vi.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
cameraFacing = !cameraFacing;
});
// videoセッション一時停止
function stopStreamedVideo(videoElem) {
let stream = videoElem.srcObject;
let tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
videoElem.srcObject = null;
}
common.css
/* インカメで左右反転 */
video.active, canvas.active {
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
}
#解説
environmentでバックカメラ、userでフロントカメラに切り替えることができる。
index.js
// バックカメラに切り替え
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(stream => vi.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
// フロントカメラに切り替え
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
.then(stream => vi.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
ボタンをタップするたびに、バックとフロントを切り替えるために、グローバル変数で現在のカメラ状況を管理して切り替えている。
(本当は現在使っているカメラの状況を取得して切り替えたいが、やり方が見つからなかった。知っている方は、教えていただけると助かります)
index.js
var cameraFacing = false;
...
const mode = cameraFacing ? "environment" : "user";
...
cameraFacing = !cameraFacing;