cambios

app/Resources/views/producto_final/camera_logic.html.twig

 
-<div id="tomarFotoContainer" style="display:none; background: url('{{asset('manuel/images/selfie-p.jpg')}}') no-repeat center center; background-size:cover;">
+<div id="tomarFotoContainer" style="display:none;">
         <div id="cameraContainer" class="camera" style="display: block">
+            <img id="imagen_carga_video" src="{{asset('manuel/images/selfie-p.jpg')}}" />
+            <button id="startbutton"></button>
             <video id="video">No se encuentra disponible una camara</video>
         </div>
         <canvas id="canvas" width="auto" height="auto">

app/Resources/views/producto_final/landing_producto.html.twig

@@ -31,7 +31,7 @@
     <div class="app-container">
         <img class="img-responsive logo-app" src="{{asset('manuel/images/atrevete-desafio.png')}}" alt="Atrévete al desafío" />
 
-        <button id="startbutton"></button>
+        
         {#CODIGO OCULTO#}
         {{ include('producto_final/camera_logic.html.twig') }}
         {#CODIGO OCULTO#}
@@ -44,7 +44,6 @@
             </div>
 
             <div>
-
                 <button id="subirFoto" name="subirFoto" class="subirFoto" onclick="mostrarSubirFoto(event)">Subir Foto
                 </button>
                 <label class=" control-label">Sube una foto desde tu galería </br>o desde tu PC</label>
@@ -99,8 +98,9 @@
         var fileUpload = $("#imgInp");
         function mostrarTomarFoto(event) {
             event.preventDefault();
-            var fotoActual = $("#tomarFotoContainer");
-            fotoActual.css("background-image", "url('')");
+            //var fotoActual = $("#tomarFotoContainer");
+            //fotoActual.css("background-image", "url('')");
+            $("#imagen_carga_video").attr('src', "");
             console.log("mostrando tomar foto...");
             $("#tomarFotoContainer").show();
             $("#cameraContainer").show();
@@ -118,6 +118,7 @@
             openSeleccionadorArchivos(event);
             console.log("mostrando subir foto...");
             $("#tomarFotoContainer").hide();
+            $("#imagen_carga_video").attr('src', "");
             $("#cameraContainer").hide();
             $("#startbutton").hide();
             //$("#subirFotoContainer").show();
@@ -268,15 +269,15 @@
 
         function generateUrlBackground(source, type) {
             if (type == "url") {
-                var fotoActual = $("#tomarFotoContainer");
+                var fotoActual = $("#imagen_carga_video");
                 var img = new Image();
                 img.src = source;
-                fotoActual.css("background-image", "url('" + img.src + "')");
+                fotoActual.attr("src", img.src);
             } else {
-                var fotoActual = $("#tomarFotoContainer");
+                var fotoActual = $("#imagen_carga_video");
                 var img = new Image();
                 img.src = source;
-                fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
+                fotoActual.css("src", img.src.replace(/(\r\n|\n|\r)/gm, ""));
 
             }
 

web/frontend/js/capture-2.js

@@ -85,8 +85,8 @@
 
         var data = canvas.toDataURL('image/png');
         photo.setAttribute('src', data);
-        var fotoActual = $("#tomarFotoContainer");
-        fotoActual.css("background-image", "url('')");
+        //var fotoActual = $("#tomarFotoContainer");
+        //fotoActual.css("background-image", "url('')");
 
     }
 
@@ -100,10 +100,14 @@
             var data = canvas.toDataURL('image/png');
             console.log(data);
             photo.setAttribute('src', data);
-            var fotoActual = $("#tomarFotoContainer");
+            //var fotoActual = $("#tomarFotoContainer");
+            //var img = new Image();
+            //img.src = data;
+            //fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
+            var fotoActual = $("#imagen_carga_video");
             var img = new Image();
             img.src = data;
-            fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
+            fotoActual.attr("src", img.src.replace(/(\r\n|\n|\r)/gm, "") );
         } else {
             clearphoto();
         }

web/manuel/css/camera.css

@@ -30,7 +30,7 @@ and open the template in the editor.
     /* width: 100%; */
     /* display: inline-block; */
     margin: 0 auto 2em auto;
-    display:flex;
+    display:flex !important;
     justify-content: center;
     position:relative;