Instascan: IOS Safari 11.4- Problema de abertura da câmera traseira

Você tem acesso ao dispositivo da apple? Você sabe se a demonstração está funcionando?

Parece que isso está tendo problemas com o iOS safari, mas li que as pessoas conseguiram superar esse problema adicionando metatags. Basta vasculhar este fórum e você verá. Estou trabalhando em algo semelhante, então estou interessado. O que está me impedindo é que não tenho um dispositivo disponível.

Eu estava testando o demo em um iPhone, mas não funcionou.

Sim, estou trabalhando nisso, não consigo fazer isso funcionar. Tentando voltar e reler tópicos. Eu fiz a câmera frontal funcionar adicionando o adaptador Web RTC mais recente e adicionando o atributo _playsinline_ à tag de vídeo. Ele pode ler as câmeras, mas não faz nada ao alternar para a câmera traseira.

Eu adicionei o atributo dentro da tag de vídeo e também mencionei a meta tag.

Eu adicionei o atributo playsinline dentro da tag de vídeo e também mencionei a meta tag.

Alguém realmente consertou isso em um dos fios. Estou tentando fazer isso agora, mas tenho que esperar que alguém com um iPhone comece a trabalhar.

Ei, consegui fazer isso funcionar, mas ainda há o problema, apesar de escolher as câmeras, o padrão será sempre a câmera traseira traseira. Então, se você precisa escolher a câmera frontal, está ferrado (mas, falando sério, quem vai tentar digitalizar com a câmera frontal).

Aqui está o que eu fiz!

Eu adicionei a meta tag.
<meta name="apple-mobile-web-app-capable" content="yes">

Adicionado este atributo:
<video id="scanner" class="video-back" playsinline></video>

Adicionado este arquivo JS:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

E então empacotado para lançar: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. Não tenho certeza se você sabe como usar o Gulp com node.js, mas é fácil. Aprendi em 15 minutos! Estou usando a versão do Instascan desta pessoa. Ele sabia do problema e foi capaz de corrigi-lo. Espero que isto ajude. Boa sorte.

Usei meta tag, tag de vídeo e adapter-latest.js.
E estou usando instscan.min.js e não sei como posso usar o ".js - scanner.js - camara.js" separadamente.

Usei meta tag, tag de vídeo e adapter-latest.js.
E estou usando instscan.min.js e não sei como posso usar o ".js - scanner.js - camara.js" separadamente.

Você deve ter instalado o node.js. Há um prompt de comando que empacota todos esses arquivos juntos, a saída final seria o arquivo JS minimizado do instascanner.

Este é um ótimo produto e tem sido muito útil, então obrigado por torná-lo maravilhoso. Aqui está o problema com este instascan da minha pesquisa:

• A classe Camera ao chamar getCameras retorna uma coleção de objetos Camera que são criados a partir dos objetos MediaDeviceInfo coletados por meio de uma chamada para navigator.mediaDevices.enumerateDevices (). Esses NÃO são objetos id _ e _ name _ e nada mais. Eles são usados ​​para criar uma série de objetos Camera.

Ao chamar _scanner.start (camera) _, você está passando um objeto Camera que chamará o método _camera.start () _ na câmera.

• O método _camera.start () _ ENTÃO chama _navigator.mediaDevices.getUserMedia (contraints) _, que retorna um Arrary de objetos
• _scanner.start () _ chama _scanner._enableScan (camera) _ dando a ele o primeiro objeto MediaStream retornado da chamada acima na camera. Ele define o

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

O problema da restrição:

O objeto Camera passado usa seu id nas restrições como _ "obrigatório" _ para a busca dos dispositivos. Se não for encontrado, nenhum vídeo será mostrado. Também outras restrições "obrigatórias" são definidas.

Dispositivos diferentes NÃO SUPORTAM as restrições usadas!
Execute este link no dispositivo que deseja usar e ele dirá quais restrições ele suporta:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Execute este link no dispositivo que deseja usar e insira uma restrição. Ele dirá se é compatível:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Restrições com suporte para Ipad / Iphone / IOS:

aspectRatio, takingMode, _deviceId * _, height, width, aspectRatio e outros.

