Skip to content

S
SHMCamStudio
Commit f4bddbcc authored by Robocoders's avatar Robocoders
Browse files
Options

Update stream.html and index.html for responsive video resizing in sidebar

parent 8136e978
Pipeline #160 failed with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 81 additions and 71 deletions
      templates/index.html
      View file @ f4bddbcc
      ......@@ -294,4 +294,52 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
      }, { passive: false });
      </script>
      </body>
      </html>
      <script>
      const sidebar = document.querySelector('.sidebar');
      const resizeHandle = document.getElementById('resize-handle');
      const buttonsContainer = document.querySelector('.buttons-container');
      const containerWidth = document.querySelector('.main-container').clientWidth;
      function adjustSidebarWidth(newWidth) {
      sidebar.style.width = `${newWidth}px`;
      buttonsContainer.style.width = `${containerWidth - newWidth}px`;
      // Notify the iframe about the resize
      var iframe = document.querySelector(".video-container iframe");
      if (iframe) {
      iframe.contentWindow.postMessage("resize", "*");
      }
      }
      let isResizing = false;
      resizeHandle.addEventListener('mousedown', (e) => {
      isResizing = true;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', stopResize);
      });
      function handleMouseMove(e) {
      if (!isResizing) return;
      let newWidth = e.clientX;
      // Limit sidebar width between 50px and 50% of screen
      newWidth = Math.max(50, Math.min(newWidth, containerWidth / 2));
      adjustSidebarWidth(newWidth);
      }
      function stopResize() {
      isResizing = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', stopResize);
      }
      // Prevent zoom on double-tap for mobile
      document.addEventListener('touchmove', function(event) {
      if (event.scale !== 1) { event.preventDefault(); }
      }, { passive: false });
      </script>
      </body>
      </html>
      templates/stream.html
      View file @ f4bddbcc
      ......@@ -14,103 +14,65 @@ GNU General Public License for more details.
      You should have received a copy of the GNU General Public License
      along with this program. If not, see <https://www.gnu.org/licenses/>.
      -->
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <title>Stream Interface</title>
      <!-- Video.js CSS -->
      <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Video Stream</title>
      <style>
      body {
      body, html {
      margin: 0;
      padding: 0;
      background-color: #000;
      height: 100%;
      overflow: hidden;
      }
      #videoContainer {
      width: 100%;
      height: 100vh;
      background-color: #000;
      height: 100%;
      }
      /* Prevent text selection and touch callout */
      body {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      user-select: none;
      video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      }
      </style>
      </head>
      <body>
      <div id="videoContainer">
      <video
      id="videoElement"
      class="video-js vjs-default-skin"
      controls
      playsinline
      width="100%"
      height="100%"
      >
      <video id="videoPlayer" autoplay muted playsinline>
      <source src="/video_feed" type="video/mp4">
      Your browser does not support the video tag.
      </video>
      </div>
      <!-- Video.js library -->
      <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
      <script>
      const videoElement = document.getElementById('videoElement');
      window.onload = function() {
      var player = videojs('videoElement', {
      html5: {
      vhs: {
      overrideNative: !videojs.browser.IS_SAFARI
      },
      nativeAudioTracks: false,
      nativeVideoTracks: false
      }});
      player.src({ src: '{{ stream_url }}', type: 'application/x-mpegURL'});
      player.play();
      };
      var player = videojs('videoPlayer', {
      autoplay: true,
      muted: true,
      controls: true,
      fluid: true,
      responsive: true
      });
      // Fullscreen on click
      videoElement.addEventListener('click', () => {
      if (!document.fullscreenElement) {
      if (videoElement.requestFullscreen) {
      videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) { // Firefox
      videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
      videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) { // IE/Edge
      videoElement.msRequestFullscreen();
      }
      } else {
      if (document.exitFullscreen) {
      document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
      document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
      // Function to handle resize
      function handleResize() {
      var videoContainer = document.getElementById('videoContainer');
      var video = document.getElementById('videoPlayer');
      video.style.width = videoContainer.clientWidth + 'px';
      video.style.height = videoContainer.clientHeight + 'px';
      }
      }
      });
      // Prevent zoom
      document.addEventListener('touchmove', function(event) {
      if (event.scale !== 1) {
      event.preventDefault();
      // Call handleResize initially and on window resize
      handleResize();
      window.addEventListener('resize', handleResize);
      // Listen for messages from the parent window
      window.addEventListener('message', function(event) {
      if (event.data === 'resize') {
      handleResize();
      }
      }, { passive: false });
      }, false);
      </script>
      </body>
      </html>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment