Instascan: IOS safari 11.4- 后置摄像头打开问题

创建于 2018-09-27 · 44评论 · 资料来源: schmich/instascan

你好，
我正在使用Instascan并面临 ios safari 的问题。
instascan 没有给出错误，但它没有打开后置摄像头。每次打开前置摄像头。
相同的代码在 Android（Chrome、Firefox）上运行良好。

变量自我;
 isQRScannerInitialised = false;
函数 testQrCode(textBoxId,DivWidth){
 self = initialiseQRScanner(DivWidth);

 self.scanner.addListener('scan', function (content, image) {
 if(textBoxId == $("#hiddenTextBox").val()){
 音频播放（）；
 var 代码 = 内容；
 $("#"+textBoxId).val(code);
 isQRScannerInitialised = false;

 }

 }， 错误的）;

 }

函数初始化QRScanner（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 = 相机；
 如果（self.cameras.length > 0）{
 if(cameras[0].name.match(/back/) || camera[0].name.match(/Back/)){
 self.activeCameraId = 相机[0].id;
 self.scanner.start(相机[0]);
 } else if(cameras[1].name.match(/back/) || camera[1].name.match(/Back/)){
 self.activeCameraId = 相机[1].id;
 self.scanner.start(相机[1]);
 }
 isQRScannerInitialised = true;

 } 别的 {

 alert('没有找到摄像头。');
 isQRScannerInitialised = false;
 返回;
 }
 }).catch(函数(e){ 
 isQRScannerInitialised = false;
 alert("二维码错误名称：-"+e.name + " & 二维码错误信息：-"+e.message); 控制台错误（e）； 
 });

 }
 回归自我；
 }

资料来源

SopraUser

👍3

最有用的评论

这是一个伟大的产品，它真的很有用，所以感谢你让它变得如此美妙。这是我研究中这个 instascan 的问题：

调用 getCameras 时，Camera 类返回从通过调用 navigator.mediaDevices.enumerateDevices() 收集的MediaDeviceInfo对象创建的 Camera 对象的集合。这些不是 MediaStream对象，它们包含启动扫描仪时使用的相机的实际流。这些 MediaDeviceInfo 对象包含 _ id _ 和 _ name _ 属性，仅此而已。它们用于创建一系列 Camera 对象。

当您调用 _scanner.start(camera)_ 时，您将传入一个Camera对象，该对象将调用

_camera.start()_ 方法然后调用 _navigator.mediaDevices.getUserMedia(contraints)_，它根据方法中列出的给定约束返回MediaStream对象的
_scanner.start()_ 调用 _scanner._enableScan(camera)_ 给它从上面的调用返回的第一个 MediaStream 对象在相机中。它设置了

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

约束问题：

传入的 Camera 对象在约束中使用其id作为 _"mandatory"_ 来搜索设备。如果未找到，则不会显示任何视频。还设置了其他“强制性”约束。

不同的设备不支持使用的约束！
在您要使用的设备上运行此链接，它会告诉您它支持哪些约束：
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 支持约束：

纵横比、面临模式、_deviceId * _、高度、宽度、纵横比等。

_当我测试这个时， _deviceId 将作为约束被忽略。_在上面的约束链接中试试这个，你会看到它设置了 deviceId = ""。当我在 javascript 中抓取它并显示它时，iphone 总是返回一个空白的 deviceId。

因此，要在 Iphone 上抓取后置摄像头，您必须使用 facesMode 而不是使用 deviceId。

Android 支持的约束：

deviceId、_lookingMode * _、aspectRatio、高度、宽度等等。

我在三星平板电脑和安卓手机上对此进行了测试。面对模式默认为“用户”前置摄像头。我对这段代码进行了试验，发现由于某种原因尚未发现，android 的 faceMode 不起作用。然而它在上面的链接中有效。我将继续调查该部分并可能修复此代码以与 facesMode 和 android 正常工作。

* *对安卓问题的回答* * *
该项目的 Gulp 版本包括 webrtc-adapter 版本 ^1.4.0，这会弄乱 Android Chrome 上的 facesMode。查看代码，它实际上删除了面对模式。

要修复此项目 - 在 _index.js_ 中，删除第 2 行require('webrtc-adapter');然后按照下面的构建过程进行操作。当我在 Chrome 上的平板电脑和 4 款不同的 Android 手机上进行测试时，它再次成功抓取了后置摄像头。

