trsh

Members
  • Content Count

    80
  • Joined

  • Last visited

About trsh

  • Rank
    Advanced Member

Recent Profile Visitors

1238 profile views
  1. I needed to add: const myLuckyVideoElTmp = document.createElement('video'); myLuckyVideoElTmp.preload = "auto"; myLuckyVideoElTmp.setAttribute('crossorigin', 'anonymous'); Now it works
  2. Seems like this bug is only when using : const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true });
  3. `Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.` How to fix this? The response header for my video delivered seems to be OK: Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range Access-Control-Allow-Methods: GET Access-Control-Allow-Origin: http://localhost:3000 Access-Control-Expose-Headers: Content-Length,Content-Range
  4. Doing pause right after play results in an error. Or how do u mean it?
  5. Alternatively can paste the below code in "https://pixijs.io/examples/#/sprite/video.js" and crank the numbers up in input. Only some frames will appear const app = new PIXI.Application(); document.body.appendChild(app.view); const fs = document.createElement('input'); fs.type = 'number'; fs.style.position = 'absolute'; fs.style.top = '0px'; fs.style.left = '0px'; document.body.appendChild(fs); const videoEl = document.createElement('video'); videoEl.preload = "auto"; videoEl.controls = true; videoEl.addEventListener("canplaythrough", function() { process(); }, {once : true}); videoEl.src = 'examples/assets/video.mp4'; function process(){ const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); fs.onchange = function(e){ videoEl.currentTime = e.target.value; console.log(videoEl.currentTime); mediaTexture.update(); } }
  6. Not sure why cross origin stuff. The video works in vanilla HTML+JS https://codepen.io/andryjohn/pen/xNWvdo
  7. I try, but then there is another issue , where PIXI is complaining about cross origin https://codepen.io/TrshMan/pen/GRpPQgm P.S. test it on FF, Chrome has issues with setting currentTime
  8. My setup is like const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); What then I try todo is : frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; mediaTexture.update(); }; But it doesn't work . I got lot's of black screens.
  9. I do something like this to loop trough video frame by frame: frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; }; But the PIXI canvas is not updating. It updated only on `play`. Are there options?
  10. Ok thanks. Got it working
  11. How do I re-render one to second? Sorry I did not understand that from ur examples.
  12. But that I my intention. That the output becomes the input. Any workarounds?
  13. for(var i = 0; i < 4; i ++){ const triN = drawFaceTriangle(videoData.video_face_data.frames[0], renderTexture, faceData, mediaTexture); app.renderer.render(triN, renderTexture); } [.WebGL-000002191D5EC530] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.