[英]Typescript/Angular2 getUserMedia is not defined
我有一个Ionic 2 App,它使用QuaggaJS Github将相机像Snapchat一样流式传输到我的View(Div容器)中以扫描QR码。 在浏览器中,所有功能都像一个超级按钮,但是当它以APK或IPA文件格式构建时,出现了错误消息:
chromium: [INFO:CONSOLE(76955)] "Error: getUserMedia is not defined"
我使用ADB和Virutal Android设备获取logcat输出。 重要信息:是的,我有相机许可!
这是我的打字稿代码:
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();
}
}
从这里它说:
1)重要:在大多数浏览器中,访问getUserMedia都需要安全的来源,这意味着http://只能在localhost上使用。 所有其他主机名都需要通过https://提供 。 您可以在Chrome M47 WebRTC发行说明中找到更多信息。
getUserMedia的功能检测
2) 每种浏览器似乎都不同地实现mediaDevices.getUserMedia API。 因此,强烈建议您在项目中包含webrtc-adapter。
这是测试浏览器功能的方法:
3) if(navigator.mediaDevices && type of navigator.mediaDevices.getUserMedia ==='function'){//安全访问
navigator.mediaDevices.getUserMedia
}以上条件的计算结果为:浏览器结果
边缘真实
镀铬真
火狐浏览器
IE 11错误
Safari iOS错误
所以你可以:
通过MDN在MediaDevices.getUserMedia上为其他人链接
好吧,这可能是我写过的最烂的答案,但我自己解决了自己的问题。 有时最简单的事情就是怪异错误的原因。
就像这里所说的, getUserMedia()在Android 5.0+上可用 ,但是我一直在Android 4.4.2 Device上工作。 更新后,一切正常。
此版本引入了PermissionRequest类,该类使您的应用可以 通过诸如getUserMedia()之类的Web API 授予WebView权限,以访问受保护的资源(如相机和麦克风 ) 。 您的应用必须对这些资源具有适当的Android权限,才能向WebView授予权限。
我从来没有像此错误那样浪费三天的时间。 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.