_Quando testei isso, _deviceId será ignorado como uma restrição._ Experimente no link acima para restrições e você verá que define o deviceId = "". Quando o peguei em javascript e o exibi, o iphone sempre retornou um deviceId em branco.

Então, para pegar a câmera traseira do Iphone, você tem que usar o ConnectingMode e NÃO o deviceId.

Restrições com suporte para Android:

deviceId, _facingMode * _, aspectRatio, height, width e muitos outros.

Eu testei isso, em um tablet Samsung e telefone Android. O FaceMode padronizado para a câmera frontal do "usuário". Eu experimentei este código e descobri que por algum motivo ainda descoberto, o ConnectingMode para android não está funcionando. Ainda assim, funciona no link acima. Vou continuar a investigar essa parte e, possivelmente, corrigir este código para funcionar corretamente com o lookingMode e o android.

* * RESPOSTA AO PROBLEMA DO ANDROID * * *
A compilação Gulp deste projeto inclui a versão do adaptador webrtc ^ 1.4.0 que bagunça o ConnectingMode no Android Chrome. Olhando através do código, ele realmente excluiu o modo de revestimento.

• Para corrigir neste projeto - em _index.js_, remova a linha 2 require('webrtc-adapter'); Em seguida, siga os procedimentos de construção abaixo. Quando testei em um tablet e 4 telefones Android diferentes no Chrome, tudo funcionou novamente para pegar a câmera traseira.

Para pegar a câmera traseira do Android com este código instascan, você pode usar o deviceId.
Certifique-se de que deviceId seja uma restrição _video_ como

video: {
  devideId: this.id
}

Código de restrição da câmera:

Aqui está o código do projeto que define as restrições e obtém os objetos MediaStream
A razão pela qual este código não funciona corretamente é que sourceId da Isso deve ser alterado para deviceId . Além disso, todos os itens obrigatórios precisam ser eliminados, caso não sejam o que seu dispositivo manipula.

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);
});

Como modificar o InstaScan e minimizá-lo:

para obter isso e alterá-lo, tenho usado o VSCode.
1) Instale o Node.js e o vsCode.
2) em um terminal no diretório que você deseja fazer o download, execute:
git clone https://github.com/JoseCDB/instascan.git

3) no cd do terminal para o diretório instascan:
cd instascan

4) mude o javascript e execute gulp para liberar o código:
gulp release

5) Isso fornecerá um novo item instascan.min.js minimizado na pasta _dist_.

Eu vou descobrir esse problema do Android, esperançosamente, neste fim de semana. Espero que isso lhe dê uma visão suficiente para quaisquer projetos futuros com esta biblioteca incrível.

Oi, isso deve funcionar bem.
Primeiro, adicione adapter.js de https://github.com/webrtc/adapter.

Depois disso, clone isto:
git clone https://github.com/quocthai95/instascan.git
Corre:
npm i
para instalar o necessário

Use gulp para liberar o código final:
gulp release

Verifiquei no Iphone 6 plus (iOS 11.4) e no Iphone 8 plus (iOS 11.3) e funcionou bem. Você pode trocar de câmeras normalmente.

Espero que você possa resolver seu problema.

Oi, isso deve funcionar bem.
Primeiro, adicione adapter.js de https://github.com/webrtc/adapter.

Depois disso, clone isto:
git clone https://github.com/quocthai95/instascan.git
Corre:
npm i
para instalar o necessário

Use gulp para liberar o código final:
gulp release

Verifiquei no Iphone 6 plus (iOS 11.4) e no Iphone 8 plus (iOS 11.3) e funcionou bem. Você pode trocar de câmeras normalmente.

Espero que você possa resolver seu problema.

Ao instalar o necessário, obtenho "12 vulnerabilidades (1 baixa, 5 moderada, 6 alta)".
Alguns comandos "$ npm install --save-dev [nome do pacote]" parecem resolver essas vulnerabilidades, mas não posso construí-los devido à seguinte exceção:

$ gulp release assert.js: 351 throw err; ^ AssertionError [ERR_ASSERTION]: A função de tarefa deve ser especificada em Gulp.set [as _setTask] (C: \ Users \ John \ Downloads \ instascan-ios-rear-camera \ instascan-ios-rear-camera \ node_modules \ Underker \ lib \ set-task.js: 10: 3)

