Found an interesting issue that I don’t think is a Babylon issue but proving to be a real headache for us. In Safari when you use a video element that is in the DOM, and use that as the source for a VideoTexture (or HTMLElementTexture), the video element is no longer drawn correctly on the DOM. Anyone have any ideas for how to work around this so a video element could be displayed in the DOM and in a babylon scene on canvas simultaneously?
It seems to be related to calls to texImage2D in the thin engine, because if you force it to use Canvas the problem goes away. You can occasionally do things like resize containers or change background-colors that bump the dom into drawing a single frozen frame.
Here is a simple playground that demonstrates the issue.
(you should see the dom video element appear in the upper left a few seconds after playing). Works fine on OSX in Chrome, but not on Safari.
yup I noticed the same and I do not think there is a workaround unfortunately. You should try to create a ticket in the webkit bug tracker so that Safari could address it
Fwiw, although probably not what you are looking for, I have noticed that one possible workaround is to clone the video node. That clone still requires user interaction context to play though, so you can’t do it with a timeout and it is hard to get them exactly in sync. Here’s your PG modified to clone and play during the click:
Based on my older research with Web Audio (on Safari), it might be possible to get this to work by working with the lower level MediaStreams. It takes a lot of testing though, and even if did work, no guarantees it wouldn’t break on the next Safari update.