Instascan: IOSサファリ11.4-バックカメラオープニングの問題

作成日 2018年09月27日 · 44コメント · ソース: schmich/instascan

やあ、
私はInstascanを使用していて、
instascanによるエラーは発生しませんが、カメラを開いていません。フロントカメラを開くたびに。
同じコードがAndroid（Chrome、Firefox）で正常に機能しています。

 var self;
 isQRScannerInitialised = false;
関数testQrCode（textBoxId、DivWidth）{
 self = initialiseQRScanner（DivWidth）;

 self.scanner.addListener（ 'scan'、function（content、image）{
 if（textBoxId == $（ "＃hiddenTextBox"）。val（））{
 audio.play（）;
 var code = content;
 $（ "＃" + textBoxId）.val（code）;
 isQRScannerInitialised = false;

 }

 }、 NS）;

 }

関数initialiseQRScanner（DivWidth）{

 自己=これ;

 if（isQRScannerInitialised == false）{

 var tempVideo = document.getElementsByTagName（ "video"）[0];
 tempVideo.width = DivWidth;
 tempVideo.height = 480;

 self.scanner = new Instascan.Scanner（{video：document.getElementsByTagName（ "video"）[0]、mirror：false、scanPeriod：1}）;

 Instascan.Camera.getCameras（）。then（function（cameras）{
 self.cameras =カメラ;
 if（self.cameras.length> 0）{
 if（cameras [0] .name.match（/ back /）|| camera [0] .name.match（/ Back /））{
 self.activeCameraId = camera [0] .id;
 self.scanner.start（cameras [0]）;
 } else if（cameras [1] .name.match（/ back /）|| camera [1] .name.match（/ Back /））{
 self.activeCameraId = camera [1] .id;
 self.scanner.start（cameras [1]）;
 }
 isQRScannerInitialised = true;

 } そうしないと {

 alert（ 'カメラが見つかりません。'）;
 isQRScannerInitialised = false;
 戻る;
 }
 }）。catch（function（e）{ 
 isQRScannerInitialised = false;
 alert（ "QRエラー名：-" + e.name + "＆QRエラーメッセージ：-" + e.message）; console.error（e）; 
 }）;

 }
 自己を返す;
 }

ソース

SopraUser

👍3

最も参考になるコメント

これは素晴らしい製品であり、本当に便利でしたので、素晴らしいものにしてくれてありがとう。これが私の研究からのこのインスタスキャンの問題です：

getCamerasを呼び出すと、クラスCameraは、navigator.mediaDevices.enumerateDevices（）の呼び出しを通じて収集されたMediaDeviceInfoオブジェクトから作成されたCameraオブジェクトのコレクションを返します。これらは、スキャナーの起動時に使用されるカメラからの実際のストリームを含むMediaStreamオブジェクトではありIDと_名前_プロパティと何が含まれています。これらは、カメラオブジェクトの配列を作成するために使用されます。

_scanner.start（camera）_を呼び出すと、カメラの_camera.start（）_メソッドを呼び出す

_camera.start（）_次に、方法は方法に記載されている所定の制約に基づいてMediaStreamのArraryのオブジェクトを返す_navigator.mediaDevices.getUserMedia（contraints）_を呼び出します。
_scanner.start（）_は_scanner._enableScan（camera）_を呼び出し、上記のカメラでの呼び出しから返された最初のMediaStreamオブジェクトを提供します。それは設定します

                  **This Part Is the Disconnect and what is messing it all up!**

制約の問題：

渡されたCameraオブジェクトは、デバイスの検索に_ "必須" _として制約内のIDを使用します。見つからない場合、ビデオは表示されません。また、他の「必須」制約も設定されています。

異なるデバイスは、使用される制約をサポートしていません！
使用するデバイスでこのリンクを実行すると、サポートされている制約がわかります。
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

使用するデバイスでこのリンクを実行し、制約を入力します。サポートされているかどうかがわかります。
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Ipad / iPhone / IOSがサポートする制約：

アスペクト比、faceingMode、_deviceId * _、高さ、幅、アスペクト比など。

