JavaScript로 화면 공유 애플리케이션을 만드는 방법

21337 단어 htmljavascriptcsswebdev
자신만의 화면 공유 응용 프로그램을 만드는 것이 얼마나 어려울지 또는 쉬울지 궁금한 적이 있습니까?

이 기사에서는 Screen Capture API를 통해 JavaScript로 화면 공유 애플리케이션을 만드는 방법을 보여줍니다.
및 그 getDisplayMedia() 기술. 이렇게 하면 화면의 절반 또는 전체를 캡처하여 다른 사용자와 공유할 수 있습니다.
WebRTC 회의 세션 전체에서 사용자.

초기 단계:


  • 즐겨 사용하는 IDE에서 새 프로젝트를 만듭니다.
  • HTML 상용구 코드 설정
  • JavaScript 코드 추가
  • 라이브 서버 배포

    • 좋아하는 IDE에서 새 프로젝트 만들기

    이 튜토리얼에서는 VScode를 사용할 것입니다. 원하는 편집기를 자유롭게 사용하십시오. 계속해서 설정하겠습니다.
    우리의 html 코드.

    HTML:



    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Screen Sharing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div style="width:80%;background: grey;margin: auto;">
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div style="width:80%;margin: auto;padding-top:10px ;">
        <button class="btn btn-primary" id="start"> Start Screen Sharing</button>
        <button class="btn btn-secondary" id="stop"> Stop</button>
    </div>
</body>

</html>

    라이브 서버를 시작하고 브라우저에서 index.html 파일을 엽니다. 다음과 같은 페이지가 표시됩니다.


    자바스크립트:



    다음으로 index.html 파일에 JavaScript 코드를 추가해야 합니다. 계속해서 본문 섹션에 스크립트 태그를 추가하십시오.
    index.html 파일을 열고 다음 코드를 추가합니다.

    const videoElem = document.getElementById("video");
      const startElem = document.getElementById("start");
      const stopElem = document.getElementById("stop");
      // Options for getDisplayMedia()
      var displayMediaOptions = {
          video: {
              cursor: "always",
              height: 1000,
              width: 1200
          },
          audio: false
      };
      // Set event listeners for the start and stop buttons
      startElem.addEventListener("click", function (evt) {
          startCapture();
      }, false);
      // Stop the screen capture
      stopElem.addEventListener("click", function (evt) {
          stopCapture();
      }, false);
      // Start the screen capture
      async function startCapture() {
          try {
              videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
              dumpOptionsInfo();
          } catch (err) {
              // Handle error
              console.error("Error: " + err);
          }
      }
      // Stop the stream
      function stopCapture(evt) {
          let tracks = videoElem.srcObject.getTracks();
          tracks.forEach(track => track.stop());
          videoElem.srcObject = null;
      }
      // Dump the available media track capabilities to the console
      function dumpOptionsInfo() {
          const videoTrack = videoElem.srcObject.getVideoTracks()[0];
          console.info("Track settings:");
          console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
          console.info("Track constraints:");
          console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}


    애플리케이션 테스트



    이제 애플리케이션을 테스트할 수 있습니다. 브라우저에서 index.html 파일을 열고 시작 버튼을 클릭하여
    화면 캡처를 초기화합니다.



    화면을 클릭하면 클릭한 화면의 비디오 스트림이 표시됩니다. 중지를 클릭할 수도 있습니다.
    버튼을 눌러 화면 캡처를 중지합니다.



    전체 코드:




    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Screen Sharing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div style="width:80%;background: grey;margin: auto;">
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div style="width:80%;margin: auto;padding-top:10px ;">
        <button class="btn btn-primary" id="start"> Start Screen Sharing</button>
        <button class="btn btn-secondary" id="stop"> Stop</button>
    </div>
    <script type="text/javascript">
        const videoElem = document.getElementById("video");
        const startElem = document.getElementById("start");
        const stopElem = document.getElementById("stop");
        // Options for getDisplayMedia()
        var displayMediaOptions = {
            video: {
                cursor: "always",
                height: 1000,
                width: 1200
            },
            audio: false
        };
        // Set event listeners for the start and stop buttons
        startElem.addEventListener("click", function (evt) {
            startCapture();
        }, false);
        stopElem.addEventListener("click", function (evt) {
            stopCapture();
        }, false);
        async function startCapture() {
            try {
                videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                dumpOptionsInfo();
            } catch (err) {
                console.error("Error: " + err);
            }
        }

        function stopCapture(evt) {
            let tracks = videoElem.srcObject.getTracks();
            tracks.forEach(track => track.stop());
            videoElem.srcObject = null;
        }

        function dumpOptionsInfo() {
            const videoTrack = videoElem.srcObject.getVideoTracks()[0];
            console.info("Track settings:");
            console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
            console.info("Track constraints:");
            console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
        }
    </script>
</body>
</html>



    🤝 시간을 내어 이 기사를 읽어주셔서 감사합니다! 도움이 되었기를 바라며 오늘 새로운 것을 배웠습니다! 추가하고 싶은 것이 있으면 댓글을 남겨주세요.

    ☕️ 제 콘텐츠Buy me a coffee를 즐겨 읽으신다면 계속해서 멋진 품질의 블로그를 만드는 데 도움이 될 것입니다!

    👨🏽‍💻 더 많은 Web Dev 코드 스니펫, 팁 및 요령을 보려면 내Grepper Platform를 확인하십시오.

    🎨 제 포트폴리오here도 확인하실 수 있습니다.

    🐦 또한 저를 팔로우하여 제 독학 여정과 웹 개발에 대한 더 많은 팁을 확인할 수 있습니다.
    손상 체크섬
    메뉴리스 Notasi Matematika Menggunakan MathJax

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage