[FRONT] 알고있으면 너무 좋은 프론트엔드 웹 기술 Screen Capture API

1
2
3
4
5
6
7
8
navigator.mediaDevices
  .getDisplayMedia(constraints)
  .then((stream) => {
    // 캡처된 스트림 활용
  })
  .catch((err) => {
    console.error("화면 캡처 실패:", err);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
const constraints = {
  video: {
    mediaSource: "screen", // 'screen', 'window', 'application'
    width: { ideal: 1920, max: 1920 },
    height: { ideal: 1080, max: 1080 },
    frameRate: { ideal: 30, max: 60 },
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
async function startScreenCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });

    // 비디오 엘리먼트에 스트림 연결
    const videoElement = document.getElementById("preview");
    videoElement.srcObject = stream;

    console.log("화면 캡처 시작됨");
    return stream;
  } catch (error) {
    console.error("화면 캡처 실패:", error);
    throw error;
  }
}

// 캡처 중지
function stopScreenCapture(stream) {
  const tracks = stream.getTracks();
  tracks.forEach((track) => {
    track.stop();
    console.log(`${track.kind} 트랙 중지됨`);
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
async function captureWithStatusDetection() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });

    // 트랙 종료 이벤트 리스너
    stream.getVideoTracks()[0].addEventListener("ended", () => {
      console.log("사용자가 화면 공유를 중지했습니다");
      // UI 업데이트 또는 정리 작업
      handleCaptureStop();
    });

    return stream;
  } catch (error) {
    if (error.name === "NotAllowedError") {
      console.log("사용자가 화면 공유를 거부했습니다");
    } else if (error.name === "NotSupportedError") {
      console.log("브라우저가 Screen Capture API를 지원하지 않습니다");
    }
    throw error;
  }
}

function handleCaptureStop() {
  // 캡처 중지 시 실행할 로직
  document.getElementById("status").textContent = "화면 공유 중지됨";
  document.getElementById("startBtn").disabled = false;
  document.getElementById("stopBtn").disabled = true;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class ScreenshotCapture {
  static async captureScreenshot() {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          mediaSource: "screen",
          width: { ideal: 1920 },
          height: { ideal: 1080 },
        },
      });

      const video = document.createElement("video");
      video.srcObject = stream;
      video.play();

      return new Promise((resolve) => {
        video.addEventListener("loadedmetadata", () => {
          const canvas = document.createElement("canvas");
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

          const context = canvas.getContext("2d");
          context.drawImage(video, 0, 0);

          // 스트림 중지
          stream.getTracks().forEach((track) => track.stop());

          // 이미지 데이터 반환
          canvas.toBlob(resolve, "image/png");
        });
      });
    } catch (error) {
      console.error("스크린샷 캡처 실패:", error);
      throw error;
    }
  }

  static downloadScreenshot(blob) {
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `screenshot-${Date.now()}.png`;
    link.click();
    URL.revokeObjectURL(url);
  }
}

// 사용 예제
document
  .getElementById("screenshot-btn")
  .addEventListener("click", async () => {
    try {
      const screenshot = await ScreenshotCapture.captureScreenshot();
      ScreenshotCapture.downloadScreenshot(screenshot);
    } catch (error) {
      alert("스크린샷 캡처에 실패했습니다.");
    }
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
class ScreenSharingRTC {
  constructor() {
    this.localStream = null;
    this.peerConnection = null;
    this.socket = null; // WebSocket 연결
  }

  async startScreenShare() {
    try {
      // 화면 캡처 시작
      this.localStream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          mediaSource: "screen",
          width: { ideal: 1920, max: 1920 },
          height: { ideal: 1080, max: 1080 },
          frameRate: { ideal: 30 },
        },
        audio: true,
      });

      // WebRTC PeerConnection 설정
      this.peerConnection = new RTCPeerConnection({
        iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
      });

      // 로컬 스트림을 PeerConnection에 추가
      this.localStream.getTracks().forEach((track) => {
        this.peerConnection.addTrack(track, this.localStream);
      });

      // ICE 후보 이벤트 처리
      this.peerConnection.addEventListener("icecandidate", (event) => {
        if (event.candidate) {
          this.sendSignal("ice-candidate", event.candidate);
        }
      });

      // Offer 생성 및 전송
      const offer = await this.peerConnection.createOffer();
      await this.peerConnection.setLocalDescription(offer);
      this.sendSignal("offer", offer);

      // 스트림 종료 감지
      this.localStream.getVideoTracks()[0].addEventListener("ended", () => {
        this.stopScreenShare();
      });

      console.log("화면 공유 시작됨");
    } catch (error) {
      console.error("화면 공유 실패:", error);
      throw error;
    }
  }

  async handleAnswer(answer) {
    await this.peerConnection.setRemoteDescription(answer);
  }

  async handleIceCandidate(candidate) {
    await this.peerConnection.addIceCandidate(candidate);
  }

  stopScreenShare() {
    if (this.localStream) {
      this.localStream.getTracks().forEach((track) => track.stop());
      this.localStream = null;
    }

    if (this.peerConnection) {
      this.peerConnection.close();
      this.peerConnection = null;
    }

    this.sendSignal("screen-share-ended");
    console.log("화면 공유 종료됨");
  }

  sendSignal(type, data) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({ type, data }));
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
class OptimizedScreenCapture {
  constructor(options = {}) {
    this.options = {
      quality: options.quality || "high", // 'low', 'medium', 'high'
      frameRate: options.frameRate || 30,
      audioBitrate: options.audioBitrate || 128000,
      videoBitrate: options.videoBitrate || 2500000,
      ...options,
    };

    this.stream = null;
    this.recorder = null;
    this.chunks = [];
  }

