Плагин Cordova QRScanner не отображает изображение с камеры в приложении Ioni c v1

Question

Я прочитал около 15 связанных тем SO, но ничто в этих темах не помогло отобразить сканер. Пока что я тестирую только мое приложение Ioni c v1 на Android. Я использую вкладки Ioni c и на одной вкладке контент на основе сервера загружается с помощью ng-repeat. Вверху находится кнопка для сканирования QR-кода, нажатие кнопки инициализирует $scope.scannerOpen() и должно показывать сканер с такими вызовами функций:

  $scope.scannerOpen = function() {
    QRScanner.prepare(onDone) ; // prepare the camera, check permissions
  }

  function onDone(err, status){
    if (err) {
     // here we can handle errors and clean up any loose ends.
     console.error("Camera: Prepare error - " +err);
     return ;
    }
    $scope.scannerStatus() ;
  }  

  $scope.scannerStatus = function() {
    QRScanner.getStatus(function(status){
      if (status.authorized) { // authorized, show scanner 
        console.log("camera: authorized") ;
        $scope.scannerShow() ;
      } else if (!status.authorized && !status.denied) { // never asked, prompt user
        console.log("camera: never asked") ;
        QRScanner.prepare(onDone) ;
      } else if (status.denied && status.canOpenSettings) { // user previously denied prompt, ask user to change settings
        console.log("camera: denied") ;
        QRScanner.openSettings() ;
      } else if (status.restricted) {  // phone settings restricted
        console.log("camera: restricted") ;      
        alert("Camera is restricted, unable to ask for permissions or display phone camera settings.")
      }
    });  
  }

  $scope.scannerShow = function() {
    // Make the webview transparent so the video preview is visible behind it.
    console.log("Camera: Show Scanner") ;
    QRScanner.show();
  }

Моя консоль показывает мне сообщения AUTHORIZED и SHOW SCANNER - но сканер камеры не отображается. Затем я прошел через свою визуализацию и применил background:none transparent к телу, ION-VIEW, ION-NAV-VIEW, ION-CONTENT - в основном к любому элементу, который занимал весь экран. В некоторых потоках SO упоминается применение background: none transparent к элементу <ion-app>, но этот элемент отсутствует в приложениях Ioni c v1 (о которых я знаю). Но ничто не помогло или не показало камеру под ней.

Поскольку я просмотрел все основные элементы в отрисованном DOM и добавил background:none transparent, и я все еще не вижу сканер, я даже не уверен, что сканер работает. есть или нет.

Что мне здесь не хватает?

ОБНОВЛЕНИЕ 1:

По какой-то причине я попытался отсканировать qrcode, и, к моему удивлению, это сработало! Это здорово - но я до сих пор не могу понять, почему его не отображают. Я снова прошел DOM, применяя background: none transparent везде, где только могу придумать (и не подумать), и представление сканера все еще не отображается.

ОБНОВЛЕНИЕ 2:

Я наконец нашел 3 элементы, к которым я должен был применить background:none transparent или display:none - тогда я мог видеть сканер камеры позади моего приложения. Я знаю, что это не может быть окончательным решением, но пока это единственное, что я смог сделать, чтобы увидеть его. Я прилагаю визуальный код.

Answer 1

Для всех, кому это нужно, я должен был сделать некоторые сложные вещи, чтобы сделать эту работу чисто в приложении Ioni c v1. И «чисто» здесь довольно субъективно! ПОЖАЛУЙСТА - если есть более простое решение, пожалуйста, поделитесь. Я добавил рамку с центрирующей красной линией через рамку вокруг экрана просмотра сканирования. Если вас не волнует рамка с рамкой вокруг вида с камеры, тогда вы можете применить отображение: нет или фон: прозрачный для <ion-content> - но если вам нужна / нужна рамка с рамкой, вы должны применить изменения дисплея / фона к обертка основного содержимого div внутри ion-содержимого.

