안녕하세요.이번에 프로젝트를 진행 하고 있는데 해결되지 않는 부분이 있어서 질문을 드립니다.상황을 간단히 말씀드리면, 미팅룸 개설을 하고 참여한 인원중에 말을 하면 해당 음성을 다른 참여자의 스피커로 출력하는 방식입니다. (발화자 제외) 이때 Input Audio format은 16Khz, MONO, 32Float, 16,000 sample 로 지정되어 있습니다.(음성 출력 뿐만 아니라, STT 서버에 보내서 텍스트를 반환하는데 이때 STT 서버의 오디오 요청스펙 입니다.) 그리고 Gemini의 도움을 받아 아래와 같이 옵션을 설정하였지만, 실제로 스피커 출력시 매우심한 Noise가 발생합니다. (STT 서버의 응답 텍스트는 정상 동작) 저는 백엔드 개발자인데, 프론트단에서 해결 방법을 잘 모르겠어서, 강의를 결제하게 되었습니다. 혹시 조언을 해주실수 있을까요?아니면 강의에 몇강을 보면 관련 주제가 나오는지 알려주도 좋을거같습니다. 긴글 읽어주셔서 감사합니다. Input audio data 관련 코드audio: { echoCancellation: true, noiseSuppression: false, autoGainControl: false, } this.highPassFilter = this.audioContext.createBiquadFilter(); this.highPassFilter.type = 'highpass'; // [튜닝] 목소리 뭉개짐을 피하기 위해 60Hz로 설정 this.highPassFilter.frequency.value = 60; // 2. Compressor (안전장치/Limiter 역할 튜닝) this.compressor = this.audioContext.createDynamicsCompressor(); // [튜닝] -6dB를 넘어가는 "정말 큰 기계음"만 잡는 '안전장치'로 사용 this.compressor.threshold.value = -6; this.compressor.knee.value = 30; // [튜닝] 2:1로 최소한만 압축 this.compressor.ratio.value = 2; // [튜닝] 순간적인 피크를 빠르게(3ms) 잡음 this.compressor.attack.value = 0.003; this.compressor.release.value = 0.25; // 3. GainNode (전체 볼륨 증폭) this.gainNode = this.audioContext.createGain(); // [튜닝] 압축을 거의 안 하므로 1.1배로 소폭만 증폭 this.gainNode.gain.value = 1.1; // --- 7. 노드 체인 연결 --- this.audioSource.connect(this.highPassFilter); // 1. (마이크) -> 저주파 험 제거 this.highPassFilter.connect(this.compressor); // 2. -> "정말 큰 소리"만 방지 this.compressor.connect(this.gainNode); // 3. -> 전체 볼륨 소폭 증폭 this.gainNode.connect(this.resamplerNode); // 4. -> VAD 및 리샘플링 this.resamplerNode.connect(this.audioContext.destination); // (워크렛 실행용)스피커 출력 관련 코드// --- [수정] 오디오 출력(Playback) 로직 (심리스 스케줄링) --- private handleIncomingAudio(audioData: ArrayBuffer): void { if (audioData.byteLength === 0 || !this.playbackAudioContext) return; if (this.playbackAudioContext.state === 'suspended') { this.playbackAudioContext.resume().catch((err) => { console.error('Playback AudioContext 재개 실패:', err); }); } this.audioQueue.push(audioData); // [수정] 재생 루프가 멈춰있을 때(!this.isPlaying)만 새로 시작 if (!this.isPlaying) { this.isPlaying = true; // 현재 시간을 기준으로 스케줄링을 다시 시작합니다. this.nextChunkTime = this.playbackAudioContext.currentTime; this.playNextChunk(); } } private playNextChunk(): void { if (this.audioQueue.length === 0) { this.isPlaying = false; // 큐가 비면 재생 중지 return; } if (!this.playbackAudioContext || this.playbackAudioContext.state === 'closed') { this.isPlaying = false; this.audioQueue = []; return; } const audioData = this.audioQueue.shift()!; try { const float32Data = new Float32Array(audioData); const audioBuffer = this.playbackAudioContext.createBuffer( PLAYBACK_CHANNELS, float32Data.length, this.playbackAudioContext.sampleRate ); audioBuffer.copyToChannel(float32Data, 0); const source = this.playbackAudioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(this.playbackAudioContext.destination); // --- [수정] 심리스 스케줄링 로직 --- // 1. 랙(Lag)으로 인해 예약 시간이 이미 지났는지 확인 const currentTime = this.playbackAudioContext.currentTime; if (this.nextChunkTime < currentTime) { // 지연이 발생했으면, 갭(Gap)이 생기지 않도록 현재 시간으로 리셋 this.nextChunkTime = currentTime; } // 2. 계산된 nextChunkTime에 재생을 '예약'합니다. (갭 제거) source.start(this.nextChunkTime); // 3. 다음 청크가 시작될 시간을 미리 계산합니다. this.nextChunkTime += audioBuffer.duration; // 4. [수정] onended에서 다음 청크를 비동기적으로 호출합니다. (버그 수정) source.onended = () => { // 큐에 다음 데이터가 있으면, 딜레이 없이 바로 다음 청크를 스케줄링합니다. if (this.audioQueue.length > 0) { this.playNextChunk(); } else { this.isPlaying = false; // 큐가 비었으면 재생 종료 } }; // 5. [삭제] 즉각적인 재귀 호출을 삭제합니다. (이것이 버그였습니다) // if (this.audioQueue.length > 0) { // this.playNextChunk(); // } } catch (e) { console.error('오디오 청크 재생 중 오류:', e); this.isPlaying = false; // 오류 발생 시 재생 루프 중지 } }

안녕하세요, 선생님! 8장 강의 학습 중에 궁금한 부분이 있어 이렇게 질문드립니다.8장 실습 중 WebRTC 관련 예제를 크롬에서 먼저 실행한 뒤, 익스플로러 엣지에서 실행했더니첨부한 이미지와 같은 현상이 발생했는데요, 혹시 이 경우가 왜 발생하는 건지 조언 구드려도 될까요?강의 덕분에 많은 걸 배워가고 있습니다.무더운 여름 건강 유의하시고, 감사합니다!

아래글은 너무 감사해서 남기는 글입니다.정말 취업도 힘들고 프로젝트 하면서 제가 p2p 통신은 어떡해 하는지 노드중심 통심 등등 rtc 등등 어디서 배우는지 정말 궁금했습니다.치지직 통신을 보고 저는 와 이분이 알려주는구나 싶어서 정말 감사한 마음으로 보았지만 생각하는 로직이랑 정말 달라서 조금은 실망 하였지만, 이번 강의는 제가 원하는걸 그대로 볼 수 있는 기회를 얻었던것 같습니다. 정말 감사합니다.전이거 하고싶어서 개발 공부를 했습니다.니콜x스 님의 rtc 따라만들기 나 해외꺼를 봐도 너무 클론코딩 위주라서 젼혀 이해가 안돼었고 브라우저에 따라서 보안적인문제등등 에의해서 화면공유또한 만은 에러가 발생하여 힘들었는데드디어 4년제 + 취업준비기간 2년이상의 원한이풀립니다. ㅜㅜ