Como faço para continuar a partir daqui, eu realmente gostaria de experimentar esta compilação. Funciona tão bem com o meu telefone Android?

/João

Olá @johnatitide ,
Você instalou a versão mais recente do gulp (4.0.0)? Em caso afirmativo, tente restringi-lo a 3.9.1. PARA SUA INFORMAÇÃO:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
Ou você pode fornecer quais comandos você fez para construí-lo.

Olá @ quocthai95

A construção funciona com os seguintes comandos:
git clone https://github.com/quocthai95/instascan.git
npm install [email protected]
npm eu
gulp release

Agora posso trocar de câmera no Safari no iPad e no iPhone. Agradável.

Há alguma chance de as correções de restrição serem mescladas de volta ao repositório de schmich?

Há alguma chance de as correções de restrição serem mescladas de volta ao repositório de schmich?

Eu criei uma nova solicitação de pull. Aguarde aceitar ^^

@ quocthai95 hi, ive seguiu seus passos em https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

Eu queria saber, estou recebendo câmera frontal como padrão no meu cromo android. querendo saber como posso tornar a câmera traseira como padrão? você tem um código de exemplo?

@fariskas ,
Use regexp para testar se corresponde a / voltar / depois iniciá-lo, para que você possa ter a câmera traseira como padrão.

`Instascan.Camera.getCameras (). Then (function (cameras) {
if (cameras [0] .name.match (/ back / i)) {
scanner.start (câmeras [0]);
} else if (cameras [1] .name.match (/ back / i)) {
scanner.start (câmeras [1]);
}
}

Isso pode ser útil: estou usando um loop for para localizar "back" em cameras[i].name mas não tive sucesso e não consegui selecionar a câmera traseira no iPad até que escrevi cameras[i].name para console.log e descobri que precisava procurar por "achterzijde" (que é "back" em holandês).
Portanto, se você não conseguir selecionar a câmera traseira no iOS, tente traduzir "back" ou escreva cameras[i].name para console.log para descobrir qual é o nome da câmera traseira.

Posso confirmar que a demonstração só funciona com a câmera frontal. Isso é com Safari no iOS 12.2

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.

Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.

Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.

Eu espero que isso ajude.

Código da câmera traseira
`` `
scanner = new Instascan.Scanner ({video: video, scanPeriod: 4, mirror: false})
.então (lidar com sucesso)
.catch (handleError);
// Comece a escanear
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

Este é um ótimo produto e tem sido muito útil, então obrigado por torná-lo maravilhoso. Aqui está o problema com este instascan da minha pesquisa:

• A classe Camera ao chamar getCameras retorna uma coleção de objetos Camera que são criados a partir dos objetos MediaDeviceInfo coletados por meio de uma chamada para navigator.mediaDevices.enumerateDevices (). Esses NÃO são objetos id _ e _ name _ e nada mais. Eles são usados ​​para criar uma série de objetos Camera.

Ao chamar _scanner.start (camera) _, você está passando um objeto Camera que chamará o método _camera.start () _ na câmera.

• O método _camera.start () _ ENTÃO chama _navigator.mediaDevices.getUserMedia (contraints) _, que retorna um Arrary de objetos
• _scanner.start () _ chama _scanner._enableScan (camera) _ dando a ele o primeiro objeto MediaStream retornado da chamada acima na camera. Ele define o elemento src para este objeto de fluxo de mídia.
  **This Part Is the Disconnect and what is messing it all up!**

O problema da restrição:

O objeto Camera passado usa seu id nas restrições como _ "obrigatório" _ para a busca dos dispositivos. Se não for encontrado, nenhum vídeo será mostrado. Também outras restrições "obrigatórias" são definidas.

Dispositivos diferentes NÃO SUPORTAM as restrições usadas!
Execute este link no dispositivo que deseja usar e ele dirá quais restrições ele suporta:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Execute este link no dispositivo que deseja usar e insira uma restrição. Ele dirá se é compatível:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Restrições com suporte para Ipad / Iphone / IOS:

aspectRatio, takingMode, _deviceId * _, height, width, aspectRatio e outros.

