Bonjour,
je souhaite faire une petite application web pour tablette (iOS 11 et Android). Cette application doit utiliser un scanner de QR code (instascan: https://github.com/schmich/instascan). La démo (https://schmich.github.io/instascan/) fonctionne avec mes 3 terminaux (PC, Android et iOS).
Mon application doit se faire via un Point d'accès Wifi local (déconnecté de l'Internet). Donc j'essaye de bidouiller la démo:
- Je copie le HTML de la page
- Je télécharge les fichiers javascript, css et png (en suivant les liens de la démo).
- Dans la page Web, je change les liens des scripts, feuilles de styles et icône pour les mettre en relatif (js/, css/, et img/).
Et la patatra !
Ca fonctionne pour le PC (la camera est affiché et les codes sont scannés). Toutes les requetes sont bien en local (aucune vers l’extérieur).
Mais pour les tablettes aucune ne fonctionne en local, ni Android ni iOS. Aucune camera n'est détecté et aucune autorisation n'est demandée (pour le PC l'autorisation est demandée à chaque fois).
Donc pour le même code (à l'exception de l'emplacement des ressources), ça fonctionne sur tablette sur le web mais pas en local.
Avez vous une idée du problème ?
Merci d'avance
Voila le code html:
<html>
<head>
<title>Instascan – Demo
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/adapter.min.js">
<script type="text/javascript" src="js/vue.min.js">
<script type="text/javascript" src="js/instascan.min.js">
</head>
<body>
<!-- <a href="https://github.com/schmich/instascan"></a>
--><div id="app">
<div class="sidebar">
<section class="cameras">
<h2>Cameras
<ul>
<li v-if="cameras.length === 0" class="empty">No cameras found</li>
<li v-for="camera in cameras">
<span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ formatName(camera.name) }}
<span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
<a @click.stop="selectCamera(camera)">{{ formatName(camera.name) }}</a>
</span>
</li>
</ul>
</section>
<section class="scans">
<h2>Scans</h2>
<ul v-if="scans.length === 0">
<li class="empty">No scans yet</li>
</ul>
<transition-group name="scans" tag="ul">
<li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
</transition-group>
</section>
</div>
<div class="preview-container">
<video id="preview">
</div>
</div>
<script type="text/javascript" src="js/app.js">
</body>
</html>
et le code JS (js/app.js):
var app = new Vue({
el: '#app',
data: {
scanner: null,
activeCameraId: null,
cameras: [],
scans: []
},
mounted: function () {
var self = this;
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', function (content, image) {
self.scans.unshift({ date: +(Date.now()), content: content });
});
Instascan.Camera.getCameras().then(function (cameras) {
self.cameras = cameras;
if (cameras.length > 0) {
self.activeCameraId = cameras[0].id;
self.scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
},
methods: {
formatName: function (name) {
return name || '(unknown)';
},
selectCamera: function (camera) {
this.activeCameraId = camera.id;
this.scanner.start(camera);
}
}
});
# Inclusions
Posté par gUI (Mastodon) . Évalué à 3.
Tu inclues du code par exemple ici :
<script type="text/javascript" src="js/instascan.min.js">Mais sais-tu si ce code tente des accès Internet ?
En théorie, la théorie et la pratique c'est pareil. En pratique c'est pas vrai.
[^] # Re: Inclusions
Posté par ptitcois . Évalué à 2.
Bonjour,
sur PC, j'ai vérifié en me déconnectant du réseau (le serveur est sur le PC) et toutes les requetes ont bien un code 200, toutes les destination sont bien sur localhost.
# Ca marche
Posté par ptitcois . Évalué à 1.
Résolu:
Effectivement, sur mobile ça ne fonctionnait pas, ce n'était pas le code qui était en cause mais le protocole. Par sécurité la camera n'est pas activable via HTTP (et même pas en HTTPS autosigné pour Chrome). En passant avec un certificat auto signé ça fonctionne (avec la version https://github.com/PallasKatze/instascan et la derniere version de https://github.com/webrtc/adapter).
Donc nickel en HTTPS autosigné sur Safari/iOS11 et firefox/Android5.0.2
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.