要使用此 instascan 代码在 Android 上抓取后置摄像头，您可以使用 deviceId。
确保 deviceId 是一个 _video_ 约束，例如

video: {
  devideId: this.id
}

相机约束代码：

这是项目中设置约束并获取MediaStream对象的代码
为什么这个代码不能正常工作的原因是不支持_Android_或_Iphone_的_视频constraint_说的SourceID。 这必须更改为 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）在终端cd到instascan目录：
cd instascan

4）更改javascript并运行gulp以发布代码：
gulp release

5) 这将在 _dist_ 文件夹中为您提供一个新的缩小的 instascan.min.js 项目。

我希望在这个周末解决这个 Android 问题。我希望这能让您对使用这个很棒的库的任何未来项目有足够的了解。

apchandler 于 2018-12-01

🎉10 ❤3 👍2 🚀1 😄1

所有44条评论

你可以访问苹果设备吗？你知道这个演示是否有效吗？

kibagami-jubei 于 2018-09-27

看起来这在 iOS safari 中一直存在问题，但我读到人们能够通过添加元标记来克服这个问题。只要在这个论坛上挖掘一下，你就会看到。我正在做类似的事情，所以我很感兴趣。阻碍我的是我没有现成的设备。

kibagami-jubei 于 2018-09-27

我正在 iPhone 上试用该演示，但没有成功。

kibagami-jubei 于 2018-09-28

是的，一直在研究这个，我无法让它工作。试图返回并重新阅读线程。我通过添加最新的网络 RTC 适配器并将 _playsinline_ 属性添加到视频标签，使前置摄像头工作。它可以读取摄像头，但在切换到后置摄像头时什么也不做。

kibagami-jubei 于 2018-09-29

我在 video 标签中添加了属性并提到了元标签。

SopraUser 于 2018-09-29

👍3

我在 video 标签中添加了 playsinline 属性并提到了元标签。

有人实际上已经在其中一个线程中修复了这个问题。我现在正在尝试，但必须等待有 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

我使用过元标记、视频标记和适配器最新的.js。
我正在使用 instscan.min.js 并且不知道如何单独使用“.js - scanr.js - camara.js”。

SopraUser 于 2018-10-05

👍2

我使用过元标记、视频标记和适配器最新的.js。
我正在使用 instscan.min.js 并且不知道如何单独使用“.js - scanr.js - camara.js”。

你应该已经安装了 node.js。有一个命令提示符将所有这些文件打包在一起，最终输出将是 instascanner 的缩小的 JS 文件。

kibagami-jubei 于 2018-10-05

👍1

这是一个伟大的产品，它真的很有用，所以感谢你让它变得如此美妙。这是我研究中这个 instascan 的问题：

调用 getCameras 时，Camera 类返回从通过调用 navigator.mediaDevices.enumerateDevices() 收集的MediaDeviceInfo对象创建的 Camera 对象的集合。这些不是 MediaStream对象，它们包含启动扫描仪时使用的相机的实际流。这些 MediaDeviceInfo 对象包含 _ id _ 和 _ name _ 属性，仅此而已。它们用于创建一系列 Camera 对象。

当您调用 _scanner.start(camera)_ 时，您将传入一个Camera对象，该对象将调用

_camera.start()_ 方法然后调用 _navigator.mediaDevices.getUserMedia(contraints)_，它根据方法中列出的给定约束返回MediaStream对象的
_scanner.start()_ 调用 _scanner._enableScan(camera)_ 给它从上面的调用返回的第一个 MediaStream 对象在相机中。它设置了

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

约束问题：

传入的 Camera 对象在约束中使用其id作为 _"mandatory"_ 来搜索设备。如果未找到，则不会显示任何视频。还设置了其他“强制性”约束。

在您要使用的设备上运行此链接并输入约束。它会告诉您它是否受支持：
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Ipad/Iphone/IOS 支持约束：

纵横比、面临模式、_deviceId * _、高度、宽度、纵横比等。

因此，要在 Iphone 上抓取后置摄像头，您必须使用 facesMode 而不是使用 deviceId。

Android 支持的约束：

deviceId、_lookingMode * _、aspectRatio、高度、宽度等等。

* *对安卓问题的回答* * *
该项目的 Gulp 版本包括 webrtc-adapter 版本 ^1.4.0，这会弄乱 Android Chrome 上的 facesMode。查看代码，它实际上删除了面对模式。

