init pip

vvasileios · Apr 3, 2024 · b88cf88 · b88cf88
1 parent c71a9d0
commit b88cf88
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 0 deletions.
diff --git a/PictureInPicture/index.html b/PictureInPicture/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Picture in Picture</title>
+  <link rel="icon" type="image/png" href="favicon.png">
+  <link rel="stylesheet" href="styles.css">
+  <script src="script.js" defer></script>
+</head>
+
+<body>
+
+  <video id="video" controls height="360" width="640" hidden></video>
+
+  <div class="button-container">
+    <button id="button">START</button>
+  </div>
+</body>
+
+</html>
diff --git a/PictureInPicture/script.js b/PictureInPicture/script.js
@@ -0,0 +1,24 @@
+const videoElement = document.getElementById("video");
+const button = document.getElementById("button");
+
+async function selectMediaStream() {
+  try {
+    const mediaStream = await navigator.mediaDevices.getDisplayMedia();
+    videoElement.srcObject = mediaStream;
+    videoElement.onloadedmetadata = () => {
+      videoElement.play();
+    };
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+button.addEventListener("click", async () => {
+  button.disabled = true;
+
+  await videoElement.requestPictureInPicture();
+
+  button.disabled = false;
+});
+
+selectMediaStream();
diff --git a/PictureInPicture/styles.css b/PictureInPicture/styles.css
@@ -0,0 +1,45 @@
+@import url("https://fonts.googleapis.com/css?family=Barlow&display=swap");
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(37, 37, 37);
+}
+
+.button-container {
+  border: 2px solid black;
+  padding: 10px;
+  border-radius: 7px;
+  box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7);
+}
+
+button {
+  cursor: pointer;
+  outline: none;
+  width: 120px;
+  height: 75px;
+  font-family: Barlow, sans-serif;
+  font-size: 25px;
+  color: white;
+  text-shadow: 0 2px 5px black;
+  background: linear-gradient(to top, #696969, #575757);
+  border: 2px solid black;
+  border-radius: 7px;
+  box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.4), 0 12px 12px 0 rgba(0, 0, 0, 0.3);
+}
+
+button:hover {
+  background: linear-gradient(to bottom, #696969, #575757);
+}
+
+button:active {
+  transform: translateY(3px);
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.3);
+}