Потеря качества фотографии при фотографировании

$(document).ready(function()
{
    $('.foto').click(function(e)
    {
        e.preventDefault();
 
 
      document.documentElement.requestFullscreen();
            $('.mainCamera').remove();
            $('body').append('<div class="mainCamera"></div>');
            $('.mainCamera').append('<div class="containerVideo"></div>');
    //      $('.containerVideo').append('<div class="titleCamera"></div>'); 
    //      $('.titleCamera').append('<select id="selectCamera"></select>');    
            $('#selectCamera').append('<option>Фронтальная камера</option>');  
            $('#selectCamera').append('<option>Передняя камера</option>');    
            $('.titleCamera').append('<b style="float:right;margin:5px;">X</b>');   
            
        
                    
            $('.containerVideo').append('<video id="cameraStream" autoplay></video>');
            $('.containerVideo').append('<canvas id="canvasPhoto"></canvas>');
            
                $('.mainCamera').append('<div class="containerButton"></div>');
 
                            $('.containerButton').append('<button class="takingPicture"></button>');
                            $('.containerButton').append('<button class="smenaCamera"></button>');
                            $('.mainCamera').append('<dic class="containerTitle"></div>');
                            $('.containerTitle').append('<select id="select"></select>');
        
        var user='environment'; 
        const video = document.getElementById('cameraStream');
        const videoConstraints={video:{aspectRatio: 16/9}, width:{ideal:1024},height:{ideal:768}, audio:false,facingMode:{exact:user}};
    
        let currentStream; //стрим 
        
        var res=[]; //массив доступных камераъ
        var a=[]; //текущий поток видео
        
        canvas = document.getElementById('canvasPhoto');
        ctx = canvas.getContext('2d');
 
 
        
        
navigator.mediaDevices.enumerateDevices().then(gotDevices);
 
//currentStream.getVideoTracks()[0].getSettings().deviceId;
 
//получение картинки с фотографии
$('.takingPicture').click(function(e){
    
 
    
    ctx.drawImage(video,0,0,  canvas.width,canvas.height);
    
         if (typeof currentStream !== 'undefined') {
         stopMediaTracks(currentStream);}
         
    $('.smenaCamera').css('display','none');
 
    $('.takingPicture').css('display','none');
    
    //кнопка на ппубликацию фотографии
    $('.containerButton').append('<button id="publicPhoto">Опубликовать фотографию</button>');
 
    
    //кнопка на переснятие фотографии
    $('.containerButton').append('<button id="rejectPhoto">Переснять фотографию</button>');
 
    //кногпка уйти из режима фотография
    $('.containerVideo').append('<button id="exitPhoto">Выйти из режима фотографии</button>');
 
    
    $('#exitPhoto').click(function()
    {
        $('.mainCamera').remove();
        document.exitFullscreen();
    });
    
        
    
})
    
 
 
 
//смена камеры
$('.smenaCamera').click(function()
{
    
 if (a[0]!==res[2])
 {
 
 
  if (typeof currentStream !== 'undefined') {
    stopMediaTracks(currentStream);
  }
 
  
    const videoConstraints={
        video:{deviceId: res[2]},aspectRatio: 1/9, width:{ideal:1024},height:{ideal:768},       
        audio:false};
 //запускаем поток видео
  navigator.mediaDevices
    .getUserMedia(videoConstraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = currentStream;
     a.length=0;
     a.push(currentStream.getVideoTracks()[0].getSettings().deviceId);
 
    })
    .catch(error => {
      console.error(error);
    });
 } else {
    if (typeof currentStream !== 'undefined') {
    stopMediaTracks(currentStream);
  }
  
            const videoConstraints={
        
        video:{deviceId: res[1]} , width:{ideal:1024},height:{ideal:768},
        
        audio:false};
 
 //запускаем поток видео
  navigator.mediaDevices
    .getUserMedia(videoConstraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = currentStream;
     a.length=0;
     a.push(currentStream.getVideoTracks()[0].getSettings().deviceId);
 
    })
    .catch(error => {
      console.error(error);
    });
     }
 
 
});
 
 
//запускаем поток видео
  navigator.mediaDevices
    .getUserMedia(videoConstraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = currentStream;
     a.push(stream.getVideoTracks()[0].getSettings().deviceId);
        })
    .catch(error => {
      console.error(error);
    });
 
 
 
//останавливаем поток
function stopMediaTracks(stream) {
  stream.getTracks().forEach(track => {
    track.stop();
  });
}
 
// получаем доступные камеры девайса
function gotDevices(mediaDevices) {
  select.innerHTML = '';
  select.appendChild(document.createElement('option'));
  let count = 1;
  mediaDevices.forEach(mediaDevice => {
    if (mediaDevice.kind === 'videoinput') {
      const option = document.createElement('option');
      option.value = mediaDevice.deviceId;
      const label = mediaDevice.label || `Camera ${count++}`;
      const textNode = document.createTextNode(label);
      option.appendChild(textNode);
      select.appendChild(option);
    }
    
  });
mas();
 
}
//  a=mediaStream.getVideoTracks()[0].getSettings().deviceId;
 
 
 
 
//записываем в массив все полученные камеры девайса
function mas(){
    var size=document.getElementById('select').length;
for (i=0;i<size;i++)
    {       res.push(document.getElementById('select')[i].value)
    }
    
}
 
 
 
 
 
 
    })
    
    
});