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

1
const mediaRecorder = new MediaRecorder(stream, options);

1
2
3
4
5
6
7
8
const options = {
  mimeType: "video/webm;codecs=vp8,opus", // 출력 형식
  audioBitsPerSecond: 128000, // 오디오 비트레이트
  videoBitsPerSecond: 2500000, // 비디오 비트레이트
  bitsPerSecond: 2628000, // 전체 비트레이트
};

const mediaRecorder = new MediaRecorder(stream, options);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 녹화 시작
mediaRecorder.start(timeslice); // timeslice: 데이터 청크 간격(ms)

// 녹화 중지
mediaRecorder.stop();

// 녹화 일시정지
mediaRecorder.pause();

// 녹화 재개
mediaRecorder.resume();

// 데이터 요청 (녹화 중에도 가능)
mediaRecorder.requestData();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
mediaRecorder.ondataavailable = function (event) {
  // 녹화 데이터가 준비될 때마다 호출
  console.log("데이터 크기:", event.data.size);
};

mediaRecorder.onstart = function () {
  console.log("녹화 시작됨");
};

mediaRecorder.onstop = function () {
  console.log("녹화 중지됨");
};

mediaRecorder.onpause = function () {
  console.log("녹화 일시정지됨");
};

mediaRecorder.onresume = function () {
  console.log("녹화 재개됨");
};

mediaRecorder.onerror = function (event) {
  console.error("녹화 오류:", event.error);
};

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
async function startAudioRecording() {
  try {
    // 마이크 권한 요청 및 스트림 획득
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
      },
    });

    // MediaRecorder 생성
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: "audio/webm",
      audioBitsPerSecond: 128000,
    });

    const chunks = [];

    // 데이터 수집
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        chunks.push(event.data);
      }
    };

    // 녹음 완료 처리
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(chunks, { type: "audio/webm" });
      const audioUrl = URL.createObjectURL(audioBlob);

      // 오디오 재생 또는 다운로드
      playAudio(audioUrl);
      downloadAudio(audioBlob);
    };

    // 녹음 시작
    mediaRecorder.start(1000); // 1초마다 데이터 청크 생성

    return { mediaRecorder, stream };
  } catch (error) {
    console.error("오디오 녹음 시작 실패:", error);
    throw error;
  }
}

function playAudio(audioUrl) {
  const audioElement = document.createElement("audio");
  audioElement.src = audioUrl;
  audioElement.controls = true;
  document.body.appendChild(audioElement);
}

function downloadAudio(audioBlob) {
  const url = URL.createObjectURL(audioBlob);
  const link = document.createElement("a");
  link.href = url;
  link.download = `audio-${Date.now()}.webm`;
  link.click();
  URL.revokeObjectURL(url);
}

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
async function startVideoRecording() {
  try {
    // 카메라와 마이크 권한 요청
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1280, max: 1920 },
        height: { ideal: 720, max: 1080 },
        frameRate: { ideal: 30 },
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
      },
    });

    // 비디오 미리보기
    const videoPreview = document.getElementById("preview");
    videoPreview.srcObject = stream;

    // MediaRecorder 생성
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: "video/webm;codecs=vp8,opus",
      videoBitsPerSecond: 2500000,
      audioBitsPerSecond: 128000,
    });

    const chunks = [];

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

    mediaRecorder.onstop = () => {
      const videoBlob = new Blob(chunks, { type: "video/webm" });
      const videoUrl = URL.createObjectURL(videoBlob);

      // 녹화된 비디오 표시
      displayRecordedVideo(videoUrl);

      // 스트림 정리
      stream.getTracks().forEach((track) => track.stop());
      videoPreview.srcObject = null;
    };

    mediaRecorder.start();
    return mediaRecorder;
  } catch (error) {
    console.error("비디오 녹화 시작 실패:", error);
    throw error;
  }
}

