在定位的画布中调整视频流答案

【问题标题】：Fit video stream in positionned canvas在定位的画布中调整视频流
【发布时间】：2023-04-11 08:06:02
【问题描述】：

在移动设备上的网络应用中，我使用.getUserMedia 全屏（即 360 x 520）显示视频流。根据 URL 中传递的值（即 260 x 220），我在屏幕中间创建了一个画布：

    let largview = iw-40;                             // canvas width with left 20px (iw=screen width)
    let heightview = Math.round((largview)/w)*h;      // URL values
    let topview = Math.round((ih-heightview)/2);      // (ih=screen height)

    video.style.width = iw+'px';
    video.style.height = ih+'px';
    canvas.width = largview;
    canvas.height = heightview;
    canvas.style.marginLeft = 20+'px';
    canvas.style.marginTop = topview+'px';

完成后，我在此画布中复制视频流：

    setInterval(function(){
        context.drawImage(cameraVideo, 20,topview, largview,heightview, 0,0, largview,heightview);
    },1);

我的问题是我无法在画布中显示视频，就像这个是“透明的”：没有它的 border:1px solid red 你看不到它，视频流和画布流将完美地结合在一起。我在drawImage 中尝试了很多不同的值，但有时画布流比视频流最大，有时它不在正确的位置，有时它工作得很好（顶部/左侧都可以）但画布没有完全填充：20px右边不见了……

【问题讨论】：

标签： javascript canvas html5-video

【解决方案1】：

我找到了一个带有 2 个

第一个画布设置为宽度和高度 = 100%（包含完整的视频流）。

第二个是 largview * heightview，position = 20px left and topview px of the top。

    setInterval(function(){
    
        cameraContext.drawImage(cameraVideo,  0,0,  iw,ih); // full video
        
        let imageData = cameraContext.getImageData( 20, topview, cameraCanvas.width, cameraCanvas.height);
        cameraContext2.putImageData(imageData, 0, 0);
        
    },1);

效果很好。

【讨论】：