Javascript HTML5视频元素顶部的CSS覆盖（使用引导）

对于CSS和引导，我是一个新手，所以我正在努力解决这个问题。我正在尝试做一些非常简单的事情

我需要一个带有HTML5视频标签的HTML页面。在视频从网络摄像头，我需要一个覆盖视频像一个画框会；显示onClick将从网络摄像头获取与帧大小相同的图片的视频部分

我已经有了拍照（并修剪）的代码，但是，我很难在视频上显示css覆盖。任何帮助都将不胜感激。css叠加纯粹是为了帮助拍照的人了解主题的位置。任何能达到相同目标的想法也将受到赞赏。一旦我有了一个有效的覆盖，我有信心我可以修改它，以满足我的尺寸要求。 注：我正在使用引导（v.4.3.1）

这是我的HTML

/*要做的事
*在视频上获得一帧（css覆盖）以显示图片区域。
*/
if（类型（StudioCamera）=“未定义”）{
StudioCamera={uuuu名称空间：true}；
}
研究摄像机={
liveStream:null，
videoTag:null，
皮克塔肯：空，
onLoad:function（）{
var pRow=document.getElementById（“photoRow”）；
pRow.style.display=“无”；
},
startCamera:函数（）{
this.videoTag=document.getElementById（“UVCvideo”）；
常量约束={
视频：{宽度：{min:1200}，高度：{min:1080}
};
navigator.mediaDevices.getUserMedia（约束）。
然后（（流）=>{
this.videoTag.srcObject=流；
this.liveStream=流；
});
//this.videoTag.requestFullscreen（）；
}
}

启动摄像机