Take shot and use Histogram Analysis<\/title>\n<style>\n body { font-family: sans-serif; direction: rtl; background: #f7f7f7; padding: 20px; text-align: center; }\n video { width: 100%; max-width: 640px; border-radius: 10px; background: #000; }\n .btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; color: #fff; font-size: 16px; }\n .capture { background: #007bff; }\n .upload { background: #28a745; }\n .gallery { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; justify-content: center; }\n .thumb { border: 2px solid transparent; border-radius: 6px; cursor: pointer; }\n .thumb.selected { border-color: #007bff; }\n canvas { display: none; }\n<\/style>\n<\/head>\n<body>\n\n<h2>\ud83d\udcf8 Take shot and use Histogram Analysis<\/h2>\n\n<video id=\"camera\" autoplay playsinline muted><\/video><br>\n<button class=\"btn capture\" id=\"captureBtn\">\ud83d\udcf7 Capture<\/button>\n<button class=\"btn upload\" id=\"uploadBtn\">\ud83d\udce4 Analysis<\/button>\n\n<canvas id=\"canvas\"><\/canvas>\n\n<div class=\"gallery\" id=\"gallery\"><\/div>\n\n<script>\nconst video = document.getElementById('camera');\nconst canvas = document.getElementById('canvas');\nconst captureBtn = document.getElementById('captureBtn');\nconst uploadBtn = document.getElementById('uploadBtn');\nconst gallery = document.getElementById('gallery');\n\nlet shots = [];\nlet selectedIndex = null;\nconst maxShots = 5;\nconst uploadUrl = 'http:\/\/localhost:5000\/upload'; \/\/ \u0622\u062f\u0631\u0633 \u0633\u0631\u0648\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f\n\n\/\/ \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062f\u0648\u0631\u0628\u06cc\u0646\nasync function startCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });\n video.srcObject = stream;\n } catch (err) {\n alert('\u062e\u0637\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0648\u0631\u0628\u06cc\u0646: ' + err.message);\n }\n}\nstartCamera();\n\n\/\/ \u062b\u0628\u062a \u0639\u06a9\u0633\ncaptureBtn.addEventListener('click', () => {\n const ctx = canvas.getContext('2d');\n const w = 640, h = 480;\n canvas.width = w; canvas.height = h;\n ctx.drawImage(video, 0, 0, w, h);\n const dataUrl = canvas.toDataURL('image\/jpeg', 0.9);\n shots.unshift(dataUrl);\n if (shots.length > maxShots) shots.pop();\n renderGallery();\n});\n\n\/\/ \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634\u200c\u0647\u0627\nfunction renderGallery() {\n gallery.innerHTML = '';\n shots.forEach((src, i) => {\n const img = document.createElement('img');\n img.src = src;\n img.className = 'thumb' + (i === selectedIndex ? ' selected' : '');\n img.width = 100;\n img.onclick = () => { selectedIndex = i; renderGallery(); };\n gallery.appendChild(img);\n });\n}\n\n\/\/ \u0627\u0631\u0633\u0627\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0628\u0631\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634\nuploadBtn.addEventListener('click', async () => {\n if (selectedIndex === null) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n return;\n }\n const image_data = shots[selectedIndex];\n try {\n const res = await fetch(uploadUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ image_data })\n });\n const data = await res.json();\n if (res.ok) {\n alert('\u067e\u0631\u062f\u0627\u0632\u0634 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f! \u0644\u06cc\u0646\u06a9 \u062f\u0627\u0646\u0644\u0648\u062f \u0646\u0645\u0648\u062f\u0627\u0631:\\n' + data.histogram_url);\n } else {\n alert('\u062e\u0637\u0627 \u062f\u0631 \u0633\u0631\u0648\u0631: ' + (data.error || res.statusText));\n }\n } catch (err) {\n alert('\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0634\u062f.');\n console.error(err);\n }\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Take shot and use Histogram Analysis \ud83d\udcf8 Take shot and use Histogram Analysis \ud83d\udcf7 Capture \ud83d\udce4 Analysis<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":5,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":64,"date":"2025-09-19T12:06:08","date_gmt":"2025-09-19T12:06:08","guid":{"rendered":"http:\/\/urban-landscape.ir\/?page_id=64"},"modified":"2025-10-11T06:46:43","modified_gmt":"2025-10-11T06:46:43","slug":"start-here-2","status":"publish","type":"page","link":"https:\/\/urban-landscape.ir\/index.php\/start-here-2\/","title":{"rendered":"Start Here!"},"content":{"rendered":"\n\n\n\n\n\nTake shot and use Histogram Analysis<\/title>\n<style>\n body { font-family: sans-serif; direction: rtl; background: #f7f7f7; padding: 20px; text-align: center; }\n video { width: 100%; max-width: 640px; border-radius: 10px; background: #000; }\n .btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; color: #fff; font-size: 16px; }\n .capture { background: #007bff; }\n .upload { background: #28a745; }\n .gallery { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; justify-content: center; }\n .thumb { border: 2px solid transparent; border-radius: 6px; cursor: pointer; }\n .thumb.selected { border-color: #007bff; }\n canvas { display: none; }\n<\/style>\n<\/head>\n<body>\n\n<h2>\ud83d\udcf8 Take shot and use Histogram Analysis<\/h2>\n\n<video id=\"camera\" autoplay playsinline muted><\/video><br>\n<button class=\"btn capture\" id=\"captureBtn\">\ud83d\udcf7 Capture<\/button>\n<button class=\"btn upload\" id=\"uploadBtn\">\ud83d\udce4 Analysis<\/button>\n\n<canvas id=\"canvas\"><\/canvas>\n\n<div class=\"gallery\" id=\"gallery\"><\/div>\n\n<script>\nconst video = document.getElementById('camera');\nconst canvas = document.getElementById('canvas');\nconst captureBtn = document.getElementById('captureBtn');\nconst uploadBtn = document.getElementById('uploadBtn');\nconst gallery = document.getElementById('gallery');\n\nlet shots = [];\nlet selectedIndex = null;\nconst maxShots = 5;\nconst uploadUrl = 'http:\/\/localhost:5000\/upload'; \/\/ \u0622\u062f\u0631\u0633 \u0633\u0631\u0648\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f\n\n\/\/ \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062f\u0648\u0631\u0628\u06cc\u0646\nasync function startCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });\n video.srcObject = stream;\n } catch (err) {\n alert('\u062e\u0637\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0648\u0631\u0628\u06cc\u0646: ' + err.message);\n }\n}\nstartCamera();\n\n\/\/ \u062b\u0628\u062a \u0639\u06a9\u0633\ncaptureBtn.addEventListener('click', () => {\n const ctx = canvas.getContext('2d');\n const w = 640, h = 480;\n canvas.width = w; canvas.height = h;\n ctx.drawImage(video, 0, 0, w, h);\n const dataUrl = canvas.toDataURL('image\/jpeg', 0.9);\n shots.unshift(dataUrl);\n if (shots.length > maxShots) shots.pop();\n renderGallery();\n});\n\n\/\/ \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634\u200c\u0647\u0627\nfunction renderGallery() {\n gallery.innerHTML = '';\n shots.forEach((src, i) => {\n const img = document.createElement('img');\n img.src = src;\n img.className = 'thumb' + (i === selectedIndex ? ' selected' : '');\n img.width = 100;\n img.onclick = () => { selectedIndex = i; renderGallery(); };\n gallery.appendChild(img);\n });\n}\n\n\/\/ \u0627\u0631\u0633\u0627\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0628\u0631\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634\nuploadBtn.addEventListener('click', async () => {\n if (selectedIndex === null) {\n alert('\u0644\u0637\u0641\u0627\u064b \u06cc\u06a9\u06cc \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.');\n return;\n }\n const image_data = shots[selectedIndex];\n try {\n const res = await fetch(uploadUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ image_data })\n });\n const data = await res.json();\n if (res.ok) {\n alert('\u067e\u0631\u062f\u0627\u0632\u0634 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f! \u0644\u06cc\u0646\u06a9 \u062f\u0627\u0646\u0644\u0648\u062f \u0646\u0645\u0648\u062f\u0627\u0631:\\n' + data.histogram_url);\n } else {\n alert('\u062e\u0637\u0627 \u062f\u0631 \u0633\u0631\u0648\u0631: ' + (data.error || res.statusText));\n }\n } catch (err) {\n alert('\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u0634\u062f.');\n console.error(err);\n }\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Take shot and use Histogram Analysis \ud83d\udcf8 Take shot and use Histogram Analysis \ud83d\udcf7 Capture \ud83d\udce4 Analysis<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":5,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/urban-landscape.ir\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}