要修复此项目 - 在 _index.js_ 中，删除第 2 行require('webrtc-adapter');然后按照下面的构建过程进行操作。当我在 Chrome 上的平板电脑和 4 款不同的 Android 手机上进行测试时，它再次成功抓取了后置摄像头。

要使用此 instascan 代码在 Android 上抓取后置摄像头，您可以使用 deviceId。
确保 deviceId 是一个 _video_ 约束，例如

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）在终端cd到instascan目录：
cd instascan

4）更改javascript并运行gulp以发布代码：
gulp release

5) 这将在 _dist_ 文件夹中为您提供一个新的缩小的 instascan.min.js 项目。

我希望在这个周末解决这个 Android 问题。我希望这能让您对使用这个很棒的库的任何未来项目有足够的了解。

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 抛出错误； ^ AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (C:\Users\John\Downloads\instascan-ios-rear-camera\instascan-ios-rear-camera\node_modules\undertaker\lib \set-task.js:10:3)

我如何从这里开始，我真的很想尝试这个版本。它在我的安卓手机上运行得这么好？

/约翰

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 克隆https://github.com/quocthai95/instascan.git
npm 安装[email protected]
我的
大口释放

我现在可以在 iPad 和 iPhone 上的 Safari 中切换相机。好的。

johnatitide 于 2019-01-08

👍3

约束修复是否有可能合并回 schmich 的 repo？

vladimirmoushkov 于 2019-02-20

约束修复是否有可能合并回 schmich 的 repo？

我创建了新的拉取请求。等待接受^^

quocthai95 于 2019-02-21

@quocthai95嗨，我按照https://github.com/schmich/instascan/issues/182#issuecomment -447198290 中的步骤操作。

我想知道，我在我的 android chrome 上默认使用前置摄像头。想知道如何将后置摄像头设为默认值？你有示例代码吗？

fariskas 于 2019-04-01

@法里斯卡斯，
使用正则表达式测试是否匹配 /back/ 然后启动它，这样您就可以将后置摄像头作为默认值。