  getConstraints() {
    const qualitySettings = {
      low: { width: 1280, height: 720, frameRate: 15 },
      medium: { width: 1920, height: 1080, frameRate: 24 },
      high: { width: 1920, height: 1080, frameRate: 30 },
    };

    const setting = qualitySettings[this.options.quality];

    return {
      video: {
        mediaSource: "screen",
        width: { ideal: setting.width, max: setting.width },
        height: { ideal: setting.height, max: setting.height },
        frameRate: { ideal: setting.frameRate, max: setting.frameRate },
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
        sampleRate: 44100,
      },
    };
  }

  async startCapture() {
    try {
      const constraints = this.getConstraints();
      this.stream = await navigator.mediaDevices.getDisplayMedia(constraints);

      // 스트림 통계 모니터링
      this.monitorStreamStats();

      return this.stream;
    } catch (error) {
      console.error("최적화된 캡처 실패:", error);
      throw error;
    }
  }

  async startRecording() {
    if (!this.stream) {
      throw new Error("캡처 스트림이 없습니다");
    }

    // 최적화된 MediaRecorder 옵션
    const mimeTypes = [
      "video/webm;codecs=vp9,opus",
      "video/webm;codecs=vp8,opus",
      "video/webm;codecs=h264,opus",
      "video/webm",
    ];

    let selectedMimeType = null;
    for (const mimeType of mimeTypes) {
      if (MediaRecorder.isTypeSupported(mimeType)) {
        selectedMimeType = mimeType;
        break;
      }
    }

    if (!selectedMimeType) {
      throw new Error("지원되는 비디오 형식이 없습니다");
    }

    this.recorder = new MediaRecorder(this.stream, {
      mimeType: selectedMimeType,
      audioBitsPerSecond: this.options.audioBitrate,
      videoBitsPerSecond: this.options.videoBitrate,
    });

    this.chunks = [];

    this.recorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        this.chunks.push(event.data);
      }
    };

    this.recorder.onstop = () => {
      this.handleRecordingComplete();
    };

    this.recorder.start(1000); // 1초마다 데이터 청크 생성
    console.log(`녹화 시작 (${selectedMimeType})`);
  }

  stopRecording() {
    if (this.recorder && this.recorder.state === "recording") {
      this.recorder.stop();
    }
  }

  handleRecordingComplete() {
    const blob = new Blob(this.chunks, {
      type: this.recorder.mimeType,
    });

    const stats = {
      size: (blob.size / 1024 / 1024).toFixed(2) + " MB",
      duration: this.getRecordingDuration(),
      quality: this.options.quality,
      mimeType: this.recorder.mimeType,
    };

    console.log("녹화 완료:", stats);
    this.downloadRecording(blob, stats);
  }

  downloadRecording(blob, stats) {
    const url = URL.createObjectURL(blob);
    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
    const filename = `screen-${this.options.quality}-${timestamp}.webm`;

    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    link.click();

    URL.revokeObjectURL(url);
  }

  monitorStreamStats() {
    if (!this.stream) return;

    setInterval(() => {
      const videoTrack = this.stream.getVideoTracks()[0];
      if (videoTrack) {
        const settings = videoTrack.getSettings();
        console.log("스트림 상태:", {
          width: settings.width,
          height: settings.height,
          frameRate: settings.frameRate,
          deviceId: settings.deviceId,
        });
      }
    }, 5000);
  }

  getRecordingDuration() {
    // 녹화 시간 계산 로직
    return "계산 중...";
  }

  cleanup() {
    if (this.stream) {
      this.stream.getTracks().forEach((track) => track.stop());
      this.stream = null;
    }

    if (this.recorder) {
      this.recorder = null;
    }

    this.chunks = [];
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function checkScreenCaptureSupport() {
  const support = {
    getDisplayMedia: !!(
      navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia
    ),
    mediaRecorder: !!window.MediaRecorder,
    webRTC: !!(window.RTCPeerConnection || window.webkitRTCPeerConnection),
  };

  return {
    ...support,
    fullSupport: Object.values(support).every(Boolean),
  };
}

// 사용 예제
const support = checkScreenCaptureSupport();
console.log("브라우저 지원 현황:", support);

if (!support.getDisplayMedia) {
  alert("이 브라우저는 Screen Capture API를 지원하지 않습니다.");
} else if (!support.mediaRecorder) {
  alert("이 브라우저는 화면 녹화를 지원하지 않습니다.");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 권한 상태 확인
async function checkPermissions() {
  try {
    const result = await navigator.permissions.query({
      name: "display-capture",
    });
    console.log("화면 캡처 권한 상태:", result.state);

    result.addEventListener("change", () => {
      console.log("권한 상태 변경:", result.state);
    });
  } catch (error) {
    console.log("권한 확인 불가:", error);
  }
}

1
2
3
4
// HTTPS 환경에서만 동작
if (location.protocol !== "https:" && location.hostname !== "localhost") {
  console.error("Screen Capture API는 HTTPS 환경에서만 사용 가능합니다.");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class SecureScreenCapture {
  constructor() {
    this.sensitivePatterns = [
      /password/i,
      /credit.?card/i,
      /ssn|social.?security/i,
    ];
  }

  async startSecureCapture() {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: false, // 오디오는 보안상 비활성화
      });

      // 민감 정보 감지 및 경고
      this.monitorSensitiveContent(stream);

      return stream;
    } catch (error) {
      console.error("보안 캡처 실패:", error);
      throw error;
    }
  }

  monitorSensitiveContent(stream) {
    const video = document.createElement("video");
    video.srcObject = stream;
    video.play();

    setInterval(() => {
      // OCR 라이브러리를 사용하여 텍스트 추출 (예: Tesseract.js)
      // 실제 구현에서는 적절한 OCR 솔루션 사용
      this.detectSensitiveText(video);
    }, 5000);
  }

  detectSensitiveText(video) {
    // 실제 구현에서는 OCR 라이브러리 사용
    console.log("민감 정보 감지 모니터링 중...");
  }
}