_これをテストしたとき、 _deviceIdは制約として無視されます。_制約については上記のリンクでこれを試してみると、deviceId = ""が設定されていることがわかります。 JavaScriptで取得して表示すると、iPhoneは常に空白のdeviceIdを返しました。

したがって、iPhoneでバックカメラをつかむには、deviceIdを使用せずにfaceingModeを使用する必要があります。

Androidでサポートされている制約：

deviceId、_faceingMode * _、aspectRatio、height、width、その他多数。

私はこれをサムスンのタブレットとAndroid携帯でテストしました。 FacingModeは、デフォルトで「ユーザー」フロントカメラに設定されています。このコードを試してみたところ、何らかの理由でまだ発見されていませんが、Android用のfaceingModeが機能していないことがわかりました。それでも、上記のリンクで機能します。私はその部分を調査し続け、おそらくこのコードを修正して、faceingModeとandroidで正しく動作するようにします。

* * ANSWER TOアンドロイドISSUE * * *
このプロジェクトのGulpビルドには、AndroidChromeのfaceingModeを台無しにするwebrtc-adapterバージョン^ 1.4.0が含まれています。コードを見ると、実際にフェーシングモードが削除されています。

このプロジェクトを修正するには、_index.js_で2行目を削除しますrequire('webrtc-adapter');次に、以下のビルド手順に従います。タブレットとChromeの4つの異なるAndroidスマートフォンでテストしたところ、すべてが再び機能してバックカメラをつかみました。

このインスタスキャンコードを使用してAndroidのバックカメラを取得するには、deviceIdを使用できます。
deviceIdが次のような_video_制約であることを確認してください

video: {
  devideId: this.id
}

カメラ制約コード：

これは、制約を設定してMediaStreamオブジェクトを取得するプロジェクトのコードです。
このコードが正常に動作しない理由は、_VIDEO constraint_のソースIDを_Android_または_Iphone_のためにサポートされていないことです。 これはdeviceIdに変更する必要があります。また、デバイスが処理するものでない場合は、必須項目をすべて実行する必要があります。

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

InstaScanを変更して縮小する方法：

これを取得して変更するために、私はVSCodeを使用しています。
1）Node.jsとvsCodeをインストールします。
2）ダウンロードしたいディレクトリの端末で実行します。
git clone https://github.com/JoseCDB/instascan.git

3）端末でinstascanディレクトリにcdします。
cd instascan

4）javascriptを変更し、gulpを実行してコードをリリースします。
gulp release

5）これにより、_dist_フォルダーに新しい縮小されたinstascan.min.jsアイテムが表示されます。

私はこのAndroidの問題を今週末に理解するつもりです。これにより、この素晴らしいライブラリを使用した将来のプロジェクトについて十分な洞察が得られることを願っています。

apchandler 2018年12月01日

🎉10 ❤3 👍2 🚀1 😄1

全てのコメント44件

Appleデバイスにアクセスできますか？デモが機能しているかどうか知っていますか？

kibagami-jubei 2018年09月27日

これはiOSサファリで問題が発生しているようですが、メタタグを追加することでこの問題を克服できたと読んでいます。このフォーラムを掘り下げるだけでわかります。私は似たようなことに取り組んでいるので、興味があります。私を妨げているのは、すぐに利用できるデバイスがないことです。

kibagami-jubei 2018年09月27日

iPhoneでデモを試していましたが、機能しませんでした。

kibagami-jubei 2018年09月28日

ええ、これに取り組んでいます、私はこれを機能させることができません。戻ってスレッドを読み直そうとしています。最新のWebRTCアダプターを追加し、ビデオタグに_playsinline_属性を追加することで、前面カメラを機能させました。カメラを読み取ることはできますが、バックカメラに交換しても何も起こりません。

kibagami-jubei 2018年09月29日

ビデオタグ内に属性を追加し、についても言及しました。

SopraUser 2018年09月29日

👍3

ビデオタグ内にplaysinline属性を追加し、メタタグについても言及しました。

誰かが実際にスレッドの1つでこれを修正しました。私は今それを試していますが、iPhoneを持っている人が働くのを待たなければなりません。

kibagami-jubei 2018年10月01日

