Greetings,
I’m posting this example of how to get these features to work:
inline video,
touchclicks, ( that’s right touching the screen does not currently trigger mouse click events)
and audio
in IOS.
I just finished teaching an interactive media design class based on p5.js.
One of my students created an experience that heavily relied on her code running on mobile phones.
While on android everything worked like a charm ( with minor fixes ) IOS was another beast entirely.
After reading a lot of material from a lot of different sources I was able to add exceptions to her code for IOS mobile browsers.
I noticed that in some degree this happens in the p5 library as well ( it was actually using the same useragent string check I did, but for some reason none of the above worked )
EDIT: DONE! see next post for mcve
As soon as I’m done I can hone these down to the individual MCVEs but in the meanwhile I’m linking the github page for her project because there’s nothing about these issues on this forum. ( believe me, I checked ).
if you are feeling so inclined please add this to the main library and make my fixes unnecessary, it took too much time and was too complex to teach to intro level students and this stuff should just work.
direct link to sketch.js
qr code to test on mobile:
1 Like
MCVE
How to fix lack of touch support:
// add these to your setup function AFTER createCanvas()
var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", mouseClicked, false);
no prevent default needed for mobile ( i’m refusing to cover for the use case of someone using a mouse on a phone, a laptop with a touchscreen on the other end could need that to avoid double click. this is why this could be better handled if mouseclicked would be triggered be touchstart as well at a library level.)
How to fix lack of Audio Support
github example
How to add inline video:
github example
1 Like
Looks like some well thought out solutions. Thanks for taking the time to share.
Did you try using the touchStarted() method? I know it a few levels deep in the documentation so it would be totally understandable if you missed it. I’ve never had the chance to try it on IOS so it would be good to know if it doesn’t work.
In terms of the other features I haven’t done anything with p5 on IOS before so I can’t speak to how useful they would be but if you think they might be good features then I suggest opening a issue on the p5.js github (probably p5.sound for the audio one). It looks like you’ve already done a lot of the work so adding in the features might be relatively simple.
@figraham thank you I did not see touchStarted, either way that one was the easier fix, having video behave the same way would be nice, audio just seems to be broken, not sure why. I had to fix it and fast for the student show. It was easier to ‘do it right’ in javascript than figuring out what was wrong with the library.
I did open an issue on github, hopefully in the right place linking this discussion.
Now I’m thinking 3 separate issues might have been better but too late I guess.
2 Likes
Thanks so much for opening the issue, @jacopom – really appreciate you developing and documenting solutions and then putting in the time and energy to contribute them back to the community.
1 Like