Файловый менеджер

Файловый менеджер - Редактировать - /home/clickysoft/public_html/somni.clickysoft.net/public/html/capture-images/capture.html

Назад
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.css"> </head> <body> <style> #video { width: 100%; object-fit: cover; height: calc(100vh - 200px); /* transform: none; / / transform: scaleX(-1); */ } #progress-container { width: 50px; height: 50px; } .capture-styles button { background-color: transparent; border: 0; outline: 0; padding: 0; } .camera-setup { background-color: #000; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; overflow: hidden; } .camera-setup.active { display: block; } .capture-styles { display: flex; justify-content: space-between; align-items: center; position: absolute; width: -webkit-fill-available; bottom: 30px; overflow: hidden; padding: 30px 30px 0px 31px; left: 0; right: 0; } </style> <button type="button" id="requestPermission">Request</button> <div class="camera-setup"> <div class="camera-view"> <video id="video" style="display: none;" autoplay playsinline muted></video> </div> <div class="capture-styles"> <div class=""> <div id="progress-container"></div> </div> <div class=""> <button type="button" id="capture"><img src="./images/capture-btn.png" alt="" class="img-fluid"></button> </div> <div class=""> <button id="switchCamera"><img src="./images/switch.png" alt="" class="img-fluid"></button> </div> </div> </div> <div id="capturedImagesContainer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script> <script> $(document).ready(function () { $('#toggle').click(function () { $(this).toggleClass('active'); $('#overlay').toggleClass('open'); $('body').toggleClass('openned'); }); $('.close').click(function () { $('#overlay').removeClass('open'); $('body').removeClass('openned'); }); $(document).on('keydown', function (e) { if (e.keyCode === 27) { // ESC $('#overlay').removeClass('open'); $('body').removeClass('openned'); } }); $('.db-nav a').click(function () { $('.db-nav a').removeClass('active'); $(this).toggleClass('active'); }); $('.main-links li a').click(function () { $('.main-links li a.active').removeClass('active'); $(this).toggleClass('active'); }); $(document).on('click', function (event) { if (!$(event.target).closest('.l-sidebar, .db-toggle').length) { $('.l-sidebar').removeClass('open'); } }); $('.db-toggle').click(function (event) { event.stopPropagation(); $('.l-sidebar').toggleClass('open'); }); $('.ed-link').click(function () { $('.ed-link.active').removeClass('active'); $(this).toggleClass('active'); }); // camera setup var video = $('#video').get(0); var capturedImagesContainer = $('#capturedImagesContainer'); var captureButton = $('#capture'); var requestButton = $('#requestPermission'); var switchCameraButton = $('#switchCamera'); var capturedImages = []; var counter = 0; var currentStream; let currentStep = 1; let totalDataSteps = $('[data-step]').length; console.log(totalDataSteps) const getVideoDevices = async (camera) => { const devices = await navigator.mediaDevices.enumerateDevices() const videoDevices = devices.filter((device) => device.kind === 'videoinput'); let search = false; // Iterate through each video device and determine if it's front or back videoDevices.forEach(function (device) { console.log('Label: ' + device.label); if (device.label.toLowerCase().includes(camera)) { search = true; } }); return search; } $(requestButton).click(async function () { const isBackCamera = await getVideoDevices('back'); console.log(isBackCamera) // Request access to the camera and location navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: isBackCamera ? "environment" : "user" }, mirror: false } }) .then(function (stream) { currentStream = stream; video.srcObject = stream; video.style.display = 'block'; video.play(); captureButton.css('display', 'inline-block'); if (isBackCamera) { video.style.transform = 'scaleX(1)'; console.log('back') // No transformation for back camera } else { video.style.transform = 'scaleX(-1)'; console.log('front') // Flip horizontally for front camera } // Request location access if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition(function (position) { console.log('Latitude: ' + position.coords.latitude); console.log('Longitude: ' + position.coords.longitude); }, function (error) { console.error('Error getting location: ' + error.message); }); } else { console.error('Geolocation is not supported by this browser.'); } }) .catch(function (err) { console.error("Error accessing the camera: " + err); // If back camera is not available, try to get stream from front camera // navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } }) // .then(function (stream) { // currentStream = stream; // video.srcObject = stream; // video.style.display = 'block'; // video.play(); // captureButton.css('display', 'inline-block'); // }) // .catch(function (err) { // console.error("Error accessing the camera: " + err); // }); }); $('.camera-setup').addClass('active'); }); $('.data-next').click(function () { const activetooltip = $('[data-step].active'); let activeStep = $('[data-step].active').attr('data-step'); if (activeStep <= totalDataSteps) { currentStep++ } $('[data-step="1"] .ct-start-btn').addClass('hidden'); $('[data-step="2"] .ct-start-btn').removeClass('hidden'); }); $(switchCameraButton).click(function () { // Stop the current stream currentStream.getTracks().forEach(function (track) { track.stop(); }); // Get available video input devices and switch to the next one navigator.mediaDevices.enumerateDevices() .then(function (devices) { var videoDevices = devices.filter(function (device) { return device.kind === 'videoinput'; }); var currentDeviceId = video.srcObject.getTracks()[0].getSettings().deviceId; var nextDevice; for (var i = 0; i < videoDevices.length; i++) { if (videoDevices[i].deviceId !== currentDeviceId) { nextDevice = videoDevices[i]; break; } } if (nextDevice.label.toLowerCase().includes("back")) { video.style.transform = 'scaleX(1)'; console.log("back") } else { video.style.transform = 'scaleX(-1)'; console.log("front") } navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: nextDevice.deviceId } } }) .then(function (stream) { currentStream = stream; video.srcObject = stream; video.play(); }) .catch(function (err) { console.error("Error switching camera: " + err); }); }) .catch(function (err) { console.error("Error enumerating devices: " + err); }); }); $(captureButton).click(function () { if (counter >= 4) { event.preventDefault(); } else { var canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; var context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); var imageData = canvas.toDataURL('image/png'); var imgElement = $('<img>').attr('src', imageData); capturedImagesContainer.append(imgElement); capturedImages.push(imageData); counter++; } }); // progress bar // Initialize progress bar var progressBar = new ProgressBar.Circle('#progress-container', { color: '#31C563', trailColor: '#D1CDCD', strokeWidth: 5, trailWidth: 7, duration: 0, easing: 'linear', text: { value: '' } }); // stop camera function stopCamera() { if (currentStream) { currentStream.getTracks().forEach(function (track) { track.stop(); }); } } // stop camera end // Function to update progress function updateProgress(percentage) { var progressValue = percentage / 100; // Convert percentage to a value between 0 and 1 progressBar.set(progressValue); // Set the progress bar value } // Example: Update progress with some percentage data var percentageProgress = 0; // Example percentage updateProgress(percentageProgress); // Up // progress bar rend // camera setup end }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.1.29 | Генерация страницы: 0 | proxy | phpinfo | Настройка