function displayRecordedVideo(videoUrl) {
  const recordedVideo = document.createElement("video");
  recordedVideo.src = videoUrl;
  recordedVideo.controls = true;
  recordedVideo.style.width = "100%";
  recordedVideo.style.maxWidth = "640px";

  document.getElementById("recorded-videos").appendChild(recordedVideo);
}

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
async function startScreenWithAudioRecording() {
  try {
    // 화면 캡처 스트림
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        mediaSource: "screen",
        width: { ideal: 1920 },
        height: { ideal: 1080 },
      },
      audio: true, // 시스템 오디오
    });

    // 마이크 스트림
    const micStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
      },
    });

    // 스트림 결합
    const combinedStream = new MediaStream([
      ...screenStream.getVideoTracks(),
      ...screenStream.getAudioTracks(), // 시스템 오디오
      ...micStream.getAudioTracks(), // 마이크 오디오
    ]);

    // MediaRecorder 생성
    const mediaRecorder = new MediaRecorder(combinedStream, {
      mimeType: "video/webm;codecs=vp9,opus",
      videoBitsPerSecond: 5000000, // 화면 녹화는 높은 비트레이트
      audioBitsPerSecond: 128000,
    });

    const chunks = [];

    mediaRecorder.ondataavailable = (event) => {
      chunks.push(event.data);
    };

    mediaRecorder.onstop = () => {
      const videoBlob = new Blob(chunks, { type: "video/webm" });
      const videoUrl = URL.createObjectURL(videoBlob);

      // 다운로드 링크 생성
      createDownloadLink(videoBlob, "screen-recording");

      // 스트림 정리
      screenStream.getTracks().forEach((track) => track.stop());
      micStream.getTracks().forEach((track) => track.stop());
    };

    // 화면 공유 중지 감지
    screenStream.getVideoTracks()[0].addEventListener("ended", () => {
      mediaRecorder.stop();
    });

    mediaRecorder.start();
    return { mediaRecorder, screenStream, micStream };
  } catch (error) {
    console.error("화면 녹화 실패:", error);
    throw error;
  }
}

function createDownloadLink(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = `${filename}-${Date.now()}.webm`;
  link.textContent = `📥 ${filename} 다운로드 (${(
    blob.size /
    1024 /
    1024
  ).toFixed(2)} MB)`;
  link.style.display = "block";
  link.style.margin = "10px 0";

  document.getElementById("downloads").appendChild(link);
}

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
class LiveStreamRecorder {
  constructor(serverUrl) {
    this.serverUrl = serverUrl;
    this.socket = null;
    this.mediaRecorder = null;
  }

  async startLiveStream() {
    try {
      // WebSocket 연결
      this.socket = new WebSocket(this.serverUrl);

      // 미디어 스트림 획득
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { width: 1280, height: 720 },
        audio: true,
      });

      // MediaRecorder 설정
      this.mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm;codecs=vp8,opus",
        videoBitsPerSecond: 1000000,
      });

      // 실시간 데이터 전송
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0 && this.socket.readyState === WebSocket.OPEN) {
          this.socket.send(event.data);
        }
      };

      // 100ms마다 데이터 청크 생성 (실시간성 향상)
      this.mediaRecorder.start(100);

      console.log("라이브 스트리밍 시작됨");
    } catch (error) {
      console.error("라이브 스트림 시작 실패:", error);
    }
  }

  stopLiveStream() {
    if (this.mediaRecorder) {
      this.mediaRecorder.stop();
    }

    if (this.socket) {
      this.socket.close();
    }
  }
}

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
class VoiceRecognitionRecorder {
  constructor() {
    this.mediaRecorder = null;
    this.recognition = null;
    this.transcripts = [];
  }

