1

好吧，我遇到了一个非常奇怪的问题，它只发生在三星浏览器上。在 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, 0, 0, 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');
        }
    }

我是否遗漏了其他东西以使其在三星浏览器中工作？还是我只是发一条消息说这与此浏览器不兼容？目前在三星 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();
            };
         }

垂直视频

4

0 回答 0