JS Mini projects - Picture in Picture(PIP)

Seulingยท2022๋…„ 6์›” 14์ผ
0

FE

๋ชฉ๋ก ๋ณด๊ธฐ
12/42

๐Ÿซข ๊ตฌํ˜„ ์ „ ์ƒ๊ฐ
API๋ฅผ ์ด์šฉํ•˜๋Š”๊ฒƒ๊ฐ™์€๋ฐ... ๊ฐ์ด์˜ค์ง€์•Š๋Š”๋‹ค...!

๐Ÿ’ก ์•Œ๊ฒŒ๋œ ๊ฒƒ

HTML

  <!-- Video -->
    <video id="video" controls height="360" width="640" hidden ></video>
    <!-- Button -->
    <div class="button-container">
      <button id="button">START</button>
    </div>

JS

  1. ๋ฏธ๋””์–ด ์ŠคํŠธ๋ฆผ์„ ์„ ํƒํ•˜๊ณ  ๋น„๋””์˜ค ์š”์†Œ๋กœ ์ „๋‹ฌํ•œ ๋‹ค์Œ ์žฌ์ƒํ•˜๊ธฐ selectMediaStream()
const videoElement = document.getElementById("video");

//Prompt to select media stream, pass to video element, then play
async function selectMediaStream() {
  try {
    //๋ฏธ๋””์–ด์ŠคํŠธ๋ฆผ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์งˆ ๋ณ€์ˆ˜๋ฅผ ์„ค์ •ํ•˜๊ณ  ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์Œ
    const mediaStream = await navigator.mediaDevices.getDisplayMedia();
    //ํ•ด๋‹น ๋ฏธ๋””์–ด ์ŠคํŠธ๋ฆผ์„ ์†Œ์Šค๊ฐœ์ฒด๋กœ ๋น„๋””์˜ค ๊ฐœ์ฒด์— ์ „๋‹ฌํ•จ
    videoElement.srcObject = mediaStream;
    // ํ•ด๋‹น ๋™์˜์ƒ์ด ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋ฉด, ๋™์˜์ƒ์„ ์žฌ์ƒํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•จ
    videoElement.onloadedmetadata = () => {
      videoElement.play();
    };
  } catch (error) {
    //Catch Error Here
    console.log("Whoops, error here:", error);
  }
}
  1. ๋ฒ„ํŠผ ํด๋ฆญ์ด๋ฒคํŠธ
const button = document.getElementById("button");

button.addEventListener("click", async () => {
  //Disable Button
  button.disabled = true;
  // Start Picture in Picture
  await videoElement.requestPictureInPicture();
  // Reset Button
  button.disabled = false;
});

๐Ÿค” ์˜ค๋Š˜์˜ ์ƒ๊ฐ

PIP๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์•ผํ•˜๋‚˜? ๋ผ๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋Š”๋ฐ, ๋‚ด์žฅํ•จ์ˆ˜๋กœ ๊ตฌํ˜„ ๊ฐ€๋Šฅํ•œ์ ์ด ์ƒˆ์‚ผ๋†€๋ž๋‹ค!

๋ฌผ๋ก , ์ง€๊ธˆ์€ ๊ต‰์žฅํžˆ ์ œํ•œ์ ์ธ ๊ธฐ๋Šฅ์ธ๊ฒƒ๊ฐ™์ง€๋งŒ ๋‚˜์ค‘์— ๊ด€๋ จ ํ”„๋กœ์ ํŠธ ์‹œ ๋ง๋ถ™์—ฌ๋‚˜๊ฐ€๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค!

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ํ•ญ์ƒ ๋ญ˜ ํ•˜๊ณ ์žˆ๋Š” ์Šฌ๋ง

0๊ฐœ์˜ ๋Œ“๊ธ€