Update static/script.js

static/script.js

@@ -13,14 +13,45 @@ $(document).ready(function () {
     });
 });
 
+// Function to start the camera
 function startCamera() {
-    var url = '0';
-    $('#urlForm').attr('action', '/index'); 
-    $('#urlForm').attr('method', 'POST'); 
-    $('#urlForm').find('#url').val(url);
-    $('#urlForm').submit();
+    // Get the video element by its ID
+    const videoElement = document.getElementById('videoElement');
+
+    // Check if user's browser supports media devices and getUserMedia
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        // Request access to the camera
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(function (stream) {
+                videoElement.srcObject = stream;
+            })
+            .catch(function (error) {
+                console.error('Error accessing the camera: ', error);
+            });
+    } else {
+        alert('getUserMedia is not supported by this browser.');
+    }
+}
+
+// Function to stop the camera
+function stopCamera() {
+    // Get the video element by its ID
+    const videoElement = document.getElementById('videoElement');
+
+    // Stop the camera stream
+    if (videoElement.srcObject) {
+        const stream = videoElement.srcObject;
+        const tracks = stream.getTracks();
+
+        tracks.forEach(function (track) {
+            track.stop();
+        });
+
+        videoElement.srcObject = null;
+    }
 }
 
+
 function startVideo() {
     var url = $('#url').val();
     $('#urlForm').attr('action', '/index');