7 API وب جاوا اسکریپت پنهان برای ساخت وب سایت های آینده نگر که رقبای شما را شگفت زده می کند!

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    const videoTrack = stream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(videoTrack);

    imageCapture.takePhoto()
      .then(blob => {
        // Process the captured image
        console.log(blob);
      })
      .catch(error => {
        console.error('Error capturing photo: ', error);
      });
  })
  .catch(error => {
    console.error('Error accessing screen capture: ', error);
  });

const shareButton = document.getElementById('share-button');

shareButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'Check out this amazing website!',
      text: 'I just discovered an incredible website. You have to see it!',
      url: 'https://example.com'
    })
      .then(() => {
        console.log('Shared successfully!');
      })
      .catch(error => {
        console.error('Error sharing: ', error);
      });
  } else {
    console.error('Web Share API not supported');
  }
});

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element is in the viewport
      entry.target.classList.add('animate');
    } else {
      // Element is out of the viewport
      entry.target.classList.remove('animate');
    }
  });
});

const elements = document.querySelectorAll('.animate-me');
elements.forEach(element => {
  observer.observe(element);
});

const copyButton = document.getElementById('copy-button');
const copyText = document.getElementById('copy-text');

copyButton.addEventListener('click', () => {
  navigator.clipboard.writeText(copyText.value)
    .then(() => {
      console.log('Text copied to clipboard!');
    })
    .catch(error => {
      console.error('Error copying text: ', error);
    });
});

const enableWakeLock = document.getElementById('enable-wake-lock');

enableWakeLock.addEventListener('click', () => {
  if ('wakeLock' in navigator) {
    navigator.wakeLock.request('screen')
      .then(() => {
        console.log('Screen wake lock enabled');
      })
      .catch(error => {
        console.error('Error enabling screen wake lock: ', error);
      });
  } else {
    console.error('Screen Wake Lock API not supported');
  }
});

const lockOrientationButton = document.getElementById('lock-orientation-button');

lockOrientationButton.addEventListener('click', () => {
  if (screen.orientation && screen.orientation.lock) {
    screen.orientation.lock('landscape')
      .then(() => {
        console.log('Orientation locked to landscape');
      })
      .catch(error => {
        console.error('Error locking orientation: ', error);
      });
  } else {
    console.error('Screen Orientation API not supported');
  }
});

const fullscreenButton = document.getElementById('fullscreen-button');
const targetElement = document.getElementById('target-element');

fullscreenButton.addEventListener('click', () => {
  if (targetElement.requestFullscreen) {
    targetElement.requestFullscreen()
      .then(() => {
        console.log('Fullscreen mode activated');
      })
      .catch(error => {
        console.error('Error entering fullscreen mode: ', error);
      });
  } else {
    console.error('Fullscreen API not supported');