From 93b5407e46d9872eb47e90d38943139754941c9e Mon Sep 17 00:00:00 2001 From: lalka2018 <99399973+lalka2016@users.noreply.github.com> Date: Mon, 5 Feb 2024 16:40:43 +0300 Subject: [PATCH] add ability to take avatar photo from camera MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit почему бы и нет --- Web/static/js/al_wall.js | 77 +++++++++++++++++++++++++++++++++++++++- locales/en.strings | 4 ++- locales/ru.strings | 4 ++- locales/uk.strings | 2 +- 4 files changed, 83 insertions(+), 4 deletions(-) diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js index 59d37df84..8b353d4e0 100644 --- a/Web/static/js/al_wall.js +++ b/Web/static/js/al_wall.js @@ -1386,12 +1386,13 @@ $(document).on("click", "#add_image", (e) => {

${tr('troubles_avatar')}

+

${tr('webcam_avatar')}

` @@ -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", ` +
+ + +
+ `) + + 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", ` + + `) + + 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) => { diff --git a/locales/en.strings b/locales/en.strings index 9aadcf2d7..a9155d0a1 100644 --- a/locales/en.strings +++ b/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 take a snapshot."; +"webcam_avatar" = "If your computer has a webcam, you can take a snapshot »"; "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."; diff --git a/locales/ru.strings b/locales/ru.strings index 7070f6bc7..1ee718c6d 100644 --- a/locales/ru.strings +++ b/locales/ru.strings @@ -451,8 +451,10 @@ "groups_avatar" = "Хорошее фото сделает Ваше сообщество более узнаваемым."; "formats_avatar" = "Вы можете загрузить изображение в формате JPG, GIF или PNG."; "troubles_avatar" = "Если возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера."; -"webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете сделать моментальную фотографию »"; +"webcam_avatar" = "Если ваш компьютер оснащён веб-камерой, Вы можете сделать моментальную фотографию »"; "publish_on_wall" = "Опубликовать запись на стене"; +"take_snapshot" = "Сделать снимок"; +"your_browser_doesnt_support_webcam" = "Ваш браузер не поддерживает съёмку видео с веб-камеры."; "selected_area_user" = "Выбранная область будет показываться на вашей странице."; "selected_area_club" = "Выбранная область будет показываться на странице сообщества."; diff --git a/locales/uk.strings b/locales/uk.strings index 515b1e7c3..52a02d10c 100644 --- a/locales/uk.strings +++ b/locales/uk.strings @@ -367,7 +367,7 @@ "groups_avatar" = "Гарне фото зробить Вашу спільноту більш популярним."; "formats_avatar" = "Ви можете завантажити зображення у форматі JPG, GIF або PNG."; "troubles_avatar" = "Якщо виникають проблеми із завантаженням, спробуйте вибрати фотографію меншого розміру."; -"webcam_avatar" = "Якщо ваш комп'ютер оснащений веб-камерою, Ви можете зробити миттєву фотографію»"; +"webcam_avatar" = "Якщо ваш комп'ютер оснащений веб-камерою, Ви можете зробити миттєву фотографію »"; "update_avatar_notification" = "Фотографію профілю оновлено"; "update_avatar_description" = "Натисніть, щоб перейти до перегляду";