三星浏览器中相机镜头问题的javascript画布截图

如何解决三星浏览器中相机镜头问题的javascript画布截图

好吧，我有一个很奇怪的问题，只发生在Samsung browser上。在Chrome和其他浏览器上，这很好用。

当我在javascript上拍摄当前视频帧（当前是移动相机）的快照时，图像会失真并且通常质量不佳。

   function takeSnapshot() {
        // Here we're using a trick that involves a hidden canvas element.  
        video.pause();
        var hidden_canvas = document.createElement('canvas'),context = hidden_canvas.getContext('2d');
    
        var width = video.videoWidth,height = video.videoHeight;
    
        if (width && height) {
    
            // Setup a canvas with the same dimensions as the video.
            hidden_canvas.width = width;
            hidden_canvas.height = height;
    
            // Make a copy of the current frame in the video on the canvas.
            context.drawImage(video,width,height);
    
            // Turn the canvas image into a dataURL that can be used as a src for our photo.
            return hidden_canvas.toDataURL('image/jpeg');
        }
    }

我是否还缺少其他功能以使其在Samsung browser中起作用？还是我只说这与该浏览器不兼容？目前已在三星galaxy S9和Android 10上进行了测试。

-------------更新

我发现是造成图像捕获不良的原因。我正在使用图像的自定义尺寸，在这种情况下，是水平矩形。我在初始化视频时会这样做：

var w = 2000; // This renders the video as a horizontal rectangle,this does the issue.
var h = 1200;     

var userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || '';
var isSamsungbrowser = userAgent.indexOf('Samsungbrowser') >= 0;

// Quick fix:
if(Samsungbrowser){ // If I render as vertical renctangle,the issue is gone.
    w = 1200;
    h = 2000;
}

navigator.getMedia(
        {
          video:
           {
            deviceid: videoSource ? { exact: videoSource } : undefined,width: { ideal: h },height: { ideal: w }
           }
         },// Success Callback
         function (stream) {
          // Create an object URL for the video stream and
          // set it as src of our HTLM video element.
          try {
             currentStream = stream;
             video.srcObject = stream;
             } catch (error) {
                video.src = window.URL.createObjectURL(stream);
             }
           window.stream = stream;
            // Play the video element to start the stream.
           video.play();
            video.onplay = function () {
                 showVideo();
            };
         }