Actualmente soy nuevo en javascript y estoy tratando de aprender a configurar mi cámara web y hacer que se tome un instante usando js. Sin embargo, solo Webcam.snap() funciona en mi extremo. Mi Webcam.set() y Webcam.attach() no se mostrarán a pesar de poder tomar una instantánea.
Así es como se ve cuando la página se carga frente a después de tomar una foto
El espacio vacío en la parte izquierda es donde se supone que debe colocarse la cámara web
Aquí está mi parte de la cámara web en html:
<h3>Photo capture</h3> <fieldset> <div class="form-row"> <div class="col-md-6"> <div id="my_camera"></div> <br/> <input type=button value="Take Snapshot" onClick="take_snapshot()"> <input type="hidden" name="image" class="image-tag"> </div> <div class="col-md-6"> <div id="results">Your captured image will appear here...</div> </div> </div> </fieldset>También incluí webcam.js justo al comienzo de mi etiqueta de cuerpo
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script> ...Por último, incluí la etiqueta del script para funciones personalizadas dentro de la etiqueta del cuerpo:
<script language="JavaScript"> Webcam.set({ width: 300, height: 200, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach('#my_camera'); function take_snapshot() { Webcam.snap(function(data_uri) { $(".image-tag").val(data_uri); document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>'; }); } </script>Intenté descargar y replicar el código fuente del artículo de Savani H. (2018) y su código parece funcionar bien. ¿Yo me perdí algo? Cualquier ayuda/percepción sería apreciada.
Referencia: Savani H. (2018)