{"action":"opened","issue":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/15111","repository_url":"https://api.github.com/repos/mrdoob/three.js","labels_url":"https://api.github.com/repos/mrdoob/three.js/issues/15111/labels{/name}","comments_url":"https://api.github.com/repos/mrdoob/three.js/issues/15111/comments","events_url":"https://api.github.com/repos/mrdoob/three.js/issues/15111/events","html_url":"https://github.com/mrdoob/three.js/issues/15111","id":372891706,"node_id":"MDU6SXNzdWUzNzI4OTE3MDY=","number":15111,"title":"Initially muted video breaks videoTexture","user":{"login":"EliasHasle","id":17208315,"node_id":"MDQ6VXNlcjE3MjA4MzE1","avatar_url":"https://avatars0.githubusercontent.com/u/17208315?v=4","gravatar_id":"","url":"https://api.github.com/users/EliasHasle","html_url":"https://github.com/EliasHasle","followers_url":"https://api.github.com/users/EliasHasle/followers","following_url":"https://api.github.com/users/EliasHasle/following{/other_user}","gists_url":"https://api.github.com/users/EliasHasle/gists{/gist_id}","starred_url":"https://api.github.com/users/EliasHasle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/EliasHasle/subscriptions","organizations_url":"https://api.github.com/users/EliasHasle/orgs","repos_url":"https://api.github.com/users/EliasHasle/repos","events_url":"https://api.github.com/users/EliasHasle/events{/privacy}","received_events_url":"https://api.github.com/users/EliasHasle/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-23T09:12:25Z","updated_at":"2018-10-23T09:12:25Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I am doing some experiments using webcam input and saving processed video with audio to a local file. I have encountered a strange problem, that _may be a browser bug_. I am using one of the most recent versions of Chromium for Windows. Below is a simple script (with no image processing) to reproduce the problem. Without muting the audio, there will be feedback. Therefore I want to mute the audio for the video element that is being used as a texture, but keep the audio for the recording.\r\n\r\nSetting muted:true during the Object.assign causes this error message:\r\n**WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty**\r\n\r\nStrangely, letting muted be false initially, it can be toggled using dat.GUI and achieve the desired effect.\r\n\r\nI can work around the problem by creating a new pure video stream for the video element, but it would be better to understand why muted:true does not work.\r\n\r\n````\r\n<!doctype html>\r\n\r\n<html>\r\n<head>\r\n\r\n<script src=\"http://threejs.org/build/three.js\"></script>\r\n<script src=\"http://threejs.org/examples/js/libs/dat.gui.min.js\"></script>\r\n\r\n</head>\r\n<body>\r\n<script>\r\nvar videoTexture, videoSettings, videoStream, audioTrack;\r\n\r\nlet gui = new dat.GUI();\r\n\r\nnavigator.mediaDevices.getUserMedia({video: true, audio: true}).then(function(stream) {\r\n\tvideoSettings = stream.getVideoTracks()[0].getSettings();\r\n\taudioTrack = stream.getAudioTracks()[0];\r\n\t//Making a separate pure video stream is a workaround\r\n\t//let videoStream = new MediaStream(stream.getVideoTracks());\r\n\tlet video = document.createElement(\"video\");\r\n\tObject.assign(video, {\r\n\t\tsrcObject: stream,//videoStream,\r\n\t\tautoplay: true,\r\n\t\t//Setting muted here breaks everything\r\n\t\t//muted: true,\r\n\t});\r\n\t//Toggling muted later works as expected, if muted was initially false:\r\n\tgui.add(video, \"muted\");\r\n\t//document.body.appendChild(video);\r\n\tvideoTexture = new THREE.VideoTexture(video);\r\n\tvideoTexture.minFilter = THREE.LinearFilter;\r\n\tinit();\r\n\t}\r\n\t).catch(function(error){console.error(error);});\r\n\r\nvar renderer, scene, camera;\r\n\r\nfunction init() {\r\n\tlet w = videoSettings.width;\r\n\tlet h = videoSettings.height;\r\n\r\n\t//Renderer setup\r\n\tdocument.body.style = \"overflow: hidden;\";\r\n\tvar container = document.createElement(\"div\");\r\n\tdocument.body.appendChild(container);\r\n\trenderer = new THREE.WebGLRenderer({antialias: true});\r\n\trenderer.setSize(w, h);\r\n\tcontainer.appendChild(renderer.domElement);\r\n\t\r\n\t//Scene setup:\r\n\tscene = new THREE.Scene();\r\n\t\r\n\tlet display = new THREE.Mesh(\r\n\t\tnew THREE.PlaneBufferGeometry(2, 2),\r\n\t\tnew THREE.MeshBasicMaterial({map: videoTexture})\r\n\t);\r\n\tscene.add(display);\r\n\t\r\n\t//Camera setup:\r\n\tcamera = new THREE.OrthographicCamera(-1,1,1,-1);\r\n\tcamera.position.z = 1;\r\n\t//scene.add(camera);\r\n\r\n\tvideoStream = renderer.domElement.captureStream(videoSettings.frameRate);\r\n\tvideoStream.addTrack(audioTrack);\r\n\t\r\n\tlet data, mediaRecorder;\r\n\tlet recording = false;\r\n\tgui.add({record: function() {\r\n\t\tif (!recording) {\r\n\t\t\tdata = [];\r\n\t\t\tmediaRecorder = new MediaRecorder(videoStream);\r\n\t\t\tmediaRecorder.ondataavailable = function(e) {data.push(e.data);};\r\n\t\t\tmediaRecorder.onstop = function(e) {\r\n\t\t\t\tlet blob = new Blob(data, {type: \"video/webm\"});\r\n\t\t\t\tlet a = document.createElement(\"a\");\r\n\t\t\t\ta.download = \"Video_recording.webm\";\r\n\t\t\t\ta.href = window.URL.createObjectURL(blob);\r\n\t\t\t\ta.click();\r\n\t\t\t}\r\n\t\t\tmediaRecorder.start();\r\n\t\t\trecording = true;\r\n\t\t} else {\r\n\t\t\tmediaRecorder.stop();\r\n\t\t\trecording = false;\r\n\t\t}\t\r\n\t}},\"record\");\r\n\t\r\n\t\r\n\tsetInterval(function() {\r\n\t\t\trenderer.render(scene, camera);\r\n\t\t}, 1000./videoSettings.frameRate);\r\n}\r\n</script>\r\n</body>\r\n</html>\r\n````"}}
{"actor":{"display_login":"EliasHasle"}}