10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 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;
10
12
0

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
10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?