请问js如何实现摄像头实时绿布抠像？
网友回复
可以试试tensorflow.js结合body-pix.js来识别人身体进行背景扣除，不需要绿屏就能扣除，非常强大，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body {
background: #20232a;
color: #ffffff;
}
/* ============== Loading ============== */
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-50%, -50%);
text-align: center;
}
.loading img{
width: 300px;
height: 300px;
animation: App-logo-spin infinite 20s linear;
}
/* ============== End Loading ============== */
.center-content {
text-align: center;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tf.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/body-pix@2.0.js"></script>
<script type="text/babel" >
function Loading ({ children }) {
return (
<div className="loading">
<img src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif"/>
<div>{ children }</div>
</div>
);
}
</script>
<script type="text/babel" >
class App extends React.Component {
constructor(props) {
super(props);
this.model = null;
this.ctx = null;
this.state = {
modelReady: false,
modelOption: {
architecture: 'MobileNetV1',
outputStride: 16,
multiplier: 0.75,
quantBytes: 2,
},
foregroundColor: {r: 0, g: 0, b: 0, a: 255},
backgroundColor: {r: 0, g: 0, b: 0, a: 0},
height: 400,
width: 400,
backgroundMode: 'video',
backgroundSrc: '//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4'
};
this.videoRef = React.createRef();
this.canvasRef = React.createRef();
this.backgroundRef = React.createRef();
this.offCanvas = null;
}
/**
* setState util
* in case you need to await until state is set
* @param {Object} newState - New state to update
*/
asyncSetState = (newState) => {
return new Promise(resolve => this.setState(newState, resolve));
}
/**
* Call on every render frame:
* - Estimate person mask
* - Draw background and the person over
*/
renderVideo = async () => {
const {
model,
ctx,
videoRef,
canvasRef,
backgroundRef,
offCtx,
offCanvas
} = this;
const background = backgroundRef.current;
const video = videoRef.current;
const canvas = canvasRef.current;
const { foregroundColor, backgroundColor, height, width } = this.state;
const segmentation = await model.segmentPerson(video, {
flipHorizontal: false,
internalResolution: 'medium',
segmentationThreshold: 0.7
});
const personMasked = bodyPix.toMask(segmentation, foregroundColor, backgroundColor);
// Draw background first if any
if (background) {
...点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