  async startRecordingWithTranscription() {
    try {
      // 음성 인식 설정
      if ("webkitSpeechRecognition" in window) {
        this.recognition = new webkitSpeechRecognition();
        this.recognition.continuous = true;
        this.recognition.interimResults = true;
        this.recognition.lang = "ko-KR";

        this.recognition.onresult = (event) => {
          const transcript = Array.from(event.results)
            .map((result) => result[0].transcript)
            .join("");

          this.transcripts.push({
            timestamp: Date.now(),
            text: transcript,
          });

          console.log("실시간 음성 인식:", transcript);
        };

        this.recognition.start();
      }

      // 오디오 녹음
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          echoCancellation: false, // 음성 인식 정확도 향상
          noiseSuppression: false,
          autoGainControl: false,
        },
      });

      this.mediaRecorder = new MediaRecorder(stream);
      const chunks = [];

      this.mediaRecorder.ondataavailable = (event) => {
        chunks.push(event.data);
      };

      this.mediaRecorder.onstop = () => {
        const audioBlob = new Blob(chunks, { type: "audio/webm" });
        this.createTranscriptedAudio(audioBlob);
      };

      this.mediaRecorder.start();
    } catch (error) {
      console.error("음성 인식 녹음 실패:", error);
    }
  }

  createTranscriptedAudio(audioBlob) {
    // 오디오와 자막을 결합한 결과물 생성
    const result = {
      audio: audioBlob,
      transcripts: this.transcripts,
      duration:
        this.transcripts.length > 0
          ? this.transcripts[this.transcripts.length - 1].timestamp -
            this.transcripts[0].timestamp
          : 0,
    };

    this.downloadTranscriptedAudio(result);
  }

  downloadTranscriptedAudio(result) {
    // 오디오 파일 다운로드
    const audioUrl = URL.createObjectURL(result.audio);
    const audioLink = document.createElement("a");
    audioLink.href = audioUrl;
    audioLink.download = `audio-with-transcript-${Date.now()}.webm`;
    audioLink.click();

    // 자막 파일 다운로드 (SRT 형식)
    const srtContent = this.generateSRT(result.transcripts);
    const srtBlob = new Blob([srtContent], { type: "text/plain" });
    const srtUrl = URL.createObjectURL(srtBlob);
    const srtLink = document.createElement("a");
    srtLink.href = srtUrl;
    srtLink.download = `transcript-${Date.now()}.srt`;
    srtLink.click();

    URL.revokeObjectURL(audioUrl);
    URL.revokeObjectURL(srtUrl);
  }

  generateSRT(transcripts) {
    return transcripts
      .map((transcript, index) => {
        const startTime = this.formatSRTTime(transcript.timestamp);
        const endTime = this.formatSRTTime(
          transcript.timestamp + 3000 // 3초 지속
        );

        return `${index + 1}\n${startTime} --> ${endTime}\n${
          transcript.text
        }\n`;
      })
      .join("\n");
  }

  formatSRTTime(timestamp) {
    const date = new Date(timestamp);
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    const seconds = date.getSeconds().toString().padStart(2, "0");
    const milliseconds = date.getMilliseconds().toString().padStart(3, "0");

    return `${hours}:${minutes}:${seconds},${milliseconds}`;
  }
}

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
class ChunkedRecorder {
  constructor(options = {}) {
    this.chunkDuration = options.chunkDuration || 60000; // 1분
    this.maxChunks = options.maxChunks || 10;
    this.uploadUrl = options.uploadUrl;
    this.chunks = [];
    this.currentRecorder = null;
    this.chunkIndex = 0;
  }

  async startChunkedRecording(stream) {
    this.currentRecorder = new MediaRecorder(stream, {
      mimeType: "video/webm;codecs=vp8,opus",
    });

    const recordedChunks = [];

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

    this.currentRecorder.onstop = async () => {
      const blob = new Blob(recordedChunks, { type: "video/webm" });
      await this.handleChunk(blob);

      // 다음 청크 녹화 시작 (스트림이 활성화되어 있다면)
      if (stream.active) {
        recordedChunks.length = 0;
        this.currentRecorder.start();

        // 지정된 시간 후 자동 중지
        setTimeout(() => {
          if (this.currentRecorder.state === "recording") {
            this.currentRecorder.stop();
          }
        }, this.chunkDuration);
      }
    };

    // 첫 번째 청크 시작
    this.currentRecorder.start();
    setTimeout(() => {
      if (this.currentRecorder.state === "recording") {
        this.currentRecorder.stop();
      }
    }, this.chunkDuration);
  }

  async handleChunk(blob) {
    const chunk = {
      id: this.chunkIndex++,
      blob,
      timestamp: Date.now(),
      size: blob.size,
    };

    // 로컬 저장
    this.chunks.push(chunk);

    // 최대 청크 수 관리
    if (this.chunks.length > this.maxChunks) {
      const oldChunk = this.chunks.shift();
      URL.revokeObjectURL(oldChunk.url);
    }

    // 자동 업로드
    if (this.uploadUrl) {
      await this.uploadChunk(chunk);
    }

    console.log(
      `청크 ${chunk.id} 처리 완료 (${this.formatFileSize(chunk.size)})`
    );
  }