ねえ、私はこれを動作させましたが、カメラを選択したにもかかわらず、デフォルトは常にバックリアカメラになりますが、それでも問題があります。したがって、正面カメラを選ぶ必要がある場合は、困惑します（しかし、真剣に、誰が正面カメラでスキャンしようとしているのか）。

kibagami-jubei 2018年10月05日

これが私がしたことです！

メタタグを追加しました。
<meta name="apple-mobile-web-app-capable" content="yes">

この属性を追加しました：
<video id="scanner" class="video-back" playsinline></video>

このJSファイルを追加しました：
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

そして、これをパッケージ化してリリースします： https ：

kibagami-jubei 2018年10月05日

🎉1

メタタグ、ビデオタグ、adapter-latest.jsを使用しました。
そして、私はinstscan.min.jsを使用していますが、「。js --scanner.js--camara.js」を個別に使用する方法がわかりません。

SopraUser 2018年10月05日

👍2

メタタグ、ビデオタグ、adapter-latest.jsを使用しました。
そして、私はinstscan.min.jsを使用していますが、「。js --scanner.js--camara.js」を個別に使用する方法がわかりません。

node.jsをインストールしているはずです。これらのファイルをすべて一緒にパッケージ化するコマンドプロンプトがあり、最終的な出力は、instascannerの縮小されたJSファイルになります。

kibagami-jubei 2018年10月05日

👍1

getCamerasを呼び出すと、クラスCameraは、navigator.mediaDevices.enumerateDevices（）の呼び出しを通じて収集されたMediaDeviceInfoオブジェクトから作成されたCameraオブジェクトのコレクションを返します。これらは、スキャナーの起動時に使用されるカメラからの実際のストリームを含むMediaStreamオブジェクトではありIDと_名前_プロパティと何が含まれています。これらは、カメラオブジェクトの配列を作成するために使用されます。

_scanner.start（camera）_を呼び出すと、カメラの_camera.start（）_メソッドを呼び出す

_camera.start（）_次に、方法は方法に記載されている所定の制約に基づいてMediaStreamのArraryのオブジェクトを返す_navigator.mediaDevices.getUserMedia（contraints）_を呼び出します。
_scanner.start（）_は_scanner._enableScan（camera）_を呼び出し、上記のカメラでの呼び出しから返された最初のMediaStreamオブジェクトを提供します。それは設定します

                  **This Part Is the Disconnect and what is messing it all up!**

制約の問題：

Ipad / iPhone / IOSがサポートする制約：

アスペクト比、faceingMode、_deviceId * _、高さ、幅、アスペクト比など。

したがって、iPhoneでバックカメラをつかむには、deviceIdを使用せずにfaceingModeを使用する必要があります。

Androidでサポートされている制約：

deviceId、_faceingMode * _、aspectRatio、height、width、その他多数。

このプロジェクトを修正するには、_index.js_で2行目を削除しますrequire('webrtc-adapter');次に、以下のビルド手順に従います。タブレットとChromeの4つの異なるAndroidスマートフォンでテストしたところ、すべてが再び機能してバックカメラをつかみました。

video: {
  devideId: this.id
}

カメラ制約コード：

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

InstaScanを変更して縮小する方法：

3）端末でinstascanディレクトリにcdします。
cd instascan

4）javascriptを変更し、gulpを実行してコードをリリースします。
gulp release

5）これにより、_dist_フォルダーに新しい縮小されたinstascan.min.jsアイテムが表示されます。

apchandler 2018年12月01日

🎉10 ❤3 👍2 🚀1 😄1

こんにちは、これはうまくいくはずです。
まず、 https：//github.com/webrtc/adapterからadapter.jsを追加します。

その後、これを複製します。
git clone https://github.com/quocthai95/instascan.git
走る：
npm i
必需品をインストールする

gulpを使用して最終的なコードをリリースします。
gulp release

Iphone 6 plus（iOS 11.4）とIphone 8 plus（iOS 11.3）をチェックしましたが、うまくいきました。通常どおりカメラを交換できます。

あなたがあなたの問題を解決できることを願っています。

quocthai95 2018年12月14日

