{"id":11606,"date":"2025-09-07T12:42:07","date_gmt":"2025-09-07T06:42:07","guid":{"rendered":"https:\/\/hobbi.st\/?page_id=11606"},"modified":"2025-09-15T16:18:36","modified_gmt":"2025-09-15T10:18:36","slug":"life_game","status":"publish","type":"page","link":"https:\/\/hobbi.st\/kk\/life_game\/","title":{"rendered":"old leader"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

21 \u0492\u0430\u0441\u044b\u0440\u0434\u044b\u04a3 \u0415\u04a3 \u04b0\u043b\u044b \u041a\u04e9\u0448\u0431\u0430\u0441\u0448\u044b\u0441\u044b<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\n \n \n Camera View<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/*\n * A more robust centering solution that is not affected by parent containers.\n * The body will now have relative positioning to act as a reference point.\n *\/\n body {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f3f4f6;\n min-height: 100vh;\n position: relative; \/* Reference point for the absolute positioned child *\/\n }\n\n .camera-container {\n \/* Use auto margins to center horizontally within the normal document flow *\/\n display: block;\n margin: 2rem auto 0;\n \n \/* Reduced the size by 40% from 300px to 180px *\/\n width: 180px;\n height: 180px;\n border-radius: 50%;\n overflow: hidden;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\n background-color: #d1d5db;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-align: center;\n transition: all 0.3s ease-in-out;\n }\n\n .camera-container.active {\n box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.5);\n }\n\n #camera-view {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: none; \/* Initially hidden *\/\n }\n\n .message {\n color: #4b5563;\n font-size: 1rem;\n padding: 1rem;\n text-align: center;\n }\n\n .message h2 {\n font-weight: 600;\n font-size: 1.25rem;\n margin-bottom: 0.5rem;\n }\n \/* A utility class to hide elements *\/\n .hidden {\n display: none;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <div id=\"camera-container\" class=\"camera-container\">\n <video id=\"camera-view\" playsinline autoplay><\/video>\n <!-- This message is visible by default for the initial camera access request -->\n <div id=\"access-message\" class=\"message\">\n <h2 class=\"text-lg font-semibold mb-2\">Camera Access<\/h2>\n <p class=\"text-sm text-gray-600\">Please allow access to your camera to see the video stream here.<\/p>\n <\/div>\n <!-- This message is hidden and will only be shown on camera access denial -->\n <div id=\"denied-message\" class=\"message hidden\">\n <h2 class=\"text-lg font-semibold mb-2\">\u041a\u04e9\u0440\u0441\u0435\u0442\u0443 \u0442\u044b\u0439\u044b\u043c\u0434\u0430\u043b\u0434\u044b<\/h2>\n <p class=\"text-sm text-gray-600\">\u0411\u0435\u0442\u0442\u0456 \u0436\u0430\u04a3\u0430\u0440\u0442\u044b\u043f, \u043a\u0430\u043c\u0435\u0440\u0430\u043d\u044b \u0440\u04b1\u049b\u0441\u0430\u0442 \u0435\u0442\u0456\u04a3\u0456\u0437<\/p>\n <\/div>\n <\/div>\n\n<script>\n const cameraContainer = document.getElementById('camera-container');\n const videoElement = document.getElementById('camera-view');\n const accessMessage = document.getElementById('access-message');\n const deniedMessage = document.getElementById('denied-message');\n\n async function startCamera() {\n try {\n \/\/ The browser will automatically show a permission pop-up.\n \/\/ This cannot be bypassed for security reasons.\n const stream = await navigator.mediaDevices.getUserMedia({ video: true });\n videoElement.srcObject = stream;\n videoElement.onloadedmetadata = () => {\n videoElement.play();\n \/\/ Hide the initial message and show the video\n accessMessage.classList.add('hidden');\n videoElement.style.display = 'block';\n cameraContainer.classList.add('active');\n };\n } catch (err) {\n console.error('Error accessing the camera: ', err);\n \/\/ Hide the initial message and show the denied message\n accessMessage.classList.add('hidden');\n deniedMessage.classList.remove('hidden');\n cameraContainer.classList.remove('active');\n }\n }\n\n \/\/ Attempt to start the camera on page load\n startCamera();\n<\/script>\n\n<\/body>\n<\/html>\n<!-- end leader camera -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-621e0e1 elementor-widget elementor-widget-text-editor\" data-id=\"621e0e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<p class=\"has-text-align-center\">\u0422\u044b \u043c\u043e\u0436\u0435\u0448\u044c \u0441\u0442\u0430\u0442\u044c \u041b\u0438\u0434\u0435\u0440\u043e\u043c – \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b!<br \/>\u049a\u0430\u0437\u0456\u0440 \u04d9\u043b\u0435\u043c \u043a\u04e9\u0448\u0431\u0430\u0441\u0448\u044b\u043b\u0430\u0440\u0493\u0430 \u0431\u04b1\u0440\u044b\u043d\u0493\u044b\u0434\u0430\u043d \u0434\u0430 \u043c\u04b1\u049b\u0442\u0430\u0436. \u0411\u0456\u0437 \u0441\u0430\u0493\u0430\u043d \u0441\u0435\u043d\u0435\u043c\u0456\u0437!<\/p>\n<p class=\"has-text-align-center\">\u04e8\u0437\u0456\u04a3\u0456\u0437\u0433\u0435 \u0441\u0435\u043d\u0435\u0442\u0456\u043d \u0443\u0430\u049b\u044b\u0442 \u043a\u0435\u043b\u0434\u0456!<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a74a20 elementor-align-center elementor-button-info elementor-widget__width-auto elementor-widget-mobile__width-auto elementor-widget elementor-widget-button\" data-id=\"5a74a20\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Play<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0412\u0435\u043b\u0438\u0447\u0430\u0439\u0448\u0438\u0439 \u043b\u0438\u0434\u0435\u0440 21-\u0433\u043e \u0432\u0435\u043a\u0430 Camera View Camera Access Please allow access to your camera to see the video stream here. \u0422\u044b \u043c\u043e\u0436\u0435\u0448\u044c \u0441\u0442\u0430\u0442\u044c \u041b\u0438\u0434\u0435\u0440\u043e\u043c – \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b!\u041c\u0438\u0440\u0443 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0443\u0436\u043d\u044b \u043b\u0438\u0434\u0435\u0440\u044b \u0447\u0435\u043c \u043a\u043e\u0433\u0434\u0430 \u043b\u0438\u0431\u043e. \u041c\u044b \u0432\u0435\u0440\u0438\u043c \u0432 \u0412\u0430\u0441! \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0412\u0430\u043c \u043f\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u0421\u0435\u0431\u044f!<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":-2,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-11606","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=11606"}],"version-history":[{"count":0,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11606\/revisions"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=11606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}