  async uploadChunk(chunk) {
    try {
      const formData = new FormData();
      formData.append("chunk", chunk.blob, `chunk-${chunk.id}.webm`);
      formData.append("timestamp", chunk.timestamp.toString());
      formData.append("chunkId", chunk.id.toString());

      const response = await fetch(this.uploadUrl, {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        console.log(`청크 ${chunk.id} 업로드 성공`);
      } else {
        throw new Error(`업로드 실패: ${response.status}`);
      }
    } catch (error) {
      console.error(`청크 ${chunk.id} 업로드 실패:`, error);
      // 재시도 로직 구현 가능
    }
  }

  mergeChunks() {
    const mergedBlob = new Blob(
      this.chunks.map((chunk) => chunk.blob),
      { type: "video/webm" }
    );

    const url = URL.createObjectURL(mergedBlob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `merged-recording-${Date.now()}.webm`;
    link.click();

    URL.revokeObjectURL(url);
  }

  formatFileSize(bytes) {
    const units = ["B", "KB", "MB", "GB"];
    let size = bytes;
    let unitIndex = 0;

    while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024;
      unitIndex++;
    }

    return `${size.toFixed(1)} ${units[unitIndex]}`;
  }
}

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
class MediaRecorderCompat {
  static checkSupport() {
    const support = {
      mediaRecorder: !!window.MediaRecorder,
      getUserMedia: !!(
        navigator.mediaDevices && navigator.mediaDevices.getUserMedia
      ),
      getDisplayMedia: !!(
        navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia
      ),
      webRTC: !!(window.RTCPeerConnection || window.webkitRTCPeerConnection),
    };

    return {
      ...support,
      fullSupport: Object.values(support).every(Boolean),
      recording: support.mediaRecorder && support.getUserMedia,
    };
  }

  static getSupportedMimeTypes() {
    const types = [
      // 비디오 형식
      "video/webm",
      "video/webm;codecs=vp8",
      "video/webm;codecs=vp9",
      "video/webm;codecs=vp8,opus",
      "video/webm;codecs=vp9,opus",
      "video/mp4",
      "video/mp4;codecs=h264",
      "video/mp4;codecs=h264,aac",

      // 오디오 형식
      "audio/webm",
      "audio/webm;codecs=opus",
      "audio/ogg",
      "audio/ogg;codecs=opus",
      "audio/mp4",
      "audio/mp4;codecs=aac",
    ];

    return types.filter((type) => {
      try {
        return MediaRecorder.isTypeSupported(type);
      } catch {
        return false;
      }
    });
  }

  static getBestMimeType(preferVideo = true) {
    const videoTypes = [
      "video/webm;codecs=vp9,opus",
      "video/webm;codecs=vp8,opus",
      "video/webm",
      "video/mp4;codecs=h264,aac",
      "video/mp4",
    ];

    const audioTypes = [
      "audio/webm;codecs=opus",
      "audio/webm",
      "audio/ogg;codecs=opus",
      "audio/mp4;codecs=aac",
    ];

    const types = preferVideo ? videoTypes : audioTypes;

    for (const type of types) {
      if (MediaRecorder.isTypeSupported(type)) {
        return type;
      }
    }

    return null;
  }

  static createWithFallback(stream, preferredOptions = {}) {
    const mimeType = this.getBestMimeType(stream.getVideoTracks().length > 0);

    if (!mimeType) {
      throw new Error("지원되는 미디어 형식이 없습니다");
    }

    const options = {
      mimeType,
      ...preferredOptions,
    };

    try {
      return new MediaRecorder(stream, options);
    } catch (error) {
      // 옵션 없이 재시도
      console.warn("옵션 적용 실패, 기본 설정으로 재시도:", error);
      return new MediaRecorder(stream);
    }
  }
}

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

if (support.recording) {
  const supportedTypes = MediaRecorderCompat.getSupportedMimeTypes();
  console.log("지원되는 형식:", supportedTypes);

  // 스트림 획득 후
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });
  const recorder = MediaRecorderCompat.createWithFallback(stream, {
    videoBitsPerSecond: 2500000,
    audioBitsPerSecond: 128000,
  });
} else {
  console.error("이 브라우저는 미디어 녹화를 지원하지 않습니다");
  // 대체 솔루션 제시
}

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
class MemoryEfficientRecorder {
  constructor() {
    this.maxMemoryMB = 100; // 최대 메모리 사용량 (MB)
    this.chunks = [];
    this.totalSize = 0;
  }

