Nagaraju

Members
  • Content Count

    11
  • Joined

  • Last visited

About Nagaraju

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I could able to fix this issue. This could be the known answer but it is new to me..😄 var video = document.createElement("video"); let id = "videoPixi"+this.screenData.screenId; video.id = id; video.crossOrigin = "anonymous"; video.src = (this.screenData.background.video.currentUrl); document.body.appendChild(video); var video = document.querySelector("#"+id); //video.preload = 'metadata'; video.preload = 'auto'; video.autoload = true; The above two lines in bold made my day
  2. Hi I am getting empty screen saying an error that (INVALID_VALUE: tex(Sub)Image2D: video visible size is empty) while playing video in chrome V77.038 but playing as many times without any issue in firefox V 69.02.
  3. I initialized like below init = (glBaseElement) => { //Create pixi application instance this.baseElement = glBaseElement; this.ticker = PIXI.Ticker.shared; this.ticker.autoStart = false; this.appRenderer = new PIXI.Application({ width: this.appRendererWidth, height: this.appRendererHeight }); this.imageSlideElementHolder = this.refs[glBaseElement]; this.imageSlideElementHolder.appendChild(this.appRenderer.view); this.mainContainer = new PIXI.Container(); this.appRenderer.stage.addChild(this.mainContainer); this.getAllSlides(); };
  4. I have implemented PIXI application with more containers like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done. try{ if (this.appRenderer != null || this.appRenderer.stage != null) { if(this.ticker.started){ this.ticker.stop(); this.ticker.remove(this.tickSlideRight); this.ticker.destroy(true); } this.mainContainer.children.map((item) =>{ //it contains another container in which video and image functionalities implemented item.destroy(true); }) this.mainContainer.destroy(true); this.imageSlideElementHolder.removeChild(this.appRenderer.view); this.appRenderer.stage.destroy(true); this.appRenderer = null; } }catch(ex){ console.log("Component Unmount, Pixi release ",ex.message) //TO-DO }
  5. Thanks for the quick reply. Working great. I can able to get video duration too...✌️
  6. Thanks for the reply. I could not able to load video element on canvas. I am using below code. <div ref="imageSlide"> </div> var video = document.createElement("video"); video.id = "videoPixi"; video.crossOrigin="anonymous"; video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; document.body.appendChild(video); var video = document.querySelector("#videoPixi"); var basetx = new PIXI.BaseTexture.from(video); this.videoTexture = PIXI.Texture.from(basetx);//(this.screenData.background.video.currentUrl); var videoSprite = new PIXI.Sprite(this.videoTexture); videoSprite.width = videoWidth; videoSprite.height = videoHeight; this.addChild(videoSprite); I am getting an error as it is showing in the attachments
  7. Hello, I am working on playing videos in PIXI js using VideoBaseTexture . I need to call a method once video ends. I could not find any possible solution in PIXI docs.😓 Please help me !!! Thanks in advance
  8. I have tried but not working Is there any solution to draw background color for text
  9. I am working on image corousal (Image slide). I have two images in two different container under main container. Canvas size is 270* 270. So two containers are set in a position of -270, 0. When user starts slide right animation, I will start ticker and will stop until second container reaches to x coordinate '0'. this.appRenderer.ticker.add(delta => this.tickSlideRight(currentSlideNumber,delta)); // ticker right slide tickSlideRight(currentSlideNumber,delta){ try{ this.imageBaseContainer[currentSlideNumber].x += 1 + delta; if(this.imageBaseContainer[currentSlideNumber].x >= this.appRenderer.screen.width) { console.log(this.imageBaseContainer[currentSlideNumber].x, this.appRenderer.screen.width); this.appRenderer.ticker.stop(); } }catch(ex){ alert(ex.message); //TO-DO } } Can anybody helps me to give duration for ticker within container slide should be happend.
  10. Nagaraju

    Video Cropping

    Hi Team, I am banging my head against wall from 2 days. I have a video of different sizes. User can crop video (Just showing cropping area on top of video and getting x,y, coordinates of cropping area). End of the day using back end server I will capture cropped video until I have to mask the video as cropped. Lets assume video original size if 720x1280, the size I am going to show may not be with same size (e.g. 520x292). So after cropping done, I will get the x-scale and y-scale using below formula. var scaleX = 520/720; var scaleY = 1280/292; var cropX = croppedX * scaleX; var cropY = croppedY * scaleY; I could able get actual cropping dimensions but I could not understand how to implement scale in pixi sprite to mask as a cropped video. I am using setTransform method but could not meet desired result. let scaleX = (this._assetSprite.width/newMediaData.croppedDimensions.width); let scaleY = (this._assetSprite.height/newMediaData.croppedDimensions.height); this._assetSprite.setTransform (-(newMediaData.croppedDimensions.x * (scaleX)), -(newMediaData.croppedDimensions.y * (scaleY)));