Javascript 如何以剪影形状显示HTML5视频标签？_Javascript_Html_Css

Javascript 如何以剪影形状显示HTML5视频标签？

javascript html css

Javascript 如何以剪影形状显示HTML5视频标签？,javascript,html,css,Javascript,Html,Css,我正在尝试通过web应用程序捕获视频，该应用程序应该以剪影的形式捕获视频。现在我正在捕捉像圆形的图像。我怎样才能捕捉到剪影的形状？提前谢谢以下是css和html <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .web-cam { width: 150px; height: 150px;

我正在尝试通过web应用程序捕获视频，该应用程序应该以剪影的形式捕获视频。现在我正在捕捉像圆形的图像。我怎样才能捕捉到剪影的形状？提前谢谢

以下是css和html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .web-cam { 
  width: 150px;
  height: 150px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
    </style>
</head>
<body>
<video id="video" width="640" height="480" autoplay class="web-cam" poster="placeholder.png">

</video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        console.log("user mediaDevices");
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
    }
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
    });
</script>
</body>
</html>


.web摄像机{
宽度：150px；
高度：150像素；
边界半径：125px；
-webkit遮罩图像：-webkit径向渐变（圆形，白色100%，黑色100%）；
}
快照
var video=document.getElementById（'video'）；
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var video=document.getElementById（'video'）；
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
console.log（“用户媒体设备”）；
navigator.mediaDevices.getUserMedia（{video:true}）。然后（函数（流）{
video.srcObject=流；
video.play（）；
});
}
document.getElementById（“snap”）.addEventListener（“单击”，函数）（）{
drawImage（视频，0，0，640，480）；
});

我需要我看到的视频元素，看起来像：

您甚至可以在2D环境中使用渲染视频。
然而，你需要你的剪影图像有透明度

var=false；
var mask=新图像（）；
var video=document.getElementById（'video'）；
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var video=document.createElement（'video'）；
video.muted=true；
video.autoplay=true；
//stacksnippets不适合口香糖。。。
/*if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
navigator.mediaDevices.getUserMedia（{video:true}）。然后（函数（流）{
video.srcObject=流；
video.play（）；
});
}
*/ 
//所以我们将使用维基媒体的一段关于火山的视频
video.crossOrigin=mask.crossOrigin=“匿名”；
video.onplaying=startRendering；
video.onpause=停止渲染；
mask.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Male_head_silhouette.svg/720px-Male_head_silhouette.svg.png";
//等待图像已加载
mask.onload=函数（）{
video.src=”https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm";
video.play（）；
}
函数startRendering（）{
玩=真；
请求动画帧（渲染）；
}
函数stopRendering（）{
玩=假；
}
函数render（）{
context.globalCompositeOperation=“复制”；
context.drawImage（mask，0，0，canvas.height*mask.height/mask.width，canvas.height）；
context.globalCompositeOperation=“来源于”；
drawImage（视频，0,0）；
如果（玩）{
请求动画帧（渲染）；
}
}
document.getElementById（“snap”）.addEventListener（“单击”，函数）（）{
var context=document.getElementById（“静止画布”）.getContext（“2d”）；
drawImage（canvas，0，0，640，480）；
});

快照
你能澄清什么是“轮廓的形状”吗？你能给我们举个例子吗？我会屏蔽它，而不是试图以任何形状显示它。使用常规的HTML5视频元素，并在其前面放置一个SVG和您想要的轮廓。注意您编写的var video=document.getElementById（'video'）
两次。顺便说一句@dhamo dharan~你可能想看看你的网站——它看起来像是hijacked@Andr我更新了问题。你能看一下吗？不，确切地说，我需要视频元素中的剪影形状。视频捕获看起来像个人资料图片。