`Instascan.Camera.getCameras().then(function (cameras) {
if(cameras[0].name.match(/back/i)){
扫描仪。开始（相机[0]）；
} else if(cameras[1].name.match(/back/i)){
扫描仪。开始（相机[1]）；
}
}

quocthai95 于 2019-04-03

👍3

这可能很有用：我正在使用 for 循环在cameras[i].name找到“back”，但是我没有成功并且无法在 iPad 上选择后置摄像头，直到我将cameras[i].name写入console.log并发现我必须寻找“achterzijde”（在荷兰语中是“back”）。
因此，如果您尝试在 iOS 中选择后置摄像头不成功，请尝试将“back”翻译为“back”或将cameras[i].name写入console.log以找出后置摄像头的名称。

diboma 于 2019-04-20

👍1

我可以确认该演示仅适用于前置摄像头。这是 iOS 12.2 上的 Safari

dgtlrift 于 2019-04-27

有没有人想出如何在 iOS 12+ 上使用带有 Safari 的后置摄像头？

nicoeat614 于 2019-06-07

有没有人想出如何在 iOS 12+ 上使用带有 Safari 的后置摄像头？

我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。

我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。

我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 js 文件。我在学生和老师拥有的任何手机上使用 QrCodes 使用它来上学，目前已经有大约 30 多种型号。它可以抓取任何相机。

我希望这有帮助。

后置摄像头代码
``
扫描仪 = 新 Instascan.Scanner({ 视频：视频，扫描周期：4，镜像：假 })
.then(handleSuccess)
.catch(handleError);
//开始扫描
scan.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

这是一个伟大的产品，它真的很有用，所以感谢你让它变得如此美妙。这是我研究中这个 instascan 的问题：
调用 getCameras 时，Camera 类返回从通过调用 navigator.mediaDevices.enumerateDevices() 收集的MediaDeviceInfo对象创建的 Camera 对象的集合。这些不是 MediaStream对象，它们包含启动扫描仪时使用的相机的实际流。这些 MediaDeviceInfo 对象包含 _ id _ 和 _ name _ 属性，仅此而已。它们用于创建一系列 Camera 对象。
当您调用 _scanner.start(camera)_ 时，您将传入一个Camera对象，该对象将调用
_camera.start()_ 方法然后调用 _navigator.mediaDevices.getUserMedia(contraints)_，它根据方法中列出的给定约束返回MediaStream对象的
_scanner.start()_ 调用 _scanner._enableScan(camera)_ 给它从上面的调用返回的第一个 MediaStream 对象在相机中。它将 src 元素设置为此媒体流对象。
**This Part Is the Disconnect and what is messing it all up!**
约束问题：
传入的 Camera 对象在约束中使用其id作为 _"mandatory"_ 来搜索设备。如果未找到，则不会显示任何视频。还设置了其他“强制性”约束。
不同的设备不支持使用的约束！
在您要使用的设备上运行此链接，它会告诉您它支持哪些约束：
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 支持约束：
纵横比、面临模式、_deviceId * _、高度、宽度、纵横比等。
_当我测试这个时， _deviceId 将作为约束被忽略。_在上面的约束链接中试试这个，你会看到它设置了 deviceId = ""。当我在 javascript 中抓取它并显示它时，iphone 总是返回一个空白的 deviceId。
因此，要在 Iphone 上抓取后置摄像头，您必须使用 facesMode 而不是使用 deviceId。
Android 支持的约束：
deviceId、_lookingMode * _、aspectRatio、高度、宽度等等。
我在三星平板电脑和安卓手机上对此进行了测试。面对模式默认为“用户”前置摄像头。我对这段代码进行了试验，发现由于某种原因尚未发现，android 的 faceMode 不起作用。然而它在上面的链接中有效。我将继续调查该部分并可能修复此代码以与 facesMode 和 android 正常工作。
* _ *对安卓问题的回答* _ **
该项目的 Gulp 版本包括 webrtc-adapter 版本 ^1.4.0，这会弄乱 Android Chrome 上的 facesMode。查看代码，它实际上删除了面对模式。
要修复此项目 - 在 _index.js_ 中，删除第 2 行require('webrtc-adapter');然后按照下面的构建过程进行操作。当我在 Chrome 上的平板电脑和 4 款不同的 Android 手机上进行测试时，它再次成功抓取了后置摄像头。
要使用此 instascan 代码在 Android 上抓取后置摄像头，您可以使用 deviceId。
确保 deviceId 是一个 _video_ 约束，例如
video: {
  devideId: this.id
}
相机约束代码：
这是项目中设置约束并获取MediaStream对象的代码
为什么这个代码不能正常工作的原因是不支持_Android_或_Iphone_的_视频constraint_说的SourceID。 这必须更改为 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
在终端 cd 到 instascan 目录：
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 的后置摄像头？
我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。
我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。
我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 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 扫描二维码。我正在开发网站并进行一些测试，我使用带有 4 个后置摄像头的手机（HUAWEI P30 PRO）访问该网站。

我已经尝试了 $.each 并且选择了第一个后置摄像头，我无法扫描任何东西，因为视觉非常模糊并且有很多变焦。

但是，如果我选择相机[2]，我就可以扫描所有内容。

是否存在选择“主”后置摄像头的通用方法？

我的意思是，我的 webapp 将被很多用户使用，不同的手机，不同数量的摄像头，摄像头的顺序也会不同。

或者您是否建议对所有相机进行选择，然后让用户选择最适合他的相机？

谢谢

arnaubosch 于 2020-02-13

@apchandler嗨，您知道是否存在选择“主”后置摄像头的方法？
我有一个网站，我的用户将使用 instascan 扫描二维码。我正在开发网站并进行一些测试，我使用带有 4 个后置摄像头的手机（HUAWEI P30 PRO）访问该网站。
我已经尝试了 $.each 并且选择了第一个后置摄像头，我无法扫描任何东西，因为视觉非常模糊并且有很多变焦。
但是，如果我选择相机[2]，我就可以扫描所有内容。
是否存在选择“主”后置摄像头的通用方法？
我的意思是，我的 webapp 将被很多用户使用，不同的手机，不同数量的摄像头，摄像头的顺序也会不同。
或者您是否建议对所有相机进行选择，然后让用户选择最适合他的相机？
谢谢

对不起。当存在多个时，我不知道任何指定为“主”相机的值。您可以为选择相机功能指定标准对象，指定它必须至少具有特定分辨率和其他规格。这至少可以给你一个最低能力的相机。否则，您的解决方案听起来很适合您的处理方式。

apchandler11 于 2020-02-13

@apchandler嗨，您知道是否存在选择“主”后置摄像头的方法？
我有一个网站，我的用户将使用 instascan 扫描二维码。我正在开发网站并进行一些测试，我使用带有 4 个后置摄像头的手机（HUAWEI P30 PRO）访问该网站。
我已经尝试了 $.each 并且选择了第一个后置摄像头，我无法扫描任何东西，因为视觉非常模糊并且有很多变焦。
但是，如果我选择相机[2]，我就可以扫描所有内容。
是否存在选择“主”后置摄像头的通用方法？
我的意思是，我的 webapp 将被很多用户使用，不同的手机，不同数量的摄像头，摄像头的顺序也会不同。
或者您是否建议对所有相机进行选择，然后让用户选择最适合他的相机？
谢谢
对不起。当存在多个时，我不知道任何指定为“主”相机的值。您可以为选择相机功能指定标准对象，指定它必须至少具有特定分辨率和其他规格。这至少可以给你一个最低能力的相机。否则，您的解决方案听起来很适合您的处理方式。

非常感谢您的回答！我会尝试解决这个问题。 Instascan 可以返回相机的分辨率吗？

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 的后置摄像头？
我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。
我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。
我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 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 种不同型号的手机运行 15 个月，而三星手机上只有一个小问题，当三星修补它时修复了它。所以这是一个三星 WebKit 错误。

apchandler11 于 2020-04-23

你好，
我也像其他人一样面临 IOS 的后置摄像头问题。我的后置摄像头未在 iPhone 上打开，默认前置摄像头正在运行。如果有人使用 safari 的更新版本（13.xx.xx）解决了这个问题，请帮助我。

kamalchetu 于 2020-06-08

有没有人想出如何在 iOS 12+ 上使用带有 Safari 的后置摄像头？
我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。
我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。
我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 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 master 分支，将您的文件放入“dist”文件夹中，就是这样！先生非常感谢您！

antworks-hub 于 2020-06-11

在 Android 和 iOS 上都非常棒！我刚刚下载了原始的 instascan master 分支，将您的文件放入“dist”文件夹中，就是这样！先生非常感谢您！

@antworks-hub 你使用的是分支的完整代码还是缩小后的 js？
你从哪里得到“dist”文件夹？

Sandi2211 于 2020-07-07

在 Android 和 iOS 上都非常棒！我刚刚下载了原始的 instascan master 分支，将您的文件放入“dist”文件夹中，就是这样！先生非常感谢您！
@antworks-hub 你使用的是分支的完整代码还是缩小后的 js？
你从哪里得到“dist”文件夹？

@Sandi2211我想我在原始 instascan 主分支的根目录中创建了一个“dist”文件夹，并将 instasca,min.zip 文件的内容放入该文件夹中。

antworks-hub 于 2020-07-08

有没有人想出如何在 iOS 12+ 上使用带有 Safari 的后置摄像头？
我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。
我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。
我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 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 的后置摄像头？
我已经在 30 多种类型的 ios 和 android 手机和平板电脑上使用这个库的修改版本大约 7 个月了。看看我在上面留下的关于修改版本的评论，以便从您正在使用的操作系统中获取任何相机。评论一直在谈论在添加 webrtc 之后，我发现这是这个库的全部问题。
我从项目中完全删除了 webrtc 并重新编译它。当转换为 es5 或更高版本时，此代码不再需要 webrtc。库中 webrtc 的使用及其编码方式不允许检索到正确的相机。
我已经包含了我已经使用了一段时间的固定和转译的常规和缩小的 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！你保存了我的工作。天啊！

GusRigor 于 2021-07-17

此页面是否有帮助？

0 / 5 - 0 等级

Instascan: IOS safari 11.4- 后置摄像头打开问题

最有用的评论

约束问题：

Ipad/Iphone/IOS 支持约束：

Android 支持的约束：

相机约束代码：

如何修改 InstaScan 并缩小它：

所有44条评论

约束问题：

Ipad/Iphone/IOS 支持约束：

Android 支持的约束：

相机约束代码：

如何修改 InstaScan 并缩小它：

约束问题：

Ipad/Iphone/IOS 支持约束：

Android 支持的约束：

相机约束代码：

如何修改 InstaScan 并缩小它：

相关问题