html5 – 2d Context vs WebGL用于渲染视频

“不幸的是,这占用了相当多的cpu资源” – 我邀请您使用特殊画布来接收rtc媒体流.如果画布在身体的某个地方可见,则需要双倍(cpu)作业.

视频纹理的示例(此代码取自visual-js项目)您需要稍微调整…请参阅：

function VIDEO_TEXTURE (monitor_ ) {

    var ROOT = this;
    ROOT.LOADED = function() {};

    ROOT.video = document.getElementById( monitor_ );
    var DIV_CONTENT_STREAMS = document.getElementById( 'HOLDER_STREAMS' );

    ROOT.videoImage = document.createElement('canvas');
    ROOT.videoImage.id = monitor_ + "IMAGE_";
    ROOT.videoImage.setAttribute('width','640px' );
    ROOT.videoImage.setAttribute('height','480px' );
    DIV_CONTENT_STREAMs.appendChild(ROOT.videoImagE);

    ROOT.videoImageContext = ROOT.videoImage.getContext( '2d' );
    ROOT.videoImageContext.fillStyle = '#0000FF';
    ROOT.videoImageContext.fillRect( 0,ROOT.videoImage.width,ROOT.videoImage.height );

    ROOT.videoTexture = new THREE.Texture( ROOT.videoImage );
    ROOT.videoTexture.minFilter = THREE.LinearFilter;
    ROOT.videoTexture.magFilter = THREE.LinearFilter;

    ROOT.movieMaterial = new THREE.MeshBasicMaterial( {
        map: ROOT.videoTexture,overdraw: true,side: THREE.DoubleSide 
    });
    var movieGeometry = new THREE.PlaneGeometry( 1000,1000,1,1 );
    ROOT.movieScreen = new THREE.Mesh( movieGeometry,ROOT.movieMaterial );

    ROOT.movieScreen.position.set(0,500,1000);
    scene.add(ROOT.movieScreen);

    ROOT.AUTO_updatE = function() {

        //ROOT.video.play();
        if ( ROOT.video.readyState === ROOT.video.HAVE_ENOUGH_DATa ) 
        {
            ROOT.videoImageContext.drawImage( ROOT.video,ROOT.videoImage.height );
            if ( ROOT.videoTexture ) 
                ROOT.videoTexture.needsupdate = true;
        }

    };
    console.log('Video 3d canvas texture created.');
    PROGRAm.AUTO_updatE.push(ROOT);




}


// Usage : 

 VIDEO_MATERIAL = new VIDEO_TEXTURE(tag_element_video_rtc_remotE)

试着看看：
https://maximumroulette.com/welcome/3d_slot/

webGL2开源git project

例子 ：
https://maximumroulette.com/webgl2/examples.html