我正在尝试通过网络应用程序捕捉视频，该应用程序应该以剪影的形式捕捉视频。现在我正在捕捉圆形。我怎样才能捕捉到剪影的形状？提前致谢。
以下是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>
我需要我看到的视频元素:
最佳答案
您可以使用 compositing在 2D 上下文中渲染您的视频。
但是，您需要剪影图像具有透明度。
var playing = false;
var mask = new Image();
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 don't work well with gUM...
/* if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
*/
// so we'll use a video about volcanos from wikimedia
video.crossOrigin = mask.crossOrigin = "anonymous";
video.onplaying = startRendering;
video.onpause = stopRendering;
mask.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Male_head_silhouette.svg/720px-Male_head_silhouette.svg.png";
// wait for the image has loaded
mask.onload = function() {
video.src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm";
video.play();
}
function startRendering() {
playing = true;
requestAnimationFrame( render );
}
function stopRendering() {
playing = false;
}
function render() {
context.globalCompositeOperation = "copy";
context.drawImage(mask, 0, 0, canvas.height * mask.height/mask.width, canvas.height);
context.globalCompositeOperation = "source-in";
context.drawImage(video, 0, 0);
if( playing ) {
requestAnimationFrame( render );
}
}
document.getElementById("snap").addEventListener("click", function() {
var context = document.getElementById("still-canvas").getContext('2d');
context.drawImage(canvas, 0, 0, 640, 480);
});<!-- the video render is a canvas -->
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap">Snap Photo</button>
<canvas id="still-canvas" width="640" height="480"></canvas>关于javascript - 如何以剪影形状显示 HTML5 Video Tag？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58832476/