{"id":14008,"date":"2024-10-12T08:52:23","date_gmt":"2024-10-12T07:52:23","guid":{"rendered":"https:\/\/organicfarmer.store\/?page_id=14008"},"modified":"2024-10-27T10:33:30","modified_gmt":"2024-10-27T10:33:30","slug":"elementor-14008","status":"publish","type":"page","link":"https:\/\/organicfarmer.store\/index.php\/elementor-14008\/","title":{"rendered":"Elementor #14008"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Video Testimonial Recorder<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n height: 100vh;\r\n background-color: #f0f0f0;\r\n }\r\n\r\n #container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n background-color: white;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n top: 50%;\r\n transform: translateY(-50%);\r\n text-align: center;\r\n }\r\n\r\n h1 {\r\n margin-bottom: 20px;\r\n }\r\n\r\n #video {\r\n width: 100%;\r\n max-width: 100%;\r\n display: none;\r\n border: 1px solid #ccc;\r\n border-radius: 10px;\r\n }\r\n\r\n #controls {\r\n margin-top: 20px;\r\n position: relative;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 15px;\r\n }\r\n\r\n #proceedButton, #uploadBtn {\r\n font-size: 18px;\r\n padding: 10px 20px;\r\n margin-top: 20px;\r\n cursor: pointer;\r\n }\r\n\r\n #uploadControls {\r\n display: none;\r\n }\r\n\r\n #videoContainer {\r\n position: relative;\r\n }\r\n\r\n #recordingIndicator {\r\n position: absolute;\r\n bottom: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: red;\r\n font-weight: bold;\r\n display: none;\r\n }\r\n\r\n #durationDisplay {\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: red;\r\n font-weight: bold;\r\n display: none;\r\n }\r\n\r\n #loadingMessage, #errorMessage {\r\n display: none;\r\n color: red;\r\n margin-top: 20px;\r\n }\r\n\r\n #overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n }\r\n\r\n #thankYouMessage {\r\n display: none;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"overlay\">\r\n <div id=\"loadingMessage\">Uploading...<\/div>\r\n <\/div>\r\n\r\n <div id=\"container\">\r\n <h1>Submit Your Testimonial<\/h1>\r\n <button id=\"proceedButton\">Proceed to Submit Video Testimonial<\/button>\r\n\r\n <div id=\"testimonialForm\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Your Name:<\/label>\r\n <input type=\"text\" id=\"name\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">Your Email:<\/label>\r\n <input type=\"email\" id=\"email\" required>\r\n <\/div>\r\n\r\n <h3>Record Your Testimonial<\/h3>\r\n <div id=\"videoContainer\">\r\n <video id=\"video\" autoplay muted=\"true\"><\/video> <!-- Live feed without controls -->\r\n <div id=\"durationDisplay\">Duration: <span id=\"duration\">0:00<\/span><\/div>\r\n <div id=\"recordingIndicator\">\u25cf Recording...<\/div>\r\n <\/div>\r\n\r\n <div id=\"controls\">\r\n <button id=\"startBtn\">Start Recording<\/button>\r\n <button id=\"stopBtn\" style=\"display: none;\">Stop Recording<\/button>\r\n <button id=\"discardBtn\" style=\"display: none;\">Discard Video<\/button>\r\n <\/div>\r\n\r\n <div id=\"uploadControls\" style=\"display: none;\">\r\n <button id=\"uploadBtn\" disabled>Submit Testimonial<\/button>\r\n <div id=\"errorMessage\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"thankYouMessage\">\r\n <h2>Thank You!<\/h2>\r\n <p>Your testimonial has been submitted successfully.<\/p>\r\n <button id=\"returnButton\">Return to Submit Another Testimonial<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/axios\/dist\/axios.min.js\"><\/script>\r\n <script>\r\n const video = document.getElementById('video');\r\n const startBtn = document.getElementById('startBtn');\r\n const stopBtn = document.getElementById('stopBtn');\r\n const discardBtn = document.getElementById('discardBtn');\r\n const uploadBtn = document.getElementById('uploadBtn');\r\n const proceedButton = document.getElementById('proceedButton');\r\n const recordingIndicator = document.getElementById('recordingIndicator');\r\n const testimonialForm = document.getElementById('testimonialForm');\r\n const durationDisplay = document.getElementById('durationDisplay');\r\n const durationElement = document.getElementById('duration');\r\n const loadingMessage = document.getElementById('loadingMessage');\r\n const errorMessage = document.getElementById('errorMessage');\r\n const overlay = document.getElementById('overlay');\r\n const thankYouMessage = document.getElementById('thankYouMessage');\r\n const returnButton = document.getElementById('returnButton');\r\n\r\n let mediaRecorder;\r\n let recordedBlobs;\r\n let stream;\r\n let durationTimer;\r\n let recordingStartTime;\r\n\r\n proceedButton.addEventListener('click', () => {\r\n proceedButton.style.display = 'none';\r\n testimonialForm.style.display = 'block';\r\n requestMediaAccess();\r\n });\r\n\r\n function requestMediaAccess() {\r\n navigator.mediaDevices.getUserMedia({ video: true, audio: true })\r\n .then(mediaStream => {\r\n stream = mediaStream;\r\n video.srcObject = stream;\r\n video.style.display = 'block';\r\n startBtn.disabled = false;\r\n\r\n mediaRecorder = new MediaRecorder(stream);\r\n recordedBlobs = [];\r\n\r\n mediaRecorder.ondataavailable = (event) => {\r\n if (event.data.size > 0) {\r\n recordedBlobs.push(event.data);\r\n }\r\n };\r\n\r\n mediaRecorder.onstop = () => {\r\n const blob = new Blob(recordedBlobs, { type: 'video\/webm' });\r\n const videoURL = window.URL.createObjectURL(blob);\r\n video.srcObject = null; \/\/ Stop live feed\r\n video.muted = false; \/\/ Explicitly set muted to true\r\n video.autoplay = false; \r\n video.src = videoURL; \/\/ Set recorded video source\r\n video.controls = true; \/\/ Enable controls for recorded video\r\n\r\n uploadBtn.disabled = false; \/\/ Enable upload button\r\n durationDisplay.style.display = 'none'; \/\/ Hide duration display after recording\r\n discardBtn.style.display = 'inline-block'; \/\/ Show discard button\r\n stopBtn.style.display = 'none'; \/\/ Hide stop button\r\n uploadControls.style.display = 'block'; \/\/ Show upload controls\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error accessing media devices.', error);\r\n alert('Unable to access camera and microphone. Please check your permissions.');\r\n });\r\n }\r\n\r\n function isStreamActive(stream) {\r\n if (!stream) return false; \/\/ Stream is null or undefined\r\n return stream.getTracks().some(track => track.readyState === 'live');\r\n }\r\n\r\n startBtn.addEventListener('click', () => {\r\n recordedBlobs = [];\r\n mediaRecorder.start();\r\n startBtn.style.display = 'none';\r\n stopBtn.style.display = 'inline-block';\r\n recordingIndicator.style.display = 'block';\r\n durationDisplay.style.display = 'block'; \/\/ Show duration display\r\n\r\n recordingStartTime = Date.now(); \/\/ Record the start time\r\n durationTimer = setInterval(() => {\r\n const elapsedTime = Math.floor((Date.now() - recordingStartTime) \/ 1000);\r\n const minutes = Math.floor(elapsedTime \/ 60);\r\n const seconds = elapsedTime % 60;\r\n durationElement.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\r\n }, 1000); \/\/ Update every second\r\n });\r\n\r\n stopBtn.addEventListener('click', () => {\r\n mediaRecorder.stop();\r\n stopBtn.style.display = 'none';\r\n recordingIndicator.style.display = 'none';\r\n clearInterval(durationTimer); \/\/ Stop the duration timer\r\n });\r\n\r\n discardBtn.addEventListener('click', () => {\r\n \/\/ Check if the stream is active\r\n if (isStreamActive(stream)) {\r\n video.srcObject = stream; \/\/ Restart the live feed from the existing stream\r\n video.style.display = 'block'; \/\/ Ensure video is displayed\r\n video.controls = false; \/\/ Disable controls for live feed\r\n } else {\r\n requestMediaAccess(); \/\/ If the stream is not active, request media access\r\n }\r\n \r\n \/\/ Reset UI components\r\n discardBtn.style.display = 'none'; \/\/ Hide discard button\r\n startBtn.style.display = 'inline-block'; \/\/ Show start button again\r\n uploadBtn.disabled = true; \/\/ Disable upload button\r\n durationDisplay.style.display = 'none'; \/\/ Hide duration display\r\n uploadControls.style.display = 'none'; \/\/ Hide upload controls\r\n errorMessage.style.display = 'none'; \/\/ Hide error message\r\n });\r\n\r\n uploadBtn.addEventListener('click', () => {\r\n overlay.style.display = 'flex'; \/\/ Show loading overlay\r\n const formData = new FormData();\r\n const blob = new Blob(recordedBlobs, { type: 'video\/webm' });\r\n formData.append('video', blob);\r\n formData.append('name', document.getElementById('name').value);\r\n formData.append('email', document.getElementById('email').value);\r\n\r\n \/\/ Replace 'your-upload-endpoint' with your actual endpoint\r\n axios.post('\/staging\/upload.php', formData)\r\n .then(response => {\r\n console.log('Success:', response.data);\r\n overlay.style.display = 'none'; \/\/ Hide loading overlay\r\n thankYouMessage.style.display = 'block'; \/\/ Show thank you message\r\n })\r\n .catch(error => {\r\n console.error('Error uploading video:', error);\r\n overlay.style.display = 'none'; \/\/ Hide loading overlay\r\n errorMessage.textContent = 'Error uploading video. Please try again.';\r\n errorMessage.style.display = 'block'; \/\/ Show error message\r\n });\r\n });\r\n\r\n returnButton.addEventListener('click', () => {\r\n thankYouMessage.style.display = 'none'; \/\/ Hide thank you message\r\n proceedButton.style.display = 'inline-block'; \/\/ Show proceed button\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Video Testimonial Recorder Uploading… Submit Your Testimonial Proceed to Submit Video Testimonial Your Name: Your Email: Record Your Testimonial Duration: 0:00 \u25cf Recording… Start Recording Stop Recording Discard Video Submit Testimonial Thank You! Your testimonial has been submitted successfully. Return to Submit Another Testimonial<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-14008","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/pages\/14008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/comments?post=14008"}],"version-history":[{"count":478,"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions"}],"predecessor-version":[{"id":14784,"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/pages\/14008\/revisions\/14784"}],"wp:attachment":[{"href":"https:\/\/organicfarmer.store\/index.php\/wp-json\/wp\/v2\/media?parent=14008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}