2d Kontext vs WebGL zum Rendern von Video

Ich verwende derzeit die CanvasRenderingContext2D.drawImage(), um Video von einem RTC-Medienstream auf eine Leinwand zu zeichnen. Dies beansprucht leider erhebliche CPU-Ressourcen.2d Kontext vs WebGL zum Rendern von Video

Wäre es performanter, dies mit einem WebGLRenderingContext zu tun? (Hardwarebeschleunigung?) Wenn ja, wie genau behandelt man das, vorzugsweise ohne ein Zwischenvideoelement zu erzeugen?

Quelle

2016-04-18 sqwk

Sind Sie einige tun Verarbeitung auf dem Bild? drawImage sollte bereits hardwarebeschleunigt sein und sollte nicht so viel CPU-intensiv sein. Ich kenne WebGL nicht genug, aber in meinen Augen müsste man für jeden Videoframe eine Textur erstellen, und ich denke, dass das Erstellen einer Textur nicht auf der GPU erfolgt. Aber ich weiß WebGL noch nicht genug, also warte auf eine autoritative Stimme in diesem Bereich. – Kaiido

Keine Verarbeitung, jedoch müssen bis zu 12 RTC-Medienstreams angezeigt werden. Audio wird ziemlich gut über die Web Audio API gehandhabt. – sqwk

Ah 12 vielleicht viel. – Kaiido

Keine Notwendigkeit für 2D Kontext verwenden WebGL zum Rendern von Video, wenn Sie bereits im 3D-Raum sind.

"Leider nimmt dies erhebliche CPU-Ressourcen" - Ich Gast Sie verwenden spezielle Leinwand, um RTC Medienstream zu empfangen. Wenn Canvas irgendwo auf dem Body sichtbar ist, verdoppeln Sie den Job (cpu).

Beispiel für Video-Textur (dieser Code von visual-js Projekt genommen wird) Sie ein benötigen wenig anpassen ... Siehe:

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, 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, 0, 0, ROOT.videoImage.width, 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)

versuchen und sehen: https://maximumroulette.com/welcome/3d_slot/

Quelle

2017-02-20 14:55:33

2d Kontext vs WebGL zum Rendern von Video

Antwort

Verwandte Themen