こんにちは、これはうまくいくはずです。
まず、 https：//github.com/webrtc/adapterからadapter.jsを追加します。
その後、これを複製します。
git clone https://github.com/quocthai95/instascan.git
走る：
npm i
必需品をインストールする
gulpを使用して最終的なコードをリリースします。
gulp release
Iphone 6 plus（iOS 11.4）とIphone 8 plus（iOS 11.3）をチェックしましたが、うまくいきました。通常どおりカメラを交換できます。
あなたがあなたの問題を解決できることを願っています。

必需品をインストールすると、「12個の脆弱性（1個の低、5個の中程度、6個の高）」が発生します。
一部の「$ npm install --save-dev [package-name]」コマンドはこれらの脆弱性を解決しているようですが、次の例外のためにビルドできません。

$ gulp release assert.js：351 throw err; ^ AssertionError [ERR_ASSERTION]：タスク関数はGulp.setで[_setTaskとして]指定する必要があります（C：\ Users \ John \ Downloads \ instascan-ios-rear-camera \ instascan-ios-rear-camera \ node_modules \ undertaker \ lib \ set-task.js：10：3）

ここからどうやってやっていくのか、本当にこのビルドを試してみたいです。それは私のAndroid携帯でとてもうまく機能しますか？

/ジョン

johnatitide 2019年01月07日

こんにちは@johnatitide 、
gulp最新バージョン（4.0.0）をインストールしましたか？その場合は、3.9.1に制限してみてください。ご参考までに：
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
または、それを構築するためにどのコマンドを実行したかを提供できますか。

quocthai95 2019年01月07日

こんにちは@ quocthai95

ビルドは次のコマンドで機能します。
git clone https://github.com/quocthai95/instascan.git
npm install [email protected]
npm i
gulpリリース

iPadとiPhoneのSafariでカメラを切り替えることができるようになりました。良い。

johnatitide 2019年01月08日

👍3

制約の修正がschmichのリポジトリにマージされる可能性はありますか？

vladimirmoushkov 2019年02月20日

制約の修正がschmichのリポジトリにマージされる可能性はありますか？

新しいプルリクエストを作成しました。受け入れるのを待つ^^

quocthai95 2019年02月21日

@ quocthai95こんにちは、iveはhttps://github.com/schmich/instascan/issues/182#issuecomment-447198290からの手順に従いました。

私は疑問に思っていました、私は私のアンドロイドクロームのデフォルトとしてフロントカメラを取得しています。どうすればカメラをデフォルトとして戻すことができますか？サンプルコードはありますか？

fariskas 2019年04月01日

@fariskas 、
正規表現を使用して/ back /と一致するかどうかをテストしてから起動し、デフォルトでバックカメラを使用できるようにします。

`Instascan.Camera.getCameras（）。then（function（cameras）{
if（cameras [0] .name.match（/ back / i））{
Scanner.start（cameras [0]）;
} else if（cameras [1] .name.match（/ back / i））{
Scanner.start（cameras [1]）;
}
}

quocthai95 2019年04月03日

👍3

これは便利かもしれません： cameras[i].nameで「戻る」を見つけるためにforループを使用していますが、 cameras[i].nameをconsole.logに書き込むまで、失敗し、iPadでバックカメラを選択できませんでした。
したがって、iOSでバックカメラを選択できない場合は、「バック」を翻訳するか、 cameras[i].nameをconsole.logに書き込んで、バックカメラの名前を確認してください。

diboma 2019年04月20日

👍1

デモは正面カメラでのみ機能することを確認できます。これはiOS12.2のSafariで使用されます

dgtlrift 2019年04月27日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？

nicoeat614 2019年06月07日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？

私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。

プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。

しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。

これがお役に立てば幸いです。

バックカメラコード
`` `
スキャナー=新しいInstascan.Scanner（{ビデオ：ビデオ、scanPeriod：4、ミラー：false}）
.then（handleSuccess）
.catch（handleError）;
//スキャンを開始します
Scanner.addListener（ 'scan'、foundCode）;

            Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    scanner.start(cameras[0]);
                }
                else {
           ...        
                }
            }).catch (function (e) {
             ...  
            });

