Three.js non Interceptée SecurityError: Échec de l'exécution de 'texImage2D' sur 'WebGLRenderingContext':

Ce problème provient de la précédente édition de la vidéo html5 ne pas jouer sur les téléphones android. (Three.js WebGLRenderered vidéos ne jouez pas sur les téléphones android)

Et comme mrdoob mentionné, vidéo.play() doit être explicite sur les appareils mobiles grâce initié par l'utilisateur des événements tels que cliquez. Après avoir fait ceci, j'ai été en mesure de lire le fichier. Cependant, je suis seulement en mesure d'entendre la partie audio de la vidéo. L'écran est toujours blanc. De plus, je vois l'exception suivante sur le dev console.

Uncaught SecurityError: Échec de l'exécution de 'texImage2D' sur 'WebGLRenderingContext': L'élément vidéo contient des données sur l'origine, et ne peut pas être chargé. trois.min.js:507

Je ne suis pas de charger une image par le biais de mon code comme vous pouvez le voir dans le code ci-dessous et l'erreur semble être jetés dans three.min.js fichier. (Le code ci-dessous est une version légèrement modifiée de http://threejs.org/examples/#webgl_materials_video pour le faire fonctionner sur un appareil mobile)

Veuillez noter que ceci ne se produit que sur l'appareil mobile. L'exemple fonctionne parfaitement sur le web.

Votre aide est très appréciée!

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer
</div>
<script src="js/three.min.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/Detector.js"></script>
<video id="video" autoplay loop style="display:none">
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer, element;
var video, texture, material, mesh;
var composer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth /2;
var windowHalfY = window.innerHeight /2;
var cube_count,
meshes = [],
materials = [],
xgrid = 20,
ygrid = 10;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth /window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
element=renderer.domElement;
element.addEventListener('click', fullscreen, false);
container.appendChild( renderer.domElement );
video = document.getElementById( 'video' );
texture = new THREE.Texture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.generateMipmaps = false;
//
var i, j, ux, uy, ox, oy,
geometry,
xsize, ysize;
ux = 1 /xgrid;
uy = 1 /ygrid;
xsize = 480 /xgrid;
ysize = 204 /ygrid;
var parameters = { color: 0xffffff, map: texture },
material_base = new THREE.MeshLambertMaterial( parameters );
renderer.initMaterial( material_base, scene.__lights, scene.fog );
cube_count = 0;
for ( i = 0; i < xgrid; i ++ )
for ( j = 0; j < ygrid; j ++ ) {
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
material = materials[ cube_count ];
material.hue = i/xgrid;
material.saturation = 1 - j/ygrid;
material.color.setHSL( material.hue, material.saturation, 0.5 );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x =   ( i - xgrid/2 ) * xsize;
mesh.position.y =   ( j - ygrid/2 ) * ysize;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
scene.add( mesh );
mesh.dx = 0.001 * ( 0.5 - Math.random() );
mesh.dy = 0.001 * ( 0.5 - Math.random() );
meshes[ cube_count ] = mesh;
cube_count += 1;
}
renderer.autoClear = false;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function fullscreen() {
video.play();
console.log(video);
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
}
function onWindowResize() {
windowHalfX = window.innerWidth /2;
windowHalfY = window.innerHeight /2;
camera.aspect = window.innerWidth /window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.reset();
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( var i = 0; i < faceVertexUvs.length; i ++ ) {
var uvs = faceVertexUvs[ i ];
for ( var j = 0; j < uvs.length; j ++ ) {
var uv = uvs[ j ];
uv.x = ( uv.x + offsetx ) * unitx;
uv.y = ( uv.y + offsety ) * unity;
}
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY ) * 0.3;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
var h, counter = 1;
function render() {
var time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
if ( texture ) texture.needsUpdate = true;
}
for ( i = 0; i < cube_count; i ++ ) {
material = materials[ i ];
h = ( 360 * ( material.hue + time ) % 360 ) /360;
material.color.setHSL( h, material.saturation, 0.5 );
}
if ( counter % 1000 > 200 ) {
for ( i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.rotation.x += 10 * mesh.dx;
mesh.rotation.y += 10 * mesh.dy;
mesh.position.x += 200 * mesh.dx;
mesh.position.y += 200 * mesh.dy;
mesh.position.z += 400 * mesh.dx;
}
}
if ( counter % 1000 === 0 ) {
for ( i = 0; i < cube_count; i ++ ) {
mesh = meshes[ i ];
mesh.dx *= -1;
mesh.dy *= -1;
}
}
counter ++;
renderer.clear();
composer.render();
}
</script>
</body>
</html>

