11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour

J’essaie de manipuler la camera d’un smartphone à partir d’un site. Je peux facilement afficher la webcam sur tout type de navigateur et de OS, sauf sur le iPhone. Ce qui est bête parce que l’application est surtout prévue pour des smartphones.
Vous trouverez une démo et le code complet à

https://alexreflexive.github.io/smartphonexperience/request.html

Et là un exemple qui pour autant que j’aie pu tester fonctionne sur iPhone, mais qui est un véritable plat de spaghetti et je ne comprends pas pourquoi si celui-ci fonction, que l’autre non.

https://alexreflexive.github.io/smartphonexperience/pour_iphone.html

Qu’est-ce qui peut bien me manquer ?
Merci d’avance !
    <script>
        var webcam = document.getElementById('webcam');
        var canvas = document.getElementById('initCanvas');
        var context = canvas.getContext('2d');
    
        var webcamwidth = 640, webcamheight=480;
        canvas.width = webcamwidth ; canvas.height=webcamheight;

        window.onload=function(){

            navigator.getMedia = ( navigator.getUserMedia ||
                                    navigator.webkitGetUserMedia ||
                                    navigator.mozGetUserMedia ||
                                    navigator.msGetUserMedia);            

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                    video: {facingMode: "environment"}
                })
                .then(function(stream) {
                    webcam.srcObject = stream;
                })
            }

            window.requestAnimationFrame = window.requestAnimationFrame || 
                                            window.mozRequestAnimationFrame ||
                                            window.webkitRequestAnimationFrame || 
                                            window.msRequestAnimationFrame;            
            requestAnimationFrame(tick);
            function tick() {
                window.requestAnimationFrame(tick);
                context.drawImage(webcam, 0, 0, 640, 480);
                // Du code.
            }
        }
    </script>