Real-time video and voice for an AI bank teller
For a service in which an on-screen AI bank teller in branches understands what customers say and explains products such as deposits, savings, and loans by voice and video, we built the app-side segment that sends the customer's voice to the server and receives and plays the AI-generated video response of a teller. If the video starts late after the customer finishes speaking, the exchange stops feeling like a conversation and becomes waiting, so the focus was on cutting the delay between sending voice and receiving video. We designed each stage separately: capturing and compressing microphone input, streaming it to the server over a live connection, and playing the returned video right away. Speech recognition and video synthesis run on the server; our scope was the app.
Voice input gathered without gaps while the customer speaks
The AI bank teller app captures what the customer says into the microphone in real time and turns it into raw audio data suited for sending to the server. We tuned the input buffer and the timing of sends so the audio does not break up or lag while the customer is speaking. Speech recognition happens on the server, so any sound the app misses, the AI never hears.

Streaming that shrinks the voice and sends it over a live connection
The AI bank teller app compresses the raw audio with a speech-specific codec before sending it to the server. We organized the compression step and the flow of data packets to cut the amount sent over the network while keeping the quality speech recognition needs. The compressed voice streams continuously over a live connection held open with the server. Exceptions such as connection status, failed sends, drops, and reconnecting were built into the flow.

Response playback that picks up the server-made teller video at once
The AI bank teller's answer comes back as a synthesized video made on the server. The app receives this video through a low-latency real-time video protocol and plays it. The teller in the video is a virtual person modeled on a real one, speaking in response to the customer's question through voice and video synthesis. The app handles video reception, playback state, and what is shown on screen so the response follows naturally once the customer stops speaking. The focus was on reducing needless waits and state mismatches between the side that sends voice and the side that receives video.

A seven-stage pipeline from microphone to video
Voice and video handling for the AI bank teller runs through seven stages: microphone input, raw audio conversion, speech compression, streaming over a live connection, server processing, video reception, and on-screen playback. Six of them, all except server processing, are the app's work, and we kept them separate so that when a problem occurs, the stage it came from can be traced on its own. In a service where response delay turns directly into frustration, cutting needless waits between stages was the design standard.

Highlights
Live streaming that compresses microphone audio and sends it to the server without gaps
Low-latency receipt and immediate playback of the teller video the server generates
A pipeline split into stages from microphone to video, so problems can be traced
Insights
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



