Javascript 在HTML 5标记视频上绘制矩形

我试着用画布在网络摄像头（使用“navigator.mediaDevices.getUserMedia”）和HTML5标记“video”捕获的图像中心画一个100 x 100的矩形

要捕获网络摄像头图像，我使用：

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
        .then( function(stream) {
            //Definir o elemento víde a carregar o capturado pela webcam
            video.srcObject = stream;
            return stream;            
        })
        .catch(function(error) {
            alert("Error on open device");
        });
    }

要在线显示此图像，我只需使用：

<video autoplay="true" id="webCamera">
            </video>

---

我发现最好的方法是在画布上画视频，然后画矩形

第一步：隐藏标签视频

<video autoplay="true" id="webCamera" style="display: none"> </video>

第四步：播放视频时启动我的功能

 var video = document.querySelector("#webCamera");
 video.onplay = function() {
  setTimeout(drawImge , 300);
 };

---

矩形包含什么？它仅仅是一个简单的、以视频为中心的矩形吗？@RamRaider你说得对，我的目标是只画以视频为中心的矩形的边框。

body{
    font-family: sans-serif;
    margin: 0;
}

.area{
    margin: 10px auto;
    box-shadow: 0 10px 100px #ccc;
    padding: 20px;
    box-sizing: border-box;
    max-width: 500px;
}

.area video{
    width: 100%;
    height: auto;
    background-color: whitesmoke;
}

.area textarea{
    width: 100%;
    margin-top: 10px;
    height: 80px;
    box-sizing: border-box;
}

.area button{
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    background-color: #068c84;
    color: white;
    text-transform: uppercase;
    border: 1px solid white;
    box-shadow: 0 1px 5px #666;
}

.area button:focus{
    outline: none;
    background-color: #0989b0;
}

.area img{
    max-width: 100%;
    height: auto;
}

.area .caminho-imagem{
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #068c84;
    text-align: center;
}

.area .caminho-imagem a{
    color: white;
    text-decoration: none;
}

.area .caminho-imagem a:hover{
    color: yellow;
}

<video autoplay="true" id="webCamera" style="display: none"> </video>

<canvas id="videoCanvas"></canvas>

function drawImge(){
    var video = document.querySelector("#webCamera");
    var canvas = document.querySelector("#videoCanvas");
    var ctx = canvas.getContext('2d');

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;


    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    var faceArea = 300;
    var pX=canvas.width/2 - faceArea/2;
    var pY=canvas.height/2 - faceArea/2;

    ctx.rect(pX,pY,faceArea,faceArea);
    ctx.lineWidth = "6";
    ctx.strokeStyle = "red";    
    ctx.stroke();


    setTimeout(drawImge , 100);
}

 var video = document.querySelector("#webCamera");
 video.onplay = function() {
  setTimeout(drawImge , 300);
 };