Функция scannerBox необходима для включения / выключения прозрачности / отображения различных элементов. Они должны быть выключены, и сканер должен быть уничтожен перед тем, как покинуть представление вкладок или класс pane, который используется на других вкладках, сделает прозрачными другие представления вкладок root (например, белый фон станет черным) и / или покажите сканер камеры, все еще показывающий позади ваших вкладок элементы.

Элемент 3-A: без рамки кадра Элемент 3-B: с рамкой кадра

В приведенном ниже коде все элементы, которые нужна манипуляция

<body>
   <ion-nav-bar>
   <ion-nav-view id="appNavView"> // REQUIRED: custom ID assigned
      <div class="pane" nav-view"active" ...>    // REQUIRED 1st element that needs transparency - can't assign ID
         <ion-tabs ...>
            <ion-nav-view name="tab-scanner"  ...>
               <ion-view id="ionViewScanner" class='pane' ...>  // REQUIRED 2nd element that needs transparency - custom ID assigned
                  <ion-content id="ionContentScanner" ...> // OPTION '3-A' element that needs transparency - custom ID assigned,  Use this if you don't care for a frame box
                     <div class="scroll" ....>  // OPTION '3-B' - auto created by Ionic - can't assign ID, height must be adjusted to 100%.
                        <div id="pageWrapper"> // OPTION '3-B' element needs transparency/display:none if frame box wanted
                           <button id="scanOpen" ng-click="scanOpen();" ...>
                           ...ALL MY TAB-PAGE CONTENT .... 
                        </div>
                        <div id="scannerWrapper" style="display:none;background:transparent;height:100%;">  // OPTION '3-B' scanner frame box
                            <div id="scannerTop" style="height:25%;background:white;">
                                <button id="scanStart" ng-click="scanStart()" ...>
                                <button id="scanCancel" ng-click="scanCancel();" ...>
                             </div>
                             <div id="scannerBox" style="height:50%;">
                                <div id="scannerLine" style="height:50%;border-bottom:1px solid red;"></div>
                              </div>
                              <div id="scannerBottom" style="height:25%;background:white;"></div>
                           </div>
                        </div> // end ionic created DIV
                     </ion-content>

И тогда в моем контроллере у меня есть:

  var appNavView = document.getElementById("appNavView") ;  
  var divPane = appNavView.children[0] ; 
  var pageWrapper = document.getElementById("pageWrapper") ;
  var scannerWrapper = document.getElementById("scannerWrapper") ;
  var scannerParent = scannerWrapper.parentNode ;

  function scannerBox(x) {
    if (x == 0) { // close
      divPane.style.background = "white" ;
      pageWrapper.style.display = "" ;
      scannerWrapper.style.display = "none" ;
      scannerParent.style.height = "" ;
    } else if (x == 1) { //open
      divPane.style.background = "none transparent" ;
      pageWrapper.style.display = "none" ;
      scannerWrapper.style.display = "" ;
      scannerParent.style.height = "100%" ;    
    }
  }

/// I cut all the prepare/getStatus stuff out - that all remains the same

  $scope.scanOpen = function() {
    scannerBox(1) ;
    QRScanner.show();
  }

  $scope.scanCancel = function() {
    QRScanner.cancelScan(function(status){
      $scope.scannerHide() ;
    });    
  }

  $scope.scannerHide = function() {
    scannerBox(0) ;   
    QRScanner.hide(function(status){
      console.log(status);
    });    
  }

  $scope.scannerDestroy = function() {
    scannerBox(0) ;       
    QRScanner.destroy(function(status) {
      console.log("Camera: destroyed") ;
    }) ;
  }

  //And then hide/destroy scanner when leaving TAB
  $scope.$on('$destroy', function() {
    $scope.scannerHide() ;
    $scope.scannerDestroy() ; 
  });

  $scope.$on("$ionicView.leave", function(event,data) {
    $scope.scannerHide() ;
    $scope.scannerDestroy() ; 
  }) ;