Fatal编程技术网
  • javascript/
  • Javascript HTML5镜像网络摄像头画布

Javascript HTML5镜像网络摄像头画布

javascript html canvas

Javascript HTML5镜像网络摄像头画布,javascript,html,canvas,webcam,webcam-capture,Javascript,Html,Canvas,Webcam,Webcam Capture,我正在尝试拍摄一个网络摄像头提要-（横向格式），切掉中间的一位（纵向格式），并将其渲染到画布上，以便它以1920像素填充屏幕纵向1080px（为此，我将切掉的一位缩放3.8）。然后我需要翻转画布，以便镜像图像。我成功地切下了中间的部分，并将其渲染到画布上。。。我就是想不出怎么把它翻过来 编辑 感谢所有为我指出上下文的人。scale（-1，1）-我的问题是，我已经在使用scale。。。我认为我的问题与保存上下文有关，但我尝试的一切都失败了 <script> // Put

我正在尝试拍摄一个网络摄像头提要-（横向格式），切掉中间的一位（纵向格式），并将其渲染到画布上，以便它以1920像素填充屏幕纵向1080px（为此，我将切掉的一位缩放3.8）。然后我需要翻转画布，以便镜像图像。我成功地切下了中间的部分，并将其渲染到画布上。。。我就是想不出怎么把它翻过来

编辑

感谢所有为我指出上下文的人。scale（-1，1）-我的问题是，我已经在使用scale。。。我认为我的问题与保存上下文有关，但我尝试的一切都失败了

<script>
       // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { 
                    video: {
                        mandatory: {
                            minWidth: 1280,
                            minHeight: 720,
                            /*Added by Chad*/
                            maxWidth: 1280,
                            maxHeight: 720
                        }
                    }
                },
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            /*
                video : video source tag
                320,0 : the shift coords
                320,180 : the canvas size
                0,0 : no shift in the canvas
                640,360 : important ! it’s the native resolution of video source
            */
            context.scale(3.8,3.8);

            function loop(){
               context.drawImage(video, 450, 0, 1080, 1920, 0, 0, 720, 1280);
               setTimeout(loop, 1000 / 30);
            }

            loop();


        }, false);
</script> 


    <video id="video" height="1080" width="1920" autoplay></video>
    <canvas id="canvas" height="1920" width="1080"></canvas>


// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { 
            video: {
                mandatory: {
                    minWidth: 1280,
                    minHeight: 720,
                    /*Added by Chad*/
                    maxWidth: 1280,
                    maxHeight: 720
                }
            }
        },
        errBack = function(error) {
            console.log("Video capture error: ", error.code); 
        };

    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    /*
        video : video source tag
        320,0 : the shift coords
        320,180 : the canvas size
        0,0 : no shift in the canvas
        640,360 : important ! it’s the native resolution of video source
    */




    context.scale(-3.8,3.8);
    context.translate(-720,0);
    function loop(){
       context.drawImage(video, 450, 0, 1080, 1920, 0, 0, 720, 1280);
       setTimeout(loop, 1000 / 30);
    }

    loop();


}, false);


//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
video=document.getElementById（“视频”），
videoObj={
视频：{
强制性：{
最小宽度：1280，
身高：720，
/*乍得补充*/
最大宽度：1280，
最大高度：720
}
}
},
errBack=函数（错误）{
日志（“视频捕获错误：”，错误代码）；
};
//将视频侦听器放置到位
if（navigator.getUserMedia）{//Standard
getUserMedia（videoObj，函数（流）{
video.src=流；
video.play（）；
}，errBack）；
}else if（navigator.webkitGetUserMedia）{//WebKit前缀
webkitGetUserMedia（videoObj，函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
}，errBack）；
}else if（navigator.mozzetusermedia）{//WebKit前缀
mozGetUserMedia（videoObj，函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
}，errBack）；
}
/*
视频：视频源标签
320,0：轮班协调
320180：画布大小
0,0:画布中没有移动
640360：重要！这是视频源的本机分辨率
*/
背景量表（3.8,3.8）；
函数循环（）{
drawImage（视频，450、0、1080、1920、0、0、720、1280）；
设置超时（循环，1000/30）；
}
loop（）；
}，假）；
 
//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
video=document.getElementById（“视频”），
videoObj={
视频：{
强制性：{
最小宽度：1280，
身高：720，
/*乍得补充*/
最大宽度：1280，
最大高度：720
}
}
},
errBack=函数（错误）{
日志（“视频捕获错误：”，错误代码）；
};
//将视频侦听器放置到位
if（navigator.getUserMedia）{//Standard
getUserMedia（videoObj，函数（流）{
video.src=流；
video.play（）；
}，errBack）；
}else if（navigator.webkitGetUserMedia）{//WebKit前缀
webkitGetUserMedia（videoObj，函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
}，errBack）；
}else if（navigator.mozzetusermedia）{//WebKit前缀
mozGetUserMedia（videoObj，函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
}，errBack）；
}
/*
视频：视频源标签
320,0：轮班协调
320180：画布大小
0,0:画布中没有移动
640360：重要！这是视频源的本机分辨率
*/
背景量表（-3.8,3.8）；
上下文。翻译（-720,0）；
函数循环（）{
drawImage（视频，450、0、1080、1920、0、0、720、1280）；
设置超时（循环，1000/30）；
}
loop（）；
}，假）；
对于水平翻转，可以使用
上下文.scale（-1,1）

从

编辑

作为最后手段，可以使用此CSS


#canvas {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}



如果需要，这些都可以通过javascript动态应用。未经测试，但应该有希望的工作
 您不应该使用
ctx.scale
和
ctx.translate
方法进行裁剪

相反，在加载视频时，计算裁剪位置，然后在绘图循环中应用这些计算的位置

完成后，很容易应用
context.scale（-1，1）由@Mahout提出。

注意，您还需要
context.translate（canvas.width，0）scale（）之前进行编码>

我重构了您的代码，因为您请求视频强制令的方式是（chrome也是如此）

我也更改了您的循环，以便仅在加载视频时调用它，无需尝试绘制任何尚不存在的内容，并且我使用该方法更改了您的
setTimeout
，该方法大约以30fps的速度触发



//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。