_Quando testei isso, _deviceId será ignorado como uma restrição._ Experimente no link acima para restrições e você verá que define o deviceId = "". Quando o peguei em javascript e o exibi, o iphone sempre retornou um deviceId em branco.

Então, para pegar a câmera traseira do Iphone, você tem que usar o ConnectingMode e NÃO o deviceId.

Restrições com suporte para Android:

deviceId, _facingMode * _, aspectRatio, height, width e muitos outros.

Eu testei isso, em um tablet Samsung e telefone Android. O FaceMode padronizado para a câmera frontal do "usuário". Eu experimentei este código e descobri que por algum motivo ainda descoberto, o ConnectingMode para android não está funcionando. Ainda assim, funciona no link acima. Vou continuar a investigar essa parte e, possivelmente, corrigir este código para funcionar corretamente com o lookingMode e o android.

* _ * RESPOSTA AO PROBLEMA DO ANDROID * _ **
A compilação Gulp deste projeto inclui a versão do adaptador webrtc ^ 1.4.0 que bagunça o ConnectingMode no Android Chrome. Olhando através do código, ele realmente excluiu o modo de revestimento.

• Para corrigir neste projeto - em _index.js_, remova a linha 2 require('webrtc-adapter'); Em seguida, siga os procedimentos de construção abaixo. Quando testei em um tablet e 4 telefones Android diferentes no Chrome, tudo funcionou novamente para pegar a câmera traseira.

Para pegar a câmera traseira do Android com este código instascan, você pode usar o deviceId.
Certifique-se de que deviceId seja uma restrição _video_ como

video: {
  devideId: this.id
}

Código de restrição da câmera:

Aqui está o código do projeto que define as restrições e obtém os objetos MediaStream
A razão pela qual este código não funciona corretamente é que sourceId da Isso deve ser alterado para deviceId . Além disso, todos os itens obrigatórios precisam ser eliminados, caso não sejam o que seu dispositivo manipula.

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);
});

Como modificar o InstaScan e minimizá-lo:

para obter isso e alterá-lo, tenho usado o VSCode.

1. Instale o Node.js e o vsCode.
2. em um terminal no diretório que você deseja fazer o download, execute:
   git clone https://github.com/JoseCDB/instascan.git
3. no cd do terminal para o diretório instascan:
   cd instascan
4. mude o javascript e execute gulp para liberar o código:
   gulp release
5. Isso lhe dará um novo item instascan.min.js minimizado na pasta _dist_.

Eu vou descobrir esse problema do Android, esperançosamente, neste fim de semana. Espero que isso lhe dê uma visão suficiente para quaisquer projetos futuros com esta biblioteca incrível.

Eu segui as etapas acima e editei o arquivo
facingMode: { exact: "environment" },
Funciona para mim. Obrigado @apchandler

Estou feliz que você tenha algo para trabalhar para você! Obrigado @glorynguyen por postar essa correção também!

Infelizmente, essas soluções não funcionam no iOS 13. É simplesmente em branco (nem mesmo preto).
Ao depurar remotamente o Safari, também nenhum erro é mostrado no console.

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.

Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.

Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.

Eu espero que isso ajude.

Código da câmera traseira

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 (comentário)

Isso resolve meu problema, muito obrigado.

Qual é a última correção para isso? Eu tentei alguns do tópico, mas parece que só consigo a câmera frontal.
Não sei como usar o Gulp ou realmente compilar projetos .js .git, eu principalmente código em C # / Asp.net Mvc, então isso é um pouco novo para mim.
A solução de apchandler me dá erros. (Vídeo não definido)
Atualmente carregando um instascan.min.js "corrigido" para dispositivos Android e sua versão para IOS, mas não consigo fazer funcionar.

Qual é a última correção para isso? Eu tentei alguns do tópico, mas parece que só consigo a câmera frontal.
Não sei como usar o Gulp ou realmente compilar projetos .js .git, eu principalmente código em C # / Asp.net Mvc, então isso é um pouco novo para mim.
A solução de apchandler me dá erros. (Vídeo não definido)
Atualmente carregando um instascan.min.js "corrigido" para dispositivos Android e sua versão para IOS, mas não consigo fazer funcionar.

