Захватите поток с камеры и поместите его на холст с помощью Ionic на Android - PullRequest
Новая
       20

Захватите поток с камеры и поместите его на холст с помощью Ionic на Android

0 голосов
/ 23 мая 2018

Возможно ли захватить поток с камеры, и либо:

  • использовать этот поток в качестве источника для тега видео на странице HTML
  • использовать этот поток (кадры) в качестве источника для canvas

Я уже написал приложение, которое при использовании на рабочем столе в браузере захватывало камеру и воспроизводило ее в теге видео, но, очевидно, это решение теперь работаетпо умолчанию при развертывании приложения на телефоне Android.

Спасибо

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Я думаю, что вы хотите взаимодействовать с камерой из HTML,

Тогда вы можете захотеть посмотреть на cordova-plugin-camera-preview

HTML 

<script src="https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image.all.min.js"></script>

<p><div id="originalPicture" style="width: 100%"></div></p>

JS 

let options = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: CameraPreview.CAMERA_DIRECTION.BACK,
  toBack: false,
  tapPhoto: true,
  tapFocus: false,
  previewDrag: false,
  disableExifHeaderStripping: true
};
....

function gotRotatedCanvas(canvasimg) {
  var displayCanvas = $('canvas#display-canvas');
  loadImage.scale(canvasimg, function(img){
    displayCanvas.drawImage(img)
  }, {
    maxWidth: displayCanvas.width,
    maxHeight: displayCanvas.height
  });
}

CameraPreview.getSupportedPictureSizes(function(dimensions){
  dimensions.sort(function(a, b){
    return (b.width * b.height - a.width * a.height);
  });
  var dimension = dimensions[0];
  CameraPreview.takePicture({width:dimension.width, height:dimension.height, quality: 85}, function(base64PictureData){
    /*
      base64PictureData is base64 encoded jpeg image. Use this data to store to a file or upload.
      Its up to the you to figure out the best way to save it to disk or whatever for your application.
    */

    var image = 'data:image/jpeg;base64,' + imgData;
    let holder = document.getElementById('originalPicture');
    let width = holder.offsetWidth;
    loadImage(
      image,
      function(canvas) {
        holder.innerHTML = "";
        if (app.camera === 'front') {
          // front camera requires we flip horizontally
          canvas.style.transform = 'scale(1, -1)';
        }
        holder.appendChild(canvas);
      },
      {
        maxWidth: width,
        orientation: true,
        canvas: true
      }
    );
  });
});

Надеюсь, это поможет.

0 голосов
/ 23 мая 2018

Возможны обе функции (опции): используйте этот поток в качестве источника для видео-тега на странице HTML, используйте этот поток (кадры) в качестве источника для холста

Используя ionic с FileTransfer, плагин Camera вы можетелегко передавать данные ваших данных (байты, кадры, изображения, текст) на холст, что на 100 процентов возможно, так как Cordova является расширением HTML5 для мобильных устройств.

...