LoginSignup
12

More than 3 years have passed since last update.

javascriptでカメラのフロント・バックを切り替える方法

Posted at

概要

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;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12