add ability to take avatar photo from camera

почему бы и нет

Web/static/js/al_wall.js

@@ -1386,12 +1386,13 @@ $(document).on("click", "#add_image", (e) => {
 
         <label class="button" style="margin-left:45%;user-select:none" id="uploadbtn">
             ${tr("browse")}
-            <input accept="image/*" type="file" name="blob" hidden style="display: none;">
+            <input accept="image/*" type="file" id="_avaInput" name="blob" hidden style="display: none;">
         </label>
 
         <br><br>
 
         <p>${tr('troubles_avatar')}</p>
+        <p>${tr('webcam_avatar')}</p>
     </div>
     `
 
@@ -1504,6 +1505,80 @@ $(document).on("click", "#add_image", (e) => {
             cropper.rotate(-90)
         })
     })
+
+    $(".ovk-diag-body #_takeSelfie").on("click", (e) => {
+        $("#avatarUpload")[0].style.display = "none"
+
+        $(".ovk-diag-body")[0].insertAdjacentHTML("beforeend", `
+            <div id="_takeSelfieFrame" style="text-align: center;">
+                <video style="max-width: 100%;max-height: 479px;"></video>
+                <canvas id="_tempCanvas" style="position: absolute;">
+            </div>
+        `)
+
+        let video = document.querySelector("#_takeSelfieFrame video")
+
+        if(!navigator.mediaDevices) {
+            // ех вот бы месседжбоксы были бы классами
+            u("body").removeClass("dimmed");
+            document.querySelector("html").style.overflowY = "scroll"
+            u(".ovk-diag-cont").remove();
+
+            fastError(tr("your_browser_doesnt_support_webcam"))
+
+            return
+        }
+
+        navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then((stream) => {
+            video.srcObject = stream;
+            video.play()
+
+            window._cameraStream = stream
+        })
+        .catch((err) => {
+            u("body").removeClass("dimmed");
+            document.querySelector("html").style.overflowY = "scroll"
+            u(".ovk-diag-cont").remove();
+
+            fastError(err)
+        });
+        
+        function __closeConnection() {
+            window._cameraStream.getTracks().forEach(track => track.stop())
+        }
+
+        document.querySelector(".ovk-diag-action").insertAdjacentHTML("beforeend", `
+            <button class="button" style="margin-left: 4px;" id="_takeSnap">${tr("take_snapshot")}</button>
+        `)
+
+        document.querySelector(".ovk-diag-action button").onclick = (evv) => {
+            __closeConnection()
+        }
+
+        document.querySelector("#_takeSnap").onclick = (evv) => {
+            let canvas = document.getElementById('_tempCanvas')
+            let context = canvas.getContext('2d')
+
+            canvas.setAttribute("width", video.clientWidth)
+            canvas.setAttribute("height", video.clientHeight)
+            context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
+            canvas.toBlob((blob) => {
+                $("#_takeSnap").remove()
+                
+                let file = new File([blob], "snapshot.jpg", {type: "image/jpeg", lastModified: new Date().getTime()})
+                let dt = new DataTransfer();
+                dt.items.add(file);
+
+                $("#_avaInput")[0].files = dt.files
+                $("#_avaInput").trigger("change")
+                $("#_takeSelfieFrame").remove()
+
+                __closeConnection()
+            })
+        }
+    })
 })
 
 $(document).on("click", ".avatarDelete", (e) => {

locales/en.strings

@@ -465,8 +465,10 @@
 "groups_avatar" = "Good photo can make your group more recognizable.";
 "formats_avatar" = "You can upload an image in JPG, GIF or PNG format.";
 "troubles_avatar" = "If you're having trouble uploading, try selecting a smaller photo.";
-"webcam_avatar" = "If your computer is equipped with a webcam, you can <a href='javascript:'>take a snapshot</a>.";
+"webcam_avatar" = "If your computer has a webcam, you can <a id='_takeSelfie'>take a snapshot »</a>";
 "publish_on_wall" = "Make post on wall";
+"take_snapshot" = "Take snapshot";
+"your_browser_doesnt_support_webcam" = "Your browser does not support webcam video capture.";
 
 "selected_area_user" = "The selected area will be shown on your page.";
 "selected_area_club" = "The selected area will be shown on the group page.";

locales/ru.strings

@@ -451,8 +451,10 @@
 "groups_avatar" = "Хорошее фото сделает Ваше сообщество более узнаваемым.";
 "formats_avatar" = "Вы можете загрузить изображение в формате JPG, GIF или PNG.";
 "troubles_avatar" = "Если возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера.";
-"webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете <a href='javascript:'>сделать моментальную фотографию »</a>";
+"webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете <a id='_takeSelfie'>сделать моментальную фотографию »</a>";
 "publish_on_wall" = "Опубликовать запись на стене";
+"take_snapshot" = "Сделать снимок";
+"your_browser_doesnt_support_webcam" = "Ваш браузер не поддерживает съёмку видео с веб-камеры.";
 
 "selected_area_user" = "Выбранная область будет показываться на вашей странице.";
 "selected_area_club" = "Выбранная область будет показываться на странице сообщества.";

locales/uk.strings

@@ -367,7 +367,7 @@
 "groups_avatar" = "Гарне фото зробить Вашу спільноту більш популярним.";
 "formats_avatar" = "Ви можете завантажити зображення у форматі JPG, GIF або PNG.";
 "troubles_avatar" = "Якщо виникають проблеми із завантаженням, спробуйте вибрати фотографію меншого розміру.";
-"webcam_avatar" = "Якщо ваш комп'ютер оснащений веб-камерою, Ви можете <a href='javascript:'>зробити миттєву фотографію»</a>";
+"webcam_avatar" = "Якщо ваш комп'ютер оснащений веб-камерою, Ви можете <a id='_takeSelfie'>зробити миттєву фотографію »</a>";
 
 "update_avatar_notification" = "Фотографію профілю оновлено";
 "update_avatar_description" = "Натисніть, щоб перейти до перегляду";