1
2
3
4
5
6
7
8
const optimizedConstraints = {
  video: {
    mediaSource: "screen",
    frameRate: { ideal: 15, max: 30 }, // 낮은 프레임률로 시작
    width: { ideal: 1280, max: 1920 },
    height: { ideal: 720, max: 1080 },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MemoryEfficientCapture {
  constructor() {
    this.chunks = [];
    this.maxChunks = 100; // 최대 청크 수 제한
  }

  handleDataAvailable(event) {
    if (event.data.size > 0) {
      this.chunks.push(event.data);

      // 메모리 사용량 제한
      if (this.chunks.length > this.maxChunks) {
        this.chunks.shift(); // 가장 오래된 청크 제거
      }
    }
  }

  cleanup() {
    this.chunks = [];
    if (global.gc) {
      global.gc(); // 가비지 컬렉션 강제 실행 (Node.js)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class PerformanceMonitor {
  constructor() {
    this.stats = {
      frameDrops: 0,
      cpuUsage: 0,
      memoryUsage: 0,
    };
  }

  startMonitoring(stream) {
    const videoTrack = stream.getVideoTracks()[0];

    setInterval(() => {
      // 브라우저 성능 API 사용
      const perfEntries = performance.getEntriesByType("measure");

      // 메모리 사용량 확인 (지원되는 브라우저에서)
      if (performance.memory) {
        this.stats.memoryUsage = performance.memory.usedJSHeapSize;
      }

      console.log("성능 통계:", this.stats);
    }, 10000);
  }
}