Javascript 未定义Typescript/Angular2 getUserMedia

我有一个Ionic 2应用程序，它可以将摄像头流式传输到我的视图（Div容器），比如Snapchat来扫描二维码。在浏览器中，这一切都像一个符咒，但当它被构建为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://提供。你可以找到更多 中的信息

getUserMedia的特征检测

2） 每个浏览器似乎都以不同的方式实现 mediaDevices.getUserMedia API。因此，强烈建议 在项目中包括webrtc适配器。

以下是测试浏览器功能的方法：

3） if（navigator.mediaDevices&&typeof navigator.mediaDevices.getUserMedia==='function'）{// 访问

navigator.mediaDevices.getUserMedia

}上述条件 评估结果为：

浏览器结果
边缘真值
Chrome true
Firefox true
IE 11错误
Safari iOS false

因此，你可以：

确认您是否正在使用https

你已经包括在内了

Android是否通过了条件检查

---

这可能是我写过的最愚蠢的答案，但我自己解决了我的问题。 有时最简单的事情是奇怪错误的原因

正如它所说的，getUserMedia（）在Android 5.0+上是可用的， 但我一直在安卓4.4.2设备上工作。更新后，一切都很好

此版本引入了PermissionRequest类，它允许您的应用程序通过getUserMedia（）等web API向WebView授予访问受保护资源的权限，如摄像头和麦克风，。您的应用程序必须具有这些资源的相应Android权限，才能将权限授予WebView

我从来没有因为这个错误浪费过三天那么多时间。

---

干杯

我照你说的做了，但我总是得到错误：

TypeError:无法调用未定义的方法“enumerateDevices”

。未定义意味着=媒体设备。因为这是触发错误的代码行：

navigator.mediaDevices.enumerateDevices（）。因此，在加入webrtc之后，我的Ionic 2项目仍然找不到mediaDevices或getUserMedia.info：在Ionic论坛上添加了一个问题：webrtc项目应该创建垫片。。问题中的Chrome消息。。这是来自Android设备，还是通过开发机器上的Chrome？只有这是本应启用功能供您使用的代码。我自己解决了我的问题。看看答案。@JGFMK无论如何，我必须感谢你的帮助，并以50次代表性干杯向你致敬