In my project, I am working on creating a panorama tour that includes additional content such as videos using three.js and React.
The videos I am using are stored on a private Azure storage, where I generate SAS tokens for specific video files.
When attempting to play a video from the GUI, the CORS is working well:
<video id={uid} autoPlay controls controlsList="nodownload">
<source style={{objectFit: "cover"}}
src={videoPath}
type={"video/mp4"}/>
</video> //this one is working
In this case, the videoPath is located on www.mystorage.azurelink.net, not on my origin.
However, when I create a video element dynamically per view:
const videosRoot = document.getElementById("videosroot")
const video: HTMLVideoElement = document.createElement("video")
video.id = `video-${this.uid}`
video.crossOrigin = "anonymous"
video.playsInline = true
video.muted = true
video.style.display = "none"
const source = document.createElement("source")
source.id = `video-source-${this.uid}`
video.appendChild(source)
videosRoot.appendChild(video)
....
const videoTexture = new three.VideoTexture(videoElement)
I encountered an error:
Access to video at 'https://mystorage.blob.core.windows.net/MYCONTAINER/Videos/default.mp4?MYSASTOKEN'and
net::ERR_FAILED 206
The CORS configuration for my storage:
What modifications should I make in my application to resolve this issue (the video is played as I receive the on-play-ended callback)?
video.crossOrigin = "anonymous"
I am receiving the following error:
index.js:1 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.
at Object.texImage2D (http://localhost:3000/static/js/vendors~main.chunk.js:339244:21)
at uploadTexture (http://localhost:3000/static/js/vendors~main.chunk.js:340051:19)
at WebGLTextures.setTexture2D (http://localhost:3000/static/js/vendors~main.chunk.js:339679:9)
at SingleUniform.setValueT1 [as setValue] (http://localhost:3000/static/js/vendors~main.chunk.js:336186:12)
at WebGLUniforms.upload (http://localhost:3000/static/js/vendors~main.chunk.js:336677:11)
at setProgram (http://localhost:3000/static/js/vendors~main.chunk.js:343221:21)
at WebGLRenderer.renderBufferDirect (http://localhost:3000/static/js/vendors~main.chunk.js:342547:21)
at renderObject (http://localhost:3000/static/js/vendors~main.chunk.js:342939:13)
at renderObjects (http://localhost:3000/static/js/vendors~main.chunk.js:342915:9)
at renderScene (http://localhost:3000/static/js/vendors~main.chunk.js:342855:35)
at WebGLRenderer.render (http://localhost:3000/static/js/vendors~main.chunk.js:342744:7)
at World.draw (http://localhost:3000/static/js/main.chunk.js:4310:21)
at World.step (http://localhost:3000/static/js/main.chunk.js:4318:14)
at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:342661:35)
at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:332519:5)