  addChunk(chunk) {
    this.chunks.push(chunk);
    this.totalSize += chunk.size;

    // 메모리 사용량 체크
    if (this.totalSize > this.maxMemoryMB * 1024 * 1024) {
      this.flushChunks();
    }
  }

  flushChunks() {
    // 청크들을 파일로 저장하고 메모리에서 제거
    const blob = new Blob(this.chunks, { type: "video/webm" });
    this.saveChunkToFile(blob);

    this.chunks = [];
    this.totalSize = 0;

    // 가비지 컬렉션 힌트
    if (window.gc) {
      window.gc();
    }
  }

  saveChunkToFile(blob) {
    // IndexedDB 또는 다른 저장소에 저장
    const timestamp = Date.now();
    console.log(`청크 저장됨: ${timestamp}, 크기: ${blob.size} bytes`);
  }
}

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
class AdaptiveQualityRecorder {
  constructor() {
    this.qualityLevels = [
      { width: 3840, height: 2160, bitrate: 8000000, label: "4K" },
      { width: 1920, height: 1080, bitrate: 2500000, label: "1080p" },
      { width: 1280, height: 720, bitrate: 1000000, label: "720p" },
      { width: 854, height: 480, bitrate: 500000, label: "480p" },
    ];

    this.currentQuality = 1; // 1080p부터 시작
    this.performanceMonitor = new PerformanceMonitor();
  }

  async startAdaptiveRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: this.getCurrentConstraints(),
      audio: { echoCancellation: true },
    });

    const recorder = new MediaRecorder(stream, {
      mimeType: "video/webm;codecs=vp8,opus",
      videoBitsPerSecond: this.qualityLevels[this.currentQuality].bitrate,
    });

    // 성능 모니터링 시작
    this.performanceMonitor.start();

    // 품질 조정 타이머
    setInterval(() => {
      this.adjustQuality();
    }, 5000);

    return recorder;
  }

  getCurrentConstraints() {
    const quality = this.qualityLevels[this.currentQuality];
    return {
      width: { ideal: quality.width },
      height: { ideal: quality.height },
      frameRate: { ideal: 30 },
    };
  }

  adjustQuality() {
    const performance = this.performanceMonitor.getMetrics();

    if (performance.cpuUsage > 80 || performance.memoryUsage > 80) {
      // 성능이 낮으면 품질 낮춤
      if (this.currentQuality < this.qualityLevels.length - 1) {
        this.currentQuality++;
        console.log(
          `품질 낮춤: ${this.qualityLevels[this.currentQuality].label}`
        );
      }
    } else if (performance.cpuUsage < 50 && performance.memoryUsage < 50) {
      // 성능이 좋으면 품질 높임
      if (this.currentQuality > 0) {
        this.currentQuality--;
        console.log(
          `품질 향상: ${this.qualityLevels[this.currentQuality].label}`
        );
      }
    }
  }
}

class PerformanceMonitor {
  start() {
    setInterval(() => {
      this.updateMetrics();
    }, 1000);
  }

  updateMetrics() {
    // CPU 사용량 추정 (frame drops 기반)
    this.cpuUsage = this.estimateCPUUsage();

    // 메모리 사용량
    if (performance.memory) {
      this.memoryUsage =
        (performance.memory.usedJSHeapSize /
          performance.memory.jsHeapSizeLimit) *
        100;
    }
  }

  estimateCPUUsage() {
    // requestAnimationFrame을 이용한 CPU 사용량 추정
    const start = performance.now();
    return new Promise((resolve) => {
      requestAnimationFrame(() => {
        const duration = performance.now() - start;
        const cpuUsage = Math.min(100, duration * 6); // 16.67ms가 100%
        resolve(cpuUsage);
      });
    });
  }

