Update public/sketch.js

public/sketch.js

@@ -18,6 +18,7 @@ let active_rearcam = false;
 let camConfig = "user";
 let isOnMobile;
 let camIsON = false;
+let device_orientation;
 
 let graphicsToSend;
 
@@ -32,6 +33,12 @@ function preload(){
 
     isOnMobile = isMobileDevice()
     console.log("is on mobile ? " + isOnMobile)
+
+    if(isOnMobile){
+      device_orientation = screen.orientation.type;
+    }
+
+
     
     // Socket events handlers
     socket = io();
@@ -75,6 +82,42 @@ function windowResized() {
 }
 
 function setup() {
+
+    screen.orientation.addEventListener("change", function(e) {
+      device_orientation = screen.orientation.type
+      console.log(device_orientation)
+      if(camIsON){
+                if(capture){
+                    capture.remove()
+                    capture = undefined
+                  }
+            
+                  if(active_rearcam == true){
+                    let new_constraints = {
+                          audio: false,
+                          video: {
+                            facingMode:  {
+                              exact: "environment"
+                            }
+                          }    
+                        };
+                    capture = createCapture(new_constraints)
+                    capture.hide()
+                  } else {
+                    let new_constraints = {
+                          audio: false,
+                          video: {
+                            facingMode:  "user"
+                          }
+                          //video: {
+                            //facingMode: "user"
+                          //} 
+                        };
+                    capture = createCapture(new_constraints)
+                    capture.hide()
+                  }
+                }
+    });
     pixelDensity(1)
     if(windowWidth <= 500){
         myCanvas = createCanvas(380, 380*320/576);
@@ -156,10 +199,11 @@ function setup() {
         checkbox_rearcam.parent("checkbox-rear");
     
         checkbox_rearcam.mousePressed( () => {
+          
             if(active_rearcam == false){
                 active_rearcam = true;
             } else {
-            active_rearcam = false
+                active_rearcam = false
             }
             
             if(camIsON){
@@ -184,7 +228,7 @@ function setup() {
                           audio: false,
                           video: {
                             facingMode:  "user"
-                          }    
+                          }
                           //video: {
                             //facingMode: "user"
                           //} 
@@ -246,18 +290,62 @@ function draw() {
     text('turn on your webcam', width/2, height/2);
     
     if(capture != undefined){
-      graphicsToSend.image(capture, 0, 0)
+      
       if(!active_rearcam){
+          
+        
+        if(isOnMobile){
+          if(device_orientation == "portrait" || device_orientation == "portrait-primary" || device_orientation == "portrait-secondary"){
+            graphicsToSend.image(capture,(myCanvas.width/2)-(capture.width/2), -(capture.height/4))
+            push()
+          //move image by the width of image to the left
+            translate(myCanvas.width, 0);
+          //then scale push()
+          //move image by the width of image to the left
+          //to flip the image
+            scale(-1, 1);
+            image(capture,(myCanvas.width/2)-(capture.width/2), -(capture.height/4))
+            pop()
+          } else {
+            graphicsToSend.image(capture, 0, 0)
+            push()
+          //move image by the width of image to the left
+          translate(myCanvas.width, 0);
+          //then scale push()
+          //move image by the width of image to the left
+          //to flip the image
+            scale(-1, 1);
+            image(capture, 0, 0)
+            pop()
+          }
+        } else {
+          graphicsToSend.image(capture, 0, 0)
           push()
           //move image by the width of image to the left
-          translate(capture.width, 0);
-          //then scale it by -1 in the x-axis
+          translate(myCanvas.width, 0);
+          //then scale push()
+          //move image by the width of image to the left
           //to flip the image
           scale(-1, 1);
-          image(capture,0, 0)
+          image(capture, 0, 0)
           pop()
+        }          
+      
       } else {
-          image(capture,0, 0)
+          if(isOnMobile){
+            if(device_orientation == "portrait" || device_orientation == "portrait-primary" || device_orientation == "portrait-secondary"){
+              graphicsToSend.image(capture,(myCanvas.width/2)-(capture.width/2), -(capture.height/4))
+              image(capture,(myCanvas.width/2)-(capture.width/2), -(capture.height/4))
+            } else {
+                graphicsToSend.image(capture, 0, 0)
+                image(capture, 0, 0)
+              
+              
+            }
+          } else {
+            graphicsToSend.image(capture, 0, 0)
+            image(capture, 0, 0)
+          }
       }
     
     }
@@ -355,5 +443,3 @@ function show_loading(){
     
     
 }
-
-