`` `
instascan.min.zip

https://github.com/schmich/instascan/issues/182#issuecomment -443388022

apchandler 2019年06月07日

🎉8 ❤2

これは素晴らしい製品であり、本当に便利でしたので、素晴らしいものにしてくれてありがとう。これが私の研究からのこのインスタスキャンの問題です：
getCamerasを呼び出すと、クラスCameraは、navigator.mediaDevices.enumerateDevices（）の呼び出しを通じて収集されたMediaDeviceInfoオブジェクトから作成されたCameraオブジェクトのコレクションを返します。これらは、スキャナーの起動時に使用されるカメラからの実際のストリームを含むMediaStreamオブジェクトではありIDと_名前_プロパティと何が含まれています。これらは、カメラオブジェクトの配列を作成するために使用されます。
_scanner.start（camera）_を呼び出すと、カメラの_camera.start（）_メソッドを呼び出す
_camera.start（）_次に、方法は方法に記載されている所定の制約に基づいてMediaStreamのArraryのオブジェクトを返す_navigator.mediaDevices.getUserMedia（contraints）_を呼び出します。
_scanner.start（）_は_scanner._enableScan（camera）_を呼び出し、上記のカメラでの呼び出しから返された最初のMediaStreamオブジェクトを提供します。 src要素をこのメディアストリームオブジェクトに設定します。
**This Part Is the Disconnect and what is messing it all up!**
制約の問題：
渡されたCameraオブジェクトは、デバイスの検索に_ "必須" _として制約内のIDを使用します。見つからない場合、ビデオは表示されません。また、他の「必須」制約も設定されています。
異なるデバイスは、使用される制約をサポートしていません！
使用するデバイスでこのリンクを実行すると、サポートされている制約がわかります。
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints
使用するデバイスでこのリンクを実行し、制約を入力します。サポートされているかどうかがわかります。
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId
Ipad / iPhone / IOSがサポートする制約：
アスペクト比、faceingMode、_deviceId * _、高さ、幅、アスペクト比など。
_これをテストしたとき、 _deviceIdは制約として無視されます。_制約については上記のリンクでこれを試してみると、deviceId = ""が設定されていることがわかります。 JavaScriptで取得して表示すると、iPhoneは常に空白のdeviceIdを返しました。
したがって、iPhoneでバックカメラをつかむには、deviceIdを使用せずにfaceingModeを使用する必要があります。
Androidでサポートされている制約：
deviceId、_faceingMode * _、aspectRatio、height、width、その他多数。
私はこれをサムスンのタブレットとAndroid携帯でテストしました。 FacingModeは、デフォルトで「ユーザー」フロントカメラに設定されています。このコードを試してみたところ、何らかの理由でまだ発見されていませんが、Android用のfaceingModeが機能していないことがわかりました。それでも、上記のリンクで機能します。私はその部分を調査し続け、おそらくこのコードを修正して、faceingModeとandroidで正しく動作するようにします。
* _ * Androidの問題への回答* _ **
このプロジェクトのGulpビルドには、AndroidChromeのfaceingModeを台無しにするwebrtc-adapterバージョン^ 1.4.0が含まれています。コードを見ると、実際にフェーシングモードが削除されています。
このプロジェクトを修正するには、_index.js_で2行目を削除しますrequire('webrtc-adapter');次に、以下のビルド手順に従います。タブレットとChromeの4つの異なるAndroidスマートフォンでテストしたところ、すべてが再び機能してバックカメラをつかみました。
このインスタスキャンコードを使用してAndroidのバックカメラを取得するには、deviceIdを使用できます。
deviceIdが次のような_video_制約であることを確認してください
video: {
  devideId: this.id
}
カメラ制約コード：
これは、制約を設定してMediaStreamオブジェクトを取得するプロジェクトのコードです。
このコードが正常に動作しない理由は、_VIDEO constraint_のソースIDを_Android_または_Iphone_のためにサポートされていないことです。 これはdeviceIdに変更する必要があります。また、デバイスが処理するものでない場合は、必須項目をすべて実行する必要があります。
async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});
InstaScanを変更して縮小する方法：
これを取得して変更するために、私はVSCodeを使用しています。
Node.jsとvsCodeをインストールします。
ダウンロードしたいディレクトリの端末で、次のコマンドを実行します。
git clone https://github.com/JoseCDB/instascan.git
ターミナルで、instascanディレクトリにcdします。
cd instascan
javascriptを変更し、gulpを実行してコードをリリースします。
gulp release
これにより、_dist_フォルダーに新しい縮小されたinstascan.min.jsアイテムが作成されます。
私はこのAndroidの問題を今週末に理解するつもりです。これにより、この素晴らしいライブラリを使用した将来のプロジェクトについて十分な洞察が得られることを願っています。

上記の手順に従って、ファイルcamera.js （29行目）を以下のように編集します
facingMode: { exact: "environment" },
それは私のために働きます。ありがとう@apchandler

glorynguyen 2019年06月11日

私はあなたがあなたのために働く何かを手に入れてうれしいです！この修正を投稿してくれた@glorynguyenにも感謝します！

apchandler 2019年06月11日

残念ながら、これらのソリューションはiOS 13では機能しません。それは単に空白です（黒でさえありません）。
Safariをリモートデバッグする場合、コンソールにもエラーは表示されません。

tinyoverflow 2019年08月01日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？
私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。
プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。
しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。
これがお役に立てば幸いです。
バックカメラコード
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });
instascan.min.zip
＃182（コメント）

これで私の問題は解決しました。ありがとうございました。

paulpwo 2019年12月20日

これに対する最新の修正は何ですか？スレッドからいくつか試してみましたが、フロントカメラしか手に入らないようです。
Gulpの使用方法や、実際に.js .gitプロジェクトをコンパイルする方法がわかりません。私は主に、C＃/ Asp.net Mvcでコーディングしているので、これは少し新しいです。
apchandlerのソリューションは私にエラーを与えます。（ビデオは定義されていません）
現在、Androidデバイス用の「修正済み」instascan.min.jsとIOS用の彼のバージョンをロードしていますが、動作させることができないようです。

dallebull 2020年01月29日

これに対する最新の修正は何ですか？スレッドからいくつか試してみましたが、フロントカメラしか手に入らないようです。
Gulpの使用方法や、実際に.js .gitプロジェクトをコンパイルする方法がわかりません。私は主に、C＃/ Asp.net Mvcでコーディングしているので、これは少し新しいです。
apchandlerのソリューションは私にエラーを与えます。（ビデオは定義されていません）
現在、Androidデバイス用の「修正済み」instascan.min.jsとIOS用の彼のバージョンをロードしていますが、動作させることができないようです。

htmlビデオ要素が存在しますか？
`` `