  getMetrics() {
    return {
      cpuUsage: this.cpuUsage || 0,
      memoryUsage: this.memoryUsage || 0,
    };
  }
}

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
class PermissionManager {
  static async checkPermissions() {
    const permissions = {};

    try {
      // 카메라 권한
      const camera = await navigator.permissions.query({ name: "camera" });
      permissions.camera = camera.state;

      // 마이크 권한
      const microphone = await navigator.permissions.query({
        name: "microphone",
      });
      permissions.microphone = microphone.state;

      // 화면 캡처는 별도 처리 (permissions API 미지원)
      permissions.screen = "prompt"; // 항상 사용자 승인 필요
    } catch (error) {
      console.warn("권한 확인 실패:", error);
    }

    return permissions;
  }

  static async requestPermissions(needVideo = true, needAudio = true) {
    try {
      const constraints = {};

      if (needVideo) {
        constraints.video = { width: 640, height: 480 };
      }

      if (needAudio) {
        constraints.audio = true;
      }

      const stream = await navigator.mediaDevices.getUserMedia(constraints);

      // 권한 확인 후 스트림 즉시 중지
      stream.getTracks().forEach((track) => track.stop());

      return true;
    } catch (error) {
      console.error("권한 요청 실패:", error);
      return false;
    }
  }

  static getPermissionErrorMessage(error) {
    switch (error.name) {
      case "NotAllowedError":
        return "사용자가 미디어 접근을 거부했습니다.";
      case "NotFoundError":
        return "요청된 미디어 장치를 찾을 수 없습니다.";
      case "NotSupportedError":
        return "브라우저가 요청된 기능을 지원하지 않습니다.";
      case "OverconstrainedError":
        return "요청된 제약 조건을 만족할 수 없습니다.";
      case "SecurityError":
        return "보안상의 이유로 접근이 거부되었습니다.";
      default:
        return `알 수 없는 오류: ${error.message}`;
    }
  }
}

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
class SecureRecorder {
  constructor() {
    this.isRecording = false;
    this.maxRecordingTime = 30 * 60 * 1000; // 30분 제한
    this.maxFileSize = 100 * 1024 * 1024; // 100MB 제한
  }

  async startSecureRecording(constraints) {
    // HTTPS 환경 체크
    if (location.protocol !== "https:" && location.hostname !== "localhost") {
      throw new Error("HTTPS 환경에서만 미디어 녹화가 가능합니다.");
    }

    // 중복 녹화 방지
    if (this.isRecording) {
      throw new Error("이미 녹화가 진행 중입니다.");
    }

    // 권한 체크
    const hasPermission = await PermissionManager.requestPermissions(
      !!constraints.video,
      !!constraints.audio
    );

    if (!hasPermission) {
      throw new Error("미디어 접근 권한이 필요합니다.");
    }

    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const recorder = new MediaRecorder(stream);

    let recordedSize = 0;
    const startTime = Date.now();

    recorder.ondataavailable = (event) => {
      recordedSize += event.data.size;

      // 파일 크기 제한 체크
      if (recordedSize > this.maxFileSize) {
        console.warn("최대 파일 크기 초과로 녹화 중지");
        recorder.stop();
        return;
      }

      // 녹화 시간 제한 체크
      if (Date.now() - startTime > this.maxRecordingTime) {
        console.warn("최대 녹화 시간 초과로 녹화 중지");
        recorder.stop();
        return;
      }
    };

    this.isRecording = true;

    recorder.onstop = () => {
      this.isRecording = false;
      stream.getTracks().forEach((track) => track.stop());
    };

    return recorder;
  }

  // 사용자 활동 감지로 자동 녹화 중지
  setupInactivityDetection(recorder, timeoutMs = 300000) {
    // 5분
    let inactivityTimer;

    const resetTimer = () => {
      clearTimeout(inactivityTimer);
      inactivityTimer = setTimeout(() => {
        console.log("사용자 비활성으로 인한 자동 녹화 중지");
        recorder.stop();
      }, timeoutMs);
    };

    // 사용자 활동 이벤트 리스너
    ["mousedown", "mousemove", "keypress", "scroll", "touchstart"].forEach(
      (event) => {
        document.addEventListener(event, resetTimer, { passive: true });
      }
    );

    resetTimer(); // 초기 타이머 설정
  }
}