При съемке с веб-камеры мой код иногда растягивается или обрезается

Question

Я сделал веб-приложение, которое позволит мне делать снимки с веб-камеры.

Как должно работать приложение:

✓ Запустите веб-приложение из браузера Chrome на мобильном устройстве.

✓ Предоставить разрешения для веб-приложения [для доступа к камере]. Это должно предоставить мне доступ к передней и задней камере, как я хочу.

✓ Камера включается и отображается внутри

<video id = 'camera' style="margin: 0 auto; width:320px;"></video>

✓ Теперь я могу делать снимки с веб-камеры, нажав кнопку. Всякий раз, когда я делаю снимок, я рисую его на скрытом холсте.

<div><canvas id = 'c'class="hidden"></canvas></div>

Используя этот код:

grabFrame(vm) {
var imageCapture = new ImageCapture(window.stream.getVideoTracks()[0]);
var canvas = document.getElementById("c");
var orientation = window.screen.orientation.type;
if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  canvas.height = 640;
  canvas.width = 480;
}
else {
  canvas.height = 480;
  canvas.width = 640;
}
imageCapture.grabFrame(vm).then(function (imageBitmap) {
  // if this is a device running on windows touch device
  if ((navigator.userAgent.toLowerCase().indexOf("windows") > -1) &&
      (navigator.userAgent.toLowerCase().indexOf("touch") > -1)) {
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
  }
  else {
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  }
  canvas.classList.remove('hidden');
  var img = canvas.toDataURL("image/png");
  vm.get('photos').pushObject(img);
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
});}

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

Во-первых, я пытался использовать takePhoto() функция отсюда, но она просто не работает вообще.

Мой код работает, но не полностью, когда дело доходит до масштабирования изображения и ориентации.

✘ Если я использую Window Tablet, чтобы сделать снимок, снимок, сделанный в портретном режиме, выглядит хорошо, но горизонтальный снимается.

Я думаю, что что-то крутит, но я просто не понимаю, почему все работает нормально на Android, а не на планшете с Windows.

На обоих устройствах я использовал браузер Chrome с одинаковой версией 58++

Спасибо!

Адриан