When you run instascan you need to speficy a video element like:

apchandler 2020年01月30日

ええ、私はそれを使って動作させました：

<video class="player" style="max-width:100%" id="preview" playsinline></video>

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
</script>

Iphone / Iosデバイス用のカメラ[0]を起動しています。そしてこれはAndroidの場合：

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    var selectedCam = cameras[0];
                    $.each(cameras, (i, c) => {
                        if (c.name.indexOf('back') != -1) {
                            selectedCam = c;
                            return false;
                        }
                    });
                    scanner.start(selectedCam);
                }
                else {
                    console.error('No cameras found.');
                }
              });
</script>

問題は、Request.UserAgent.Contains（ "ios"）のみをチェックし、 "iphone"はチェックしなかったため、iPhone用のAndroidスクリプトも実行したようです。

dallebull 2020年01月30日

❤2

それは知っておくと良いことです。情報をありがとう。

apchandler 2020年01月30日

@apchandlerこんにちは、「メイン」バックカメラを選択する方法が存在するかどうか知っていますか？

ユーザーがinstascanを使用してQRコードをスキャンするWebサイトがあります。私はウェブサイトを開発し、4台のバックカメラ（HUAWEI P30 PRO）を備えた携帯電話を使用してウェブサイトにアクセスするいくつかのテストを行っています。

$ .eachを試しましたが、最初のバックカメラを選択すると、ビジョンが非常にぼやけてズームが多いため、何もスキャンできません。

