green-wipe.js 是一个强大的JavaScript插件，它让在浏览器中实现实时绿幕抠像变得前所未有的简单。无需复杂的后端处理或专业的视频编辑软件，开发者仅需几行代码，即可为Web应用注入AR、虚拟背景、在线会议、直播等高级视频特效功能。它纯前端实现，低延迟，高效能，致力于为Web体验带来沉浸式革新。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>视频抠绿幕</title>
<script src="./green-wipe.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.video-box{width:960px;height:540px;position:relative;background-color:#039;margin:0 auto}
</style>
</head>
<body >
<div class="video-box">
<video
id="myVideo"
src="./green.mp4"
autoplay
playsinline
style="visibility: visible;width: 100%;height: 100%;object-fit: cover;"
loop
/>
</div>
<div style="text-align: center;margin-top: 20px;">
<button id="playBtn">播放/暂停</button>
</div>
<script>
const videoEl = document.getElementById('myVideo');
videoEl.addEventListener('playing', function () {
videoEl.style.visibility = 'hidden'
window.GreenWipe.startWipe(videoEl)
})
document.getElementById('playBtn').addEventListener('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
})
</script>
</body>
</html>
访问演示地址 在线体验
有朋自远方来...评论一下呗O(∩_∩)O