OriginalL'auteur sandav | 2014-09-30

  1. 4

    Comme expliqué ici: https://code.google.com/p/chromium/issues/detail?id=173727 la "vidéo" de l'attribut doit avoir:

    video.setAttribute('crossorigin', 'anonymous');

    Mais cela ne suffira pas à faire le truc. Cela doit être mis en avant .load() et .play(). J'ai eu cette après .load() et il ne fonctionne pas. Donc faire comme ceci:

    video.setAttribute('crossorigin', 'anonymous');
video.src = "video/test.m4v";
video.src = "video/test.mp4";
video.load(); //must call after setting/changing source
video.play();

    Cette solution est pour les vidéos qui ne jouent pas sur les appareils mobiles en raison notamment de la sécurité de l'erreur vu comme ci-dessus.

    Juste pour être clair crossorigin paramètres de dire au navigateur de demander au serveur pour l'autorisation d'utiliser la vidéo. Le serveur a encore à donner cette autorisation. Si le serveur ne donne pas la permission de réglage de la crossorigin attribut ne vous permettront pas d'utiliser la vidéo.

    j'ai essayé les solutions ci-dessus, je n'obtiens l'erreur, mais plus la vidéo n'est pas de jouer dans chrome pour android, mais le fait dans firefox pour android...
    Marque, voyez-vous des exceptions et des erreurs d'être jeté? Aussi three.js site a des exemples pour la plupart des choses que vous pouvez faire avec lui. Trouver une comme ça et voir si cela fonctionne dans chrome. Cela peut vous dire si c'est un chrome ou le code.
    sur mon bureau, il fonctionne très bien. Mais sur chrome pour android, je ne vois pas des exceptions, mais l'avertissement suivant: WebGLRenderingContext]RENDRE AVERTISSEMENT: texture associée à l'unité de texture 0 n'est pas restituable. Il peut-être pas une puissance de 2 et incompatibles de filtrage de texture ou n'est pas "texture complète" (indice):1 WebGL: INVALID_VALUE: texImage2D: pas de vidéo
    avez-vous été en mesure de le faire fonctionner sur chrome pour android?
    Merci pour la réponse rapide btw!

    OriginalL'auteur sandav

  2. 3

    C'est le top du résultat dans Google pour cette question, donc si vous rencontrez cette erreur en dehors du contexte d'un mobile (qui est de savoir comment j'ai trouvé ce), essayez d'exécuter la page sur un serveur local afin de résoudre l'origine de la croix problème. Ainsi, si par exemple vous avez python que vous pourriez essayer:

    $ python -m SimpleHTTPServer

    À partir du répertoire où votre page existe, et alors la page sera disponible à partir de http://localhost:8000. Ou utiliser un serveur local de votre choix.

    Wow! Merci beaucoup pour ce "conseil", d'essayer de l'exécuter sur un serveur local. 🙂
    * eyeroll * eh bien excusez-moi. Ce cynisme est pourquoi je déteste TANT.
    je pense que vous êtes de se tromper. pas de cynisme prévu. Je veux dire, c'. J'ai perdu une journée entière de débogage et d'essayer de comprendre pourquoi ma 360 vidéo ne joue pas. Votre post fait résolu. Donc je vous remercie pour cela.
    Ah désolé, j'ai mal interprété. Je suis content d'avoir pu vous aider.
    Je confirme il fonctionne sur un serveur local. Apache2 sur MacOs avec Laravel.

    OriginalL'auteur Katharine Osborne