Typescript/Angular2 getUserMedia 未定义

Question

我有一个 Ionic 2 应用程序，它使用 QuaggaJS Github 将相机流式传输到我的视图（Div 容器），例如 Snapchat 以扫描二维码。在浏览器中，这一切都非常有效，但是，当它被构建为 APK 或 IPA 文件时，我收到了错误：

chromium: [INFO:CONSOLE(76955)] "Error: getUserMedia is not defined"

我使用 ADB 和虚拟 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();
   }
}

Answer 1

来自 here 它指出：

1) Important: Accessing getUserMedia requires a secure origin in most browsers, meaning that http:// can only be used on localhost. All other hostnames need to be served via https://. You can find more information in the Chrome M47 WebRTC Release Notes.

Feature-detection of getUserMedia

2) Every browser seems to differently implement the mediaDevices.getUserMedia API. Therefore it's highly recommended to include webrtc-adapter in your project.

Here's how you can test your browser's capabilities:

3) if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') { // safely access navigator.mediaDevices.getUserMedia } The above condition evaluates to:

Browser result
Edge true
Chrome true
Firefox true
IE 11 false
Safari iOS false

你也可以：

确认您是否使用 https
您已包含 webrtc-adapter
是否Android通过条件检查。

Link MediaDevices.getUserMedia from MDN

上的其他人

Answer 2

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

正如它所说 here getUserMedia() 在 Android 5.0+ 上可用，但我一直在 Android 4.4.2 设备上工作。更新后一切正常。

This release introduces the PermissionRequest class, which allows your app to grant the WebView permission to access protected resources like the camera and microphone, through web APIs such as getUserMedia(). Your app must have the appropriate Android permissions for these resources in order to grant the permissions to the WebView.

我从来没有像这个错误那样浪费 3 天时间。干杯

Typescript/Angular2 getUserMedia 未定义

Typescript/Angular2 getUserMedia is not defined

javascript

typescript

ionic-framework

quaggajs

angular