質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • Cordova

    420questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

【質問】instascanのプレビュー画面を反転させる方法をご存じないですか?

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 213

KSK8000

score 11

Instascanを用いて、cordovaでQRスキャンのハイブリッドアプリを制作しております。
その際、スキャンを行うカメラのプレビューに鏡像反転されたものが表示されてしまうのですが
これを反転されていない画像に修正する方法をご存じないでしょうか?

当初はスマホのバックカメラを使用して、プレビューの反転したものが表示される仕組みとなっておりました。

これでは問題があるとなり、参考サイトを元にscaleXを変更する形でjsファイルに変更を行いました。
すると今度は、表示は希望通りに反転のないものが表示されたのですが
スマホのフロントカメラで取得した画像が表示されるようになってしまいました。

よい解決方法をご存知の方がいらっしゃれば、ご協力をお願いいたします。

Instascan.Camera.getCameras()
      .then(function (cameras) {
          if (cameras.length > 0) {
              //カメラのデバイス情報を指定して読み取りを開始する
              scanner.start( cameras[1] );
          }
          else {
              console.error('カメラが見つかりません!');
          }
      })

・参考サイト
PCカメラが「QRコードリーダー」に大変身!JavaScriptで簡単に開発できる「Instascan」を使ってみた!
→https://paiza.hatenablog.com/entry/2017/08/17/PC%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%8C%E3%80%8CQR%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%80%8D%E3%81%AB%E5%A4%A7%E5%A4%89%E8%BA%AB%EF%BC%81JavaScript%E3%81%A7%E7%B0%A1%E5%8D%98

カメラを使ってみよう ーWebRTC入門2016
→https://html5experts.jp/mganeko/19728/

フロントカメラで撮影した場合、画像が左右反転してしまう問題
→https://ja.stackoverflow.com/questions/23223/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%A7%E6%92%AE%E5%BD%B1%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88-%E7%94%BB%E5%83%8F%E3%81%8C%E5%B7%A6%E5%8F%B3%E5%8F%8D%E8%BB%A2%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86%E5%95%8F%E9%A1%8C

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

スキャナの mirror オプションは試してみましたか?

let scanner = new Instascan.Scanner({
  mirror: false
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/03 21:54

    mirrorオプションは試しておりませんでした。
    回答ありがとうございます。
    試してみようと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    配列要素を一定数で文字列化

    配列の中にある文字を一定の範囲ずつで、1つの文字列として作成したいです。 イメージとしては、 配列a[0~8]=("a","b","c","d","e","f","g","h"

  • 解決済

    Googleスプレッドシート

    お尋ねします。googleでマップガジェッドの追加の仕方を教えてください  Googleスプレッドシートに住所を10個を格納してgoogleマップにポインター10個出したいで

  • 解決済

    三秒点灯させて三秒点滅 JS

    信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわ

  • 解決済

    JavaScriptの画像切り替えについて。

    前提・実現したいこと JavaScriptで1秒ごとに画像を切り替えるプログラムを作りたいです。 発生している問題・エラーメッセージ なぜか最初の画像だけしか表示されず、

  • 解決済

    Leafletの地図上に付けたオーバーレイをON/OFFしたい

    Leafletのサンプルページにある、このページにある地図上のオーバーレイを、ON 表示/OFF 非表示で切り替える事がしたいのですが、 どうやったらいいか分かりません。

  • 解決済

    配列に入ってない数で最小の値を求める

    いつもお世話になっております。 今日はある問題に関してお聞きしたいです。 ある問題の内容はこちらです。 ある配列がある。 その配列に含まれない数で最小の値を求めよ

  • 解決済

    JavaScript:チェックボックスでチェックした項目のvalueを取得したい

    前提・実現したいこと いつもお世話になっております。 チェックボックスでチェックされている項目の値を取得したいと思いまして以下のようにしました。 しかし、ボタンを押すとア

  • 解決済

    CordovaでBase64に変換して画像を送信したいです

    お世話になっております。 現在Cordova(Ionic v1)を使用してモバイルアプリを作成しているのですが、 その中で画像ファイルをBase64に変換して文字列としてAPI

同じタグがついた質問を見る

  • Cordova

    420questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。