OpenAI终于上线实时视频通话功能,看我用前端技术实现0元购版的“和AI视频通话”功能

广告位招租
扫码页面底部二维码联系

OpenAI挤牙膏似的的12天发布会不断兑现之前给的demo,他们似乎今年一次性做了很多产品,在这年尾的时候像甩卖一样将它们丢出来,有点眼花缭乱。在之前的一次发布会上,他们演示了和大模型实时视频通话功能,令人惊艳,但是该功能直到昨天才和公众见面。那么这个功能到底有多难做呢?今天,我就以一个技术人的视角,来聊一聊,我是如何用前端技术,做出的一个类似的功能,而且关键是,调用国内的免费模型接口,来了一个彻底的0元购。

功能概览

当用户开启实时视频通话功能后,界面进入一个类似摄像头拍摄的界面,LLM像有了眼睛一样,看到用户提供的画面,并根据用户的说话内容和画面,做出实时反应。由于OpenAI实现了端到端模型,大模型可以直接接收视频输入,输出语音。但随之而来的就是成本高昂。那么,要做到0元购,应该怎么办呢?

首先,我们来拆解一下这个功能的核心是什么。我认为主要是以下3点:

  • 对视频进行理解 -> 本质上是对多帧画面进行理解
  • 对语音进行理解 -> 我们用ASR来替代,让大模型理解文本更直接
  • 语音输出

技术选型

让我们来分析技术上的可行性。

首先是视频。我们可以通过WebRTC接口getUserMedia来获得摄像头画面,再通过canvas来对视频进行截图,获得画面帧。对画面进行理解,可以调用glm-4v-flash(免费),将理解后的结果保存下来备用。

其次是语音理解。我们可以通过SpeechRecognition来在本地进行语音识别,然而它只有谷歌支持,只能在chrome中使用,且需要连到谷歌的服务器(科学上网),因此,我直接放弃。我找到了免费的ASR接口,通过getUserMedia获取麦克风输入,通过MediaRecorder获得audioBuffer,通过AudioContext和audiobuffer-to-wav进行转码,将得到的wav提交到免费的ASR,获得识别结果。同时还做了一些策略,如果800ms没有人说话,则立刻对录制进行断句和ASR提交,从而可以更快的得到识别结果。

最后是语音输出。通过speechSynthesis来进行TTS,免费又性能好,edge浏览器提供的音色也不错。通过Intl.Segmenter进行断句处理,从而在大模型吐出第一句话的时候,就可以开始念稿。

用于最后的理解的LLM,免费的有挺多可选,glm、qwen都有免费的。

以上这些全部加起来,总价格成本为0.

效果预览

结语

通过本文,你可以看到,虽然openAI很强,但是他们现在做的很多产品,并非具有颠覆性,虽然我的实现很简陋,但是后续只需要通过优化,就可以获得在产品形态上与openAI产品相同的产品效果,可能理解和智能上比不上,但是我们是0元购呀。我的下一步是,结合免费的视频生成接口,实现0元购的AI视频互动聊天。

2024-12-15 254

为价值买单,打赏一杯咖啡

本文价值2.54RMB