Video Tests #2

In this example below you will see how to do a Video Tests #2 with some HTML / CSS and Javascript

Learning more about accessing camera from devices.Certain devices (like iOS 11) do not allow this within an iframe, so access direct link: https://s.codepen.io/danwilson/debug/YaXVep

Thumbnail
This awesome code was written by Dan Wilson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Dan Wilson ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Video Tests #2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <div><video playsinline id="v1"></div></video>
  <div><video playsinline id="v2"></div></video>
</main>
<nav>
  <button id="launch-camera">Launch Camera</button>
  <p>Video is not recorded or stored, it only streams to the browser and you</p>
</nav>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/danwilson/video-tests-2-YaXVep */
video, div {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: 
    scale(var(--s, 1))
    scaleX(var(--h, 1))
    scaleY(var(--v, 1));
          transform: 
    scale(var(--s, 1))
    scaleX(var(--h, 1))
    scaleY(var(--v, 1));
  position: absolute;
  top: 0;
  left: 0;
}
div {
  color: hsl(var(--hue, 343), 80%, 55%);
  background: currentColor;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: currentColor;
  mix-blend-mode: screen;
}
div:nth-of-type(n + 1) {
  --s: 1;
  --h: -1;
  opacity: .8;
  -webkit-clip-path: polygon(
    10% 0%, 10% 100%, 35% 100%, 35% -5%, 65% -5%, 65% 100%, 98% 100%, 98% -10%, 10% -10%
  );
          clip-path: polygon(
    10% 0%, 10% 100%, 35% 100%, 35% -5%, 65% -5%, 65% 100%, 98% 100%, 98% -10%, 10% -10%
  );
}
div:nth-of-type(n + 2) {
  --hue: 193;
  --s: 1.2;
  --h: 1;
  -webkit-animation: clip-it 5000ms infinite alternate linear;
          animation: clip-it 5000ms infinite alternate linear;
}
@-webkit-keyframes clip-it {
  0% {
    -webkit-clip-path: polygon(
      10% 0%, 45% 0%, 95% 100%, 60% 100%
    );
            clip-path: polygon(
      10% 0%, 45% 0%, 95% 100%, 60% 100%
    );
  }
  100% {
    -webkit-clip-path: polygon(
      60% 0%, 95% 0%, 5% 80%, 95% 100%
    );
            clip-path: polygon(
      60% 0%, 95% 0%, 5% 80%, 95% 100%
    );
  }
}
@keyframes clip-it {
  0% {
    -webkit-clip-path: polygon(
      10% 0%, 45% 0%, 95% 100%, 60% 100%
    );
            clip-path: polygon(
      10% 0%, 45% 0%, 95% 100%, 60% 100%
    );
  }
  100% {
    -webkit-clip-path: polygon(
      60% 0%, 95% 0%, 5% 80%, 95% 100%
    );
            clip-path: polygon(
      60% 0%, 95% 0%, 5% 80%, 95% 100%
    );
  }
}
main {
  margin: auto;
  width: 56vw;
  height: 42vw;
  position: relative;
}
body {
  height: 100vh;
  display: flex;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: hsla(343, 80%, 50%, .075);
}
*, *::before, *::after {
  box-sizing: border-box;
}

nav {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 350ms ease-in-out;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: hsla(343, 100%, 95%, .875)
}
.streaming nav {
  opacity: 0;
  pointer-events: none;
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: .5rem;
  border: .3rem solid hsl(183, 80%, 50%);
  background: hsla(183, 80%, 50%, .2);
  font-weight: bold;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  margin: 2rem;
}

/*Downloaded from https://www.codeseek.co/danwilson/video-tests-2-YaXVep */
var button = document.getElementById('launch-camera');
const videos = Array.from(document.querySelectorAll('video'));

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  button.addEventListener('click', function(e) {
    navigator.mediaDevices.getUserMedia({
      audio: false, 
      video: {
        facingMode: 'user'
      }
    }).then(stream => {
      document.documentElement.classList.add('streaming');
      videos.forEach(video => {
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      });
    }).catch(err => {
      console.log('error', err)
    });
  });
}

Comments