しかし、カメラを選択すると[2]、すべてをスキャンできます。

「メイン」バックカメラを選択する一般的な方法はありますか？

つまり、私のWebアプリは、携帯電話、カメラの数、カメラの順序が異なる非常に多くのユーザーによって使用されることになります。

または、すべてのカメラで選択を行ってから、ユーザーが自分に最適なカメラを選択できるようにすることをお勧めしますか？

ありがとう

arnaubosch 2020年02月13日

@apchandlerこんにちは、「メイン」バックカメラを選択する方法が存在するかどうか知っていますか？
ユーザーがinstascanを使用してQRコードをスキャンするWebサイトがあります。私はウェブサイトを開発し、4台のバックカメラ（HUAWEI P30 PRO）を備えた携帯電話を使用してウェブサイトにアクセスするいくつかのテストを行っています。
$ .eachを試しましたが、最初のバックカメラを選択すると、ビジョンが非常にぼやけてズームが多いため、何もスキャンできません。
しかし、カメラを選択すると[2]、すべてをスキャンできます。
「メイン」バックカメラを選択する一般的な方法はありますか？
つまり、私のWebアプリは、携帯電話、カメラの数、カメラの順序が異なる非常に多くのユーザーによって使用されることになります。
または、すべてのカメラで選択を行ってから、ユーザーが自分に最適なカメラを選択できるようにすることをお勧めしますか？
ありがとう

ごめんなさい。複数存在する場合に「メイン」カメラとして指定する値はわかりません。 select camera関数に、少なくとも特定の解像度およびその他の仕様である必要があることを指定する基準オブジェクトを指定できます。それは少なくともあなたに最低限の能力のカメラを与えることができます。そうでなければ、あなたの解決策はあなたがそれにアプローチしたい方法に適しているように聞こえます。

apchandler11 2020年02月13日

@apchandlerこんにちは、「メイン」バックカメラを選択する方法が存在するかどうか知っていますか？
ユーザーがinstascanを使用してQRコードをスキャンするWebサイトがあります。私はウェブサイトを開発し、4台のバックカメラ（HUAWEI P30 PRO）を備えた携帯電話を使用してウェブサイトにアクセスするいくつかのテストを行っています。
$ .eachを試しましたが、最初のバックカメラを選択すると、ビジョンが非常にぼやけてズームが多いため、何もスキャンできません。
しかし、カメラを選択すると[2]、すべてをスキャンできます。
「メイン」バックカメラを選択する一般的な方法はありますか？
つまり、私のWebアプリは、携帯電話、カメラの数、カメラの順序が異なる非常に多くのユーザーによって使用されることになります。
または、すべてのカメラで選択を行ってから、ユーザーが自分に最適なカメラを選択できるようにすることをお勧めしますか？
ありがとう
ごめんなさい。複数存在する場合に「メイン」カメラとして指定する値はわかりません。 select camera関数に、少なくとも特定の解像度およびその他の仕様である必要があることを指定する基準オブジェクトを指定できます。それは少なくともあなたに最低限の能力のカメラを与えることができます。そうでなければ、あなたの解決策はあなたがそれにアプローチしたい方法に適しているように聞こえます。

答えてくれてありがとう！解像度を試してみます。 InstascanはcamerAの解像度を返すことができますか？

arnaubosch 2020年02月13日

@glorynguyenと@apchandlerによって提供されるメソッドによると。
リアカメラをオンにできるようになりました
instascan.minを変更します
前
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
後
case 0:return i=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream)?{audio:!1,video:{facingMode:{exact:"environment"},mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}:{audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}

RainChou77 2020年03月19日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？
私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。
プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。
しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。
これがお役に立てば幸いです。
バックカメラコード
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });
instascan.min.zip
＃182（コメント）

あなたはジュニア開発者の仕事を救ったばかりです、あなたはあなた自身に生涯のファンを持っています。

mikeychowy 2020年04月23日

ありがとう。このコードを見たとき、私はあなたがいた場所に正しかった。締め切りがあり、30種類のカメラが必要でした。彼らがこれを書いてくれてうれしいです。

