clearlysid / kap-cam

goodbye @loomhq, hello open source!
https://getkap.co
MIT License
17 stars 2 forks source link

How to "Flip camera"? #6

Closed yashaka closed 1 year ago

yashaka commented 1 year ago

Any idea how to quickly implement Loom-like «Flip Camera» behavior in this plugin?

yashaka commented 1 year ago

So, here is the receipt... Add:

        transform: rotateY(180deg);
        -webkit-transform:rotateY(180deg);

into camera/index.html inside style for video element, so your final index.html will look like:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body, html, .container {
        width: 100vw;
        height: 100vh;
        -webkit-app-region: drag;
      }

      video {
        background-color: black;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-app-region: drag;
        transition: opacity 0.2s ease-in-out;
        transform: rotateY(180deg);
        -webkit-transform:rotateY(180deg);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <video id="preview" autoplay="true" muted></video>
    </div>
  </body>
  <script src="./camera.js"></script>
</html>