tensorflow.js+body-pix.js从摄像头实时扣除复杂人物背景更换其他背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：tensorflow.js+body-pix.js从摄像头实时扣除复杂人物背景并更换其他背景效果代码，可实现实时环游世界。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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) {
            ctx.drawImage(background, 0, 0, width, height);
        }
        const oldGCO = offCtx.globalCompositeOperation
        // Prepare the mask, blend with webcam video
        offCtx.clearRect(0, 0, width, height);
        offCtx.putImageData(personMasked, 0, 0);
        offCtx.globalCompositeOperation = 'source-in';
        offCtx.drawImage(video, 0, 0);
        // Restore GCO
        offCtx.globalCompositeOperation = oldGCO;

        // Copy video with mask on top of background
        ctx.drawImage(offCanvas, 0, 0);

        // Next frame
        requestAnimationFrame(this.renderVideo);
    }

    /**
     * Load model and prepare webcam
     * @param {Object} options - Model options https://github.com/tensorflow/tfjs-models/tree/master/body-pix#config-params-in-bodypixload
     */
    loadModel = async (options) => {
        await this.asyncSetState({ modelReady: false });
        const model = await bodyPix.load();
        await this.asyncSetState({ modelReady: true });
        return model
    }

    /**
     * Request webcam permission
     */
    setupCamera = async () => {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            throw new Error(
                'Browser API navigator.mediaDevices.getUserMedia not available');
        }

        const video = this.videoRef.current;
        const stream = await navigator.mediaDevices.getUserMedia({
            'audio': false,
            'video': { facingMode: 'use.........完整代码请登录后点击上方下载按钮下载查看