サムスンがパッチを当てたときに修正された、45の異なるモデルの電話とサムスンの電話の1つの問題だけで15か月間実行されています。つまり、SamsungWebKitエラーでした。

apchandler11 2020年04月23日

やあ、
私も他の人と同じようにIOSでカメラの問題に直面しています。バックカメラがiPhoneで開かず、デフォルトのフロントカメラが実行されています。誰かがサファリのアップデートバージョン（13.xx.xx）でこの問題を解決した場合は私を助けてください。

kamalchetu 2020年06月08日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？
私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。
プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。
しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。
これがお役に立てば幸いです。
バックカメラコード
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });
instascan.min.zip
＃182（コメント）

AndroidとiOSの両方で魅力のように機能しました！元のinstascanマスターブランチをダウンロードし、ファイルを「dist」フォルダーに入れました。これで完了です。ありがとうございます！

antworks-hub 2020年06月11日

AndroidとiOSの両方で魅力のように機能しました！元のinstascanマスターブランチをダウンロードし、ファイルを「dist」フォルダーに入れました。これで完了です。ありがとうございます！

@ antworks-hubブランチまたは縮小されたjsのコード全体を使用しましたか？
「dist」フォルダはどこから入手しましたか？

Sandi2211 2020年07月07日

AndroidとiOSの両方で魅力のように機能しました！元のinstascanマスターブランチをダウンロードし、ファイルを「dist」フォルダーに入れました。これで完了です。ありがとうございます！
@ antworks-hubブランチまたは縮小されたjsのコード全体を使用しましたか？
「dist」フォルダはどこから入手しましたか？

@ Sandi2211元のinstascanマスターブランチのルートに「dist」フォルダーを作成し、instasca、min.zipファイルのコンテンツをそのフォルダーに配置したと思います。

antworks-hub 2020年07月08日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？
私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。
プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。
しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。
これがお役に立てば幸いです。
バックカメラコード
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });
instascan.min.zip
＃182（コメント）
これで私の問題は解決しました。ありがとうございました。

ありがとう、私はうまくいっています。新しいjsを追加するだけです。

HaHung77 2020年12月11日

問題ない。私はこれがすべてまだここで働いていることをうれしく思います。

apchandler11 2020年12月11日

iOS 12以降のSafariでバックカメラを使用する方法を誰かが理解しましたか？
私はこのライブラリの修正バージョンを約7か月間、30種類以上のiOSおよびAndroid携帯電話とタブレットで使用しています。作業中のOSからカメラを取得するために変更されたバージョンについて上記に残したコメントを見てください。コメントは、後にwebrtcを追加することについて話し続けていますが、これがこのライブラリの全体的な問題であることがわかりました。
プロジェクトからwebrtcを完全に削除し、再コンパイルしました。 es5以上にトランスパイルされた場合、このコードではwebrtcは不要になります。ライブラリでのwebrtcの使用とそのコーディング方法では、正しいカメラを取得できませんでした。
しばらく使用していた、修正およびトランスパイルされた通常のjsファイルと縮小されたjsファイルを含めました。生徒や教師が持っているすべての電話でQrCodesを使用して学校に通うために使用します。これは、現時点で約30以上のモデルです。それはどんなカメラでもつかむことができます。
これがお役に立てば幸いです。
バックカメラコード
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });
instascan.min.zip
＃182（コメント）

Tks、@ apchandler11！あなたは私の仕事を救った。神dms！

GusRigor 2021年07月17日

このページは役に立ちましたか？

0 / 5 - 0 評価

Instascan: IOSサファリ11.4-バックカメラオープニングの問題

最も参考になるコメント

制約の問題：

Ipad / iPhone / IOSがサポートする制約：

Androidでサポートされている制約：

カメラ制約コード：

InstaScanを変更して縮小する方法：

全てのコメント44件

制約の問題：

Ipad / iPhone / IOSがサポートする制約：

Androidでサポートされている制約：

カメラ制約コード：

InstaScanを変更して縮小する方法：

制約の問題：

Ipad / iPhone / IOSがサポートする制約：

Androidでサポートされている制約：

カメラ制約コード：

InstaScanを変更して縮小する方法：

関連する問題