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

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

OpenAI挤牙膏似的的12天发布会不断【未经授权禁止转载】【未经授权禁止转载】兑现之前给的demo,他们似乎今年一次性【未经授权禁止转载】本文作者:唐霜,转载请注明出处。做了很多产品,在这年尾的时候像甩卖一样将【作者:唐霜】【本文首发于唐霜的博客】它们丢出来,有点眼花缭乱。在之前的一次发本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net布会上,他们演示了和大模型实时视频通话功转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】能,令人惊艳,但是该功能直到昨天才和公众【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net见面。那么这个功能到底有多难做呢?今天,【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。我就以一个技术人的视角,来聊一聊,我是如【作者:唐霜】【作者:唐霜】何用前端技术,做出的一个类似的功能,而且【转载请注明来源】【本文受版权保护】关键是,调用国内的免费模型接口,来了一个【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】彻底的0元购。

【本文受版权保护】【本文受版权保护】著作权归作者所有,禁止商业用途转载。

功能概览原创内容,盗版必究。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。

当用户开启实时视频通话功能后,界面进入一【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】个类似摄像头拍摄的界面,LLM像有了眼睛转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】一样,看到用户提供的画面,并根据用户的说原创内容,盗版必究。【未经授权禁止转载】话内容和画面,做出实时反应。由于Open【原创不易,请尊重版权】【原创不易,请尊重版权】AI实现了端到端模型,大模型可以直接接收未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。视频输入,输出语音。但随之而来的就是成本【作者:唐霜】【关注微信公众号:wwwtangshuangnet】高昂。那么,要做到0元购,应该怎么办呢?

【本文受版权保护】著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

首先,我们来拆解一下这个功能的核心是什么【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。。我认为主要是以下3点:

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。
  • 对视频进行理解 -> 本质上是对多【本文首发于唐霜的博客】【本文受版权保护】帧画面进行理解
  • 【原创不易,请尊重版权】【本文受版权保护】【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。
  • 对语音进行理解 -> 我们用ASR【未经授权禁止转载】本文作者:唐霜,转载请注明出处。来替代,让大模型理解文本更直接
  • 未经授权,禁止复制转载。【本文受版权保护】【转载请注明来源】【未经授权禁止转载】转载请注明出处:www.tangshuang.net
  • 语音输出【未经授权禁止转载】
  • 【转载请注明来源】本文作者:唐霜,转载请注明出处。【作者:唐霜】

技术选型【版权所有,侵权必究】

本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net

让我们来分析技术上的可行性。【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有,未经授权不得转载。【作者:唐霜】【未经授权禁止转载】未经授权,禁止复制转载。【未经授权禁止转载】

首先是视频。我们可以通过WebRTC接口转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。getUserMedia来获得摄像头画面【本文首发于唐霜的博客】【未经授权禁止转载】,再通过canvas来对视频进行截图,获未经授权,禁止复制转载。原创内容,盗版必究。得画面帧。对画面进行理解,可以调用glm【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。-4v-flash(免费),将理解后的结【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】果保存下来备用。

原创内容,盗版必究。【作者:唐霜】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。

其次是语音理解。我们可以通过Speech【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netRecognition来在本地进行语音识本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。别,然而它只有谷歌支持,只能在chrom未经授权,禁止复制转载。【本文受版权保护】e中使用,且需要连到谷歌的服务器(科学上本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net网),因此,我直接放弃。我找到了免费的A【原创不易,请尊重版权】未经授权,禁止复制转载。SR接口,通过getUserMedia获本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。取麦克风输入,通过MediaRecord著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。er获得audioBuffer,通过Au【本文受版权保护】本文作者:唐霜,转载请注明出处。dioContext和audiobuff本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.neter-to-wav进行转码,将得到的wa本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。v提交到免费的ASR,获得识别结果。同时【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】还做了一些策略,如果800ms没有人说话【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net,则立刻对录制进行断句和ASR提交,从而【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】可以更快的得到识别结果。

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net【作者:唐霜】

最后是语音输出。通过speechSynt【作者:唐霜】著作权归作者所有,禁止商业用途转载。hesis来进行TTS,免费又性能好,e【本文受版权保护】【本文首发于唐霜的博客】dge浏览器提供的音色也不错。通过Int原创内容,盗版必究。【原创不易,请尊重版权】l.Segmenter进行断句处理,从而【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。在大模型吐出第一句话的时候,就可以开始念【本文受版权保护】【本文首发于唐霜的博客】稿。

【原创内容,转载请注明出处】【原创不易,请尊重版权】未经授权,禁止复制转载。未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net

用于最后的理解的LLM,免费的有挺多可选本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】,glm、qwen都有免费的。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

以上这些全部加起来,总价格成本为0.著作权归作者所有,禁止商业用途转载。

未经授权,禁止复制转载。【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。

效果预览【原创内容,转载请注明出处】

【版权所有,侵权必究】【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。

结语【作者:唐霜】

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【原创内容,转载请注明出处】【转载请注明来源】

通过本文,你可以看到,虽然openAI很未经授权,禁止复制转载。未经授权,禁止复制转载。强,但是他们现在做的很多产品,并非具有颠【转载请注明来源】【未经授权禁止转载】覆性,虽然我的实现很简陋,但是后续只需要【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。通过优化,就可以获得在产品形态上与ope未经授权,禁止复制转载。【本文首发于唐霜的博客】nAI产品相同的产品效果,可能理解和智能未经授权,禁止复制转载。【转载请注明来源】上比不上,但是我们是0元购呀。我的下一步原创内容,盗版必究。转载请注明出处:www.tangshuang.net是,结合免费的视频生成接口,实现0元购的【原创不易,请尊重版权】【作者:唐霜】AI视频互动聊天。

转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【转载请注明来源】【本文受版权保护】原创内容,盗版必究。

2024-12-15 2746

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

本文价值27.46RMB