使用 JavaScript 进行实时视频色度抠图绿幕抠像处理（无需插件实现）
在本教程中，我们将向您展示使用 JavaScript 进行实时视频处理的基础知识。您将学习如何从视频中删除绿屏背景并将另一个视频合并为背景。准备？一起来看看吧！
一、基本设置
首先，搞一个绿幕视频文件素材，下载地址：//repo.bfw.wiki/bfwrepo/video/63e1dd7ddd2b0.mp4
二、JavaScript视频处理
然后使用视频标签将视频放在我们的页面上。我将属性设置为自动播放静音和循环。至于输出，我们将使用与视频大小相同的画布。<video id="video" width="800" src="video2.mp4" autoplay muted loop></video> <canvas id="output-canvas" width="800" height="450" ></canvas>然后，我将创建一个初始化函数。让我们从获取视频和画布上下文开始。（使用画布时，我们需要使用它的上下文而不是画布元素本身）我还将创建另一个画布作为临时工作空间。我们将使用此画布提取每个视频帧并对其进行处理，然后再将其放入输出画布。在初始化结束时，我们将添加事件侦听器，以便在视频开始播放时开始处理。
let video,c1,ctx1,c_tmp,ctx_tmp;
function init() {
video = document.getElementById('video');
c1 = document.getElementById('output-canvas');
ctx1 = c1.getContext('2d');
c_tmp = document.createElement('canvas');
c_tmp.setAttribute('width', 800);
c_tmp.setAttribute('height', 450);
ctx_tmp = c_tmp.getContext('2d');
video.addEventListener('play', computeFrame );
}
我们将处理代码放在另一个调用 computeFrame 的函数中。然后使用临时画布使用 drawImage 方法将当前视频帧作为 Image 获...点击查看剩余70%
{{collectdata}}
网友评论0