javascript - Typescript/Angular2 getUserMedia no está definido
Tengo una aplicación Ionic 2 que utiliza QuaggaJS Github para transmitir la cámara a mi vista (contenedor Div) como Snapchat para escanear códigos QR. En el navegador, todo funciona de maravilla, pero en el momento en que se construye como archivo APK o IPA, estoy recibiendo el error:
chromium: [INFO:CONSOLE(76955)] "Error: getUserMedia is not defined"
Usé ADB y un Dispositivo Android Virtual para obtener la salida de logcat. ¡Información importante: Sí, tengo permiso de cámara!
Por si no puedes visualizar de lo que estoy hablando, aquí hay una captura de pantalla de la vista de mi página:
Y este es mi código de Typescript:
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular';
import Quagga from 'quagga';
declare var Quagga:any;
@Component({
selector: 'page-scanner',
templateUrl: 'scanner.html',
})
export class Scanner implements OnInit {
constructor(public navCtrl: NavController,
public navParams: NavParams,
public menu: MenuController) {
}
ngOnInit() {
//WARNING:
//Error: Types of property 'lift' are incompatible -> means
//that the used typescript version is too high. Works with: 2.3.4 atm
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
constraints: {
width: window.innerWidth,
height: window.innerHeight,
facingMode: "environment"
},
area: {
top: "0%",
right: "0%",
left: "0%",
bottom: "0%"
},
// Or '#yourElement' (optional)
target: document.querySelector('#scanner')
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),
decoder : {
//Change Reader for the right Codes
readers: [ "code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader" ],
},
locate: true
}, function(err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
// Make sure, QuaggaJS draws frames an lines around possible
// barcodes on the live stream
Quagga.onProcessed(function(result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
});
// Once a barcode had been read successfully, stop quagga and
// close the modal after a second to let the user notice where
// the barcode had actually been found.
Quagga.onDetected(function(result) {
if (result.codeResult.code){
// Was passieren soll wenn ein Code gescannt wurde
// $('#scanner_input').val(result.codeResult.code);
}
});
}
ionViewWillLeave(){
Quagga.stop();
}
}
Respuesta #1
De aquí dice:
1) Importante: Acceder a getUserMedia requiere un origen seguro en la mayoría de los navegadores, lo que significa que http:// solo se puede usar en localhost. Todos los demás nombres de host deben servirse a través de https://. Puede encontrar más información en las Notas de la Versión de WebRTC de Chrome M47.
Detección de funciones de getUserMedia
2) Parece que cada navegador implementa de manera diferente la API mediaDevices.getUserMedia. Por lo tanto, se recomienda encarecidamente incluir webrtc-adapter en su proyecto.
Aquí se muestra cómo puedes probar las capacidades de tu navegador:
3) if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') { /acceder de forma segura a
navigator.mediaDevices.getUserMedia} La condición anterior se evalúa a:Navegador resultado
Edge verdadero
Chrome verdadero
Firefox verdadero
IE 11 falso
Safari iOS falso
Entonces, ¿puedes:
- Confirme si está utilizando https
- Has incluido webrtc-adapter
- Si Android pasa la verificación de la condición.
Enlace para otros sobre MediaDevices.getUserMedia de MDN
Respuesta #2
Bueno, esta puede ser la respuesta más tonta que he escrito, pero resolví mi problema por mí mismo. A veces, las cosas más fáciles son las razones de errores extraños.
Bueno, como se indica aquí getUserMedia() está disponible en Android 5.0+, pero trabajé todo el tiempo en un dispositivo Android 4.4.2. Después de una actualización, todo funcionó bien.
Esta versión introduce la clase PermissionRequest, que permite a su aplicación otorgar al WebView permiso para acceder a recursos protegidos como la cámara y el micrófono, a través de API web como getUserMedia(). Su aplicación debe tener los permisos de Android apropiados para estos recursos con el fin de otorgar los permisos al WebView.
Nunca he tenido 3 días tan desperdiciados como con este error. Salud