Você tem o elemento de vídeo html presente?
`` `

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

var self = this;
self.scanner = new Instascan.Scanner ({video: document.getElementById ('preview'), scanPeriod: 5});
self.scanner.addListener ('scan', função (conteúdo, imagem) {
self.scans.unshift ({data: + (Date.now ()), conteúdo: conteúdo});
});
Instascan.Camera.getCameras (). Then (function (cameras) {
self.cameras = câmeras;
if (cameras.length> 0) {
self.activeCameraId = câmeras [0] .id;
self.scanner.start (câmeras [0]);
} outro {
console.error ('Nenhuma câmera encontrada.');
}
}). catch (function (e) {
console.error (e);
});
`` `

Sim, estou funcionando com:

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

Iniciando câmeras [0] para dispositivos Iphone / Ios. E isso para 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>

Parece que o problema foi que eu só verifiquei se Request.UserAgent.Contains ("ios") e não "iphone", então executei o script do Android para o iPhone também.

É bom saber disso. Obrigado pela informação.

@apchandler Olá, Você sabe se existe uma maneira de selecionar a câmera traseira 'principal'?

Tenho um site onde meus usuários irão escanear QR CODES usando o instascan. Estou a desenvolver o site e a fazer alguns testes acedi ao site através do meu telemóvel que possui 4 câmaras traseiras (HUAWEI P30 PRO).

Eu tentei o $ .each e com a primeira câmera traseira selecionada não consigo escanear nada porque a visão é muito difusa e com muito zoom.

Mas, se eu selecionar as câmeras [2], posso digitalizar tudo.

Existe uma maneira genérica de selecionar a câmera traseira 'principal'?

Quer dizer, meu webapp será usado por tantos usuários com diferentes telefones celulares, diferentes números de câmeras e a ordem das câmeras também será diferente.

Ou você recomenda fazer uma seleção com todas as câmeras e depois deixar o usuário escolher aquela que funciona perfeitamente para ele?

Obrigado

@apchandler Olá, Você sabe se existe uma maneira de selecionar a câmera traseira 'principal'?

Tenho um site onde meus usuários irão escanear QR CODES usando o instascan. Estou a desenvolver o site e a fazer alguns testes acedi ao site através do meu telemóvel que possui 4 câmaras traseiras (HUAWEI P30 PRO).

Eu tentei o $ .each e com a primeira câmera traseira selecionada não consigo escanear nada porque a visão é muito difusa e com muito zoom.

Mas, se eu selecionar as câmeras [2], posso digitalizar tudo.

Existe uma maneira genérica de selecionar a câmera traseira 'principal'?

Quer dizer, meu webapp será usado por tantos usuários com diferentes telefones celulares, diferentes números de câmeras e a ordem das câmeras também será diferente.

Ou você recomenda fazer uma seleção com todas as câmeras e depois deixar o usuário escolher aquela que funciona perfeitamente para ele?

Obrigado

Sinto muito. Não conheço nenhum valor que especifique como câmera 'principal' quando várias estão presentes. Você pode atribuir à função de câmera selecionada o objeto de critério, especificando que deve ter pelo menos uma determinada resolução e outras especificações. Isso poderia pelo menos dar a você uma câmera de habilidade mínima. Caso contrário, sua solução parece boa para como você deseja abordá-la.

@apchandler Olá, Você sabe se existe uma maneira de selecionar a câmera traseira 'principal'?
Tenho um site onde meus usuários irão escanear QR CODES usando o instascan. Estou a desenvolver o site e a fazer alguns testes acedi ao site através do meu telemóvel que possui 4 câmaras traseiras (HUAWEI P30 PRO).
Eu tentei o $ .each e com a primeira câmera traseira selecionada não consigo escanear nada porque a visão é muito difusa e com muito zoom.
Mas, se eu selecionar as câmeras [2], posso digitalizar tudo.
Existe uma maneira genérica de selecionar a câmera traseira 'principal'?
Quer dizer, meu webapp será usado por tantos usuários com diferentes telefones celulares, diferentes números de câmeras e a ordem das câmeras também será diferente.
Ou você recomenda fazer uma seleção com todas as câmeras e depois deixar o usuário escolher aquela que funciona perfeitamente para ele?
Obrigado

Sinto muito. Não conheço nenhum valor que especifique como câmera 'principal' quando várias estão presentes. Você pode atribuir à função de câmera selecionada o objeto de critério, especificando que deve ter pelo menos uma determinada resolução e outras especificações. Isso poderia pelo menos dar a você uma câmera de habilidade mínima. Caso contrário, sua solução parece boa para como você deseja abordá-la.

Muito obrigado pela sua resposta! Vou tentar com a resolução. O Instascan pode retornar a resolução de uma câmera?

De acordo com os métodos fornecidos por @glorynguyen e @apchandler.
Agora pode ligar a câmera traseira
Modificar instascan.min
Antes
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
Depois de
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:[]}}

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.

Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.

Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.

Eu espero que isso ajude.

Código da câmera traseira

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 (comentário)

O senhor acabou de salvar o emprego de um desenvolvedor júnior, você tem um fã para a vida toda.

Obrigado. Eu estava exatamente onde você estava quando vi este código. Tinha prazo e precisava de câmeras de 30 tipos diferentes. Estou feliz que eles escreveram isso.

Em execução há 15 meses com 45 modelos diferentes de telefones e apenas um soluço em um telefone Samsung que foi consertado quando a Samsung o corrigiu. Portanto, foi um erro do Samsung WebKit.

Oi,
Também estou enfrentando problema de câmera traseira com IOS como outra pessoa. Minha câmera traseira não está abrindo no iPhone, a câmera frontal padrão está funcionando. Ajude-me se alguém tiver resolvido esse problema com a versão atualizada (13.xx. Xx) do Safari.

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.

Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.

Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.

Eu espero que isso ajude.

Código da câmera traseira

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 (comentário)

funcionou perfeitamente no Android e no iOS! Acabei de baixar o branch master instascan original, coloquei seus arquivos na pasta "dist" e pronto! muito obrigado senhor!

funcionou perfeitamente no Android e no iOS! Acabei de baixar o branch master instascan original, coloquei seus arquivos na pasta "dist" e pronto! muito obrigado senhor!

@antworks-hub você usou todo o código do branch ou o js minimizado?
de onde você tirou a pasta "dist"?

funcionou perfeitamente no Android e no iOS! Acabei de baixar o branch master instascan original, coloquei seus arquivos na pasta "dist" e pronto! muito obrigado senhor!

@antworks-hub você usou todo o código do branch ou o js minimizado?
de onde você tirou a pasta "dist"?

@ Sandi2211 Acho que criei uma pasta "dist" na raiz do branch master instascan original e coloquei o conteúdo do arquivo instasca, min.zip nessa pasta.

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.
Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.
Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.
Eu espero que isso ajude.
Código da câmera traseira

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 (comentário)

Isso resolve meu problema, muito obrigado.

Obrigado cara, meu está funcionando bem, basta adicionar seu novo js.

Sem problemas. Estou feliz que tudo ainda esteja funcionando aqui.

Alguém descobriu como usar a câmera traseira com o Safari no iOS 12+?

Eu tenho usado uma versão modificada desta biblioteca por cerca de 7 meses agora em mais de 30 tipos ios e telefones e tablets Android. Veja os comentários que deixei acima sobre uma versão modificada para obter qualquer câmera do sistema operacional com o qual você está trabalhando. Os comentários continuam falando sobre adicionar o webrtc depois, que eu descobri ser o problema completo desta biblioteca.

Removi completamente o webrtc do projeto e recompilei-o. webrtc não é mais necessário com este código quando transpilado para ES5 ou superior. O uso do webrtc na biblioteca e a forma como foi codificado não permitiu a recuperação da câmera correta.

Eu incluí os arquivos js regulares e minificados corrigidos e transpilados que venho usando há algum tempo. Eu o uso para atendimento escolar com QrCodes em todos os telefones que alunos e professores têm, que são cerca de 30+ modelos até o momento. Ele pode pegar qualquer câmera.

Eu espero que isso ajude.

Código da câmera traseira

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 (comentário)

Atenciosamente, @ apchandler11! Você salvou meu trabalho. deus dms!