GPT虚拟直播Demo系列（一）｜GPT接入直播间实现主播与观众互动

sockstack / 191 / 2023-11-06 23:54:16

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。 <a href="https://ckai.xyz/?sockstack&section=detail" target="__blank">https://ckai.xyz</a> <article class="baidu_pl"><div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-25cebea3f9.css">
<div id="content_views" class="markdown_views prism-atom-one-dark">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg><h1>
<a id="_1"></a>摘要</h1> 
ChatGPT和元宇宙都是当前数字化领域中非常热门的技术和应用。结合两者的优势和特点，可以探索出更多的应用场景和商业模式。例如，在元宇宙中使用ChatGPT进行自然语言交互，可以为用户提供更加智能化、个性化的服务和支持；在ChatGPT中使用元宇宙进行虚拟现实体验，可以为用户提供更加真实、丰富、多样化的交互体验。 下面我将结合元宇宙和ChatGPT的优势，实战开发一个GPT虚拟直播的Demo并推流到抖音平台， 
<h1>
<a id="NodeJSChatGPTZIM_5"></a>NodeJS接入ChatGPT与即构ZIM</h1> 
上一篇文章《人人都能用ChatGPT4.0做Avatar虚拟人直播》，主要介绍了如何使用ChatGPT+即构Avatar做虚拟人直播。由于篇幅原因，对代码具体实现部分描述的不够详细。收到不少读者询问代码相关问题，接下来笔者将代码实现部分拆分2部分来详细描述: 
<ol>
<li>NodeJS接入ChatGPT与即构ZIM</li>
<li>ChatGPT与即构Avatar虚拟人对接直播</li>
</ol> 
本文主要讲解如何接入ChatGPT并实现后期能与Avatar对接能力。 
在开始讲具体流程之前，我们先来回顾一下整个GPT虚拟直播Demo的实现流程图,本文要分享的内容是下图的右边部分的实现逻辑。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/73f767a4ab114d5082e5588ee0d763eb.jpeg#pic_center" alt="在这里插入图片描述"> 
<h1>
<a id="1__19"></a>1 基本原理</h1> 
ChatGPT是纯文本互动，那么如何让它跟Avatar虚拟人联系呢？ 首先我们已知一个先验： 
<ul>
<li>即构Avatar有文本驱动能力，即给Avatar输入一段文本，Avatar根据文本渲染口型+播报语音</li>
<li>将观众在直播间发送的弹幕消息抓取后，发送给OpenAI的ChatGPT服务器</li>
<li>得到ChatGPT回复后将回复内容通过Avatar语音播报 在观众看来，这就是在跟拥有ChatGPT一样智商的虚拟人直播互动了。</li>
</ul> 
<h1>
<a id="2__27"></a>2 本文使用的工具</h1> 
<ul>
<li>GPT虚拟直播弹幕：即构ZIM语聊房群聊弹幕</li>
<li>GPT4.0:New bing</li>
<li>GPT3.5：ChatGPT</li>
</ul> 
<h1>
<a id="3_ChatGPT_33"></a>3 对接ChatGPT</h1> 
这里主要推荐2个库： 
<ul>
<li>chatgpt-api</li>
<li>chatgpt</li>
</ul> 
chatgpt-api封装了基于bing的chatgpt4.0，chatgpt基于openAI官方的chatgpt3.5。具体如何创建bing账号以及如何获取Cookie值以及如何获取apiKey，可以参考我另一篇文章《人人都能用ChatGPT4.0做Avatar虚拟人直播》。 
<h2>
<a id="31_chatgptapi_40"></a>3.1 chatgpt-api</h2> 
安装： 
<pre><code class="prism language-BASH">npm i @waylaidwanderer/chatgpt-api
</code></pre> 
bing还没有对中国大陆开放chatgpt，因此需要一个代理，因此需要把代理地址也一起封装。代码如下： 
<pre><code class="prism language-javascript">
import { BingAIClient } from '@waylaidwanderer/chatgpt-api';export class BingGPT {/** http_proxy, apiKey**/constructor(http_proxy, userCookie) {this.api = this.init(http_proxy, userCookie);this.conversationSignature = "";this.conversationId = "";this.clientId = "";this.invocationId = "";}init(http_proxy, userCookie) {console.log(http_proxy, userCookie)const options = { host: 'https://www.bing.com', userToken: userCookie,// If the above doesn't work, provide all your cookies as a string insteadcookies: '',// A proxy string like "http://&lt;ip&gt;:&lt;port&gt;"proxy: http_proxy,// (Optional) Set to true to enable `console.debug()` loggingdebug: false,};return new BingAIClient(options);}////此处省略chat函数......//
} 
</code></pre> 
上面代码完成了VPN和BingAIClient的封装，还缺少聊天接口，因此添加chat函数完成聊天功能： 
<pre><code class="prism language-javascript">//调用chatpgt 
chat(text, cb) {var res=""var that = this;console.log("正在向bing发送提问", text ) this.api.sendMessage(text, { toneStyle: 'balanced',onProgress: (token) =&gt; { if(token.length==2 &amp;&amp; token.charCodeAt(0)==55357&amp;&amp;token.charCodeAt(1)==56842){cb(true, res);} res+=token;}}).then(function(response){ that.conversationSignature = response.conversationSignature;that.conversationId = response.conversationId;that.clientId = response.clientId;that.invocationId = response.invocationId;}) ; }
</code></pre> 
在使用的时候只需如下调用： 
<pre><code class="prism language-javascript">var bing = new BingGPT(HTTP_PROXY, BING_USER_COOKIE);
bing.chat("这里传入提问内容XXXX?", function(succ, response){if(succ)console.log("回复内容：", response)
})
</code></pre> 
需要注意的是，基于bing的chatgpt4.0主要是通过模拟浏览器方式封住。在浏览器端有很多防机器人检测，因此容易被卡断。这里笔者建议仅限自己体验，不适合作为产品接口使用。如果需要封装成产品，建议使用下一节2.2内容。 
<h2>
<a id="32_chatgpt_115"></a>3.2 chatgpt</h2> 
安装: 
<pre><code class="prism language-bash">npm install chatgpt
</code></pre> 
跟上一小节2.1类似，基于openAI的chatgpt3.5依旧需要梯子才能使用。chatgpt库没有内置代理能力，因此我们可以自己安装代理库： 
<pre><code class="prism language-bash">npm install https-proxy-agent node-fetch
</code></pre> 
接下来将代理和chatgpt库一起集成封装成一个类： 
<pre><code class="prism language-javascript">import { ChatGPTAPI } from "chatgpt";
import proxy from "https-proxy-agent";
import nodeFetch from "node-fetch";export class ChatGPT {constructor(http_proxy, apiKey) {this.api = this.init(http_proxy, apiKey);this.conversationId = null;this.ParentMessageId = null;}init(http_proxy, apiKey) {console.log(http_proxy, apiKey)return new ChatGPTAPI({apiKey: apiKey,fetch: (url, options = {}) =&gt; {const defaultOptions = {agent: proxy(http_proxy),};const mergedOptions = {...defaultOptions,...options,};return nodeFetch(url, mergedOptions);},});}//...//此处省略chat函数//...
} 
</code></pre> 
完成ChatGPTAPI的封装后，接下来添加聊天接口： 
<pre><code class="prism language-javascript">//调用chatpgt 
chat(text, cb) {let that = thisconsole.log("正在向ChatGPT发送提问:", text)that.api.sendMessage(text, {conversationId: that.ConversationId,parentMessageId: that.ParentMessageId}).then(function (res) {that.ConversationId = res.conversationIdthat.ParentMessageId = res.idcb &amp;&amp; cb(true, res.text)}).catch(function (err) {console.log(err)cb &amp;&amp; cb(false, err);});
}
</code></pre> 
使用时就非常简单： 
<pre><code class="prism language-javascript">var chatgpt = new ChatGPT(HTTP_PROXY, API_KEY);
chatgpt.chat("这里传入提问内容XXXX?", function(succ, response){if(succ)console.log("回复内容：", response)
})
</code></pre> 
chatgpt库主要基于openAI的官方接口，相对来说比较稳定，推荐这种方式使用。 
<h2>
<a id="33__192"></a>3.3 两库一起封装</h2> 
为了更加灵活方便使用，随意切换chatgpt3.5和chatgpt4.0。将以上两个库封装到一个接口中。 
首先创建一个文件保存各种配置， KeyCenter.js： 
<pre><code class="prism language-javascript">const HTTP_PROXY = "http://127.0.0.1:xxxx";//本地vpn代理端口
//openAI的key, 
const API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxxx";
//bing cookie
const BING_USER_COOKIE = 'xxxxxxxxxxxxxxxxxxxxxxxx--BA';module.exports = { HTTP_PROXY: HTTP_PROXY,API_KEY: API_KEY,BING_USER_COOKIE:BING_USER_COOKIE
}</code></pre> 
注意，以上相关配置内容需要读者替换。 
接下来封装两个不同版本的chatGPT： 
<pre><code class="prism language-javascript">const KEY_CENTER = require("../KeyCenter.js");
var ChatGPTObj = null, BingGPTObj = null;
//初始化chatgpt
function getChatGPT(onInitedCb) {if (ChatGPTObj != null) {onInitedCb(true, ChatGPTObj);return;}(async () =&gt; {let { ChatGPT } = await import("./chatgpt.mjs");return new ChatGPT(KEY_CENTER.HTTP_PROXY, KEY_CENTER.API_KEY);})().then(function (obj) {ChatGPTObj = obj;onInitedCb(true, obj);}).catch(function (err) {onInitedCb(false, err);});
}function getBingGPT(onInitedCb){if(BingGPTObj!=null) {onInitedCb(true, BingGPTObj);return;}(async () =&gt; {let { BingGPT } = await import("./binggpt.mjs");return new BingGPT(KEY_CENTER.HTTP_PROXY, KEY_CENTER.BING_USER_COOKIE);})().then(function (obj) {BingGPTObj = obj;onInitedCb(true, obj);}).catch(function (err) {console.log(err)onInitedCb(false, err);});
}
</code></pre> 
上面两个函数<code>getBingGPT</code>和<code>getChatGPT</code>分别对应<code>2.1节</code>和<code>2.2节</code>封装的版本。在切换版本的时候直接调用对应的函数即可，但笔者认为，还不够优雅！使用起来还是不够舒服，因为需要维护不同的对象。最好能进一步封装，调用的时候一行代码来使用是最好的。那进一步封装，补充以下代码： 
<pre><code class="prism language-javascript">//调用chatgpt聊天
function chatGPT(text, cb) {getChatGPT(function (succ, obj) {if (succ) {obj.chat(text, cb);} else {cb &amp;&amp; cb(false, "chatgpt not inited!!!");}})
}function chatBing(text, cb){getBingGPT(function (succ, obj) {if (succ) {obj.chat(text, cb);} else {cb &amp;&amp; cb(false, "chatgpt not inited!!!");}})}module.exports = {chatGPT: chatGPT,chatBing:chatBing
} 
</code></pre> 
加了以上代码后，就舒服多了：想要使用bing的chatgpt4.0，那就调用chatBing函数好了；想要使用openAI官方的chatgpt3.5，那就调用chatGPT函数就好！ 
<h1>
<a id="4_Avatar_282"></a>4 对接Avatar</h1> 
<h2>
<a id="41__284"></a>4.1 基本思路</h2> 
好了，第2节介绍了对chatgpt的封装，不同的版本只需调用不同函数即可实现与chatgpt对话。接下来怎么将chatGPT的文本对话内容传递给Avatar呢？即构Avatar是即构推出的一款虚拟形象产品，它可以跟即构内的其他产品对接，比如即时通讯ZIM和音视频通话RTC。这就好办了，我们只需利用ZIM或RTC即可。 
这里我们主要利用即构ZIM实现，因为即构ZIM非常方便实时文本内容。即构ZIM群聊消息稳定可靠，延迟低，全球任何一个地区都有接入服务的节点保障到达。 
尤其是ZIM群聊有弹幕功能，相比发送聊天消息，发送弹幕消息不会被存储，更适合直播间评论功能。 
<h2>
<a id="42__293"></a>4.2 代码实现</h2> 
即构官方提供的js版本库主要是基于浏览器，需要使用到浏览器的特性如DOM、localStorage等。而这里我们主要基于NodeJS，没有浏览器环境。因此我们需要安装一些必要的库， 相关库已经在package.json有记录，直接执行如下命令即可： 
<pre><code class="prism language-cmd">npm install
</code></pre> 
<h3>
<a id="421__299"></a>4.2.1 创建模拟浏览器环境</h3> 
首先执行浏览器环境模拟，通过fake-indexeddb、jsdom、node-localstorage库模拟浏览器环境以及本地存储环境。创建WebSocket、XMLHttpRequest等全局对象。 
<pre><code class="prism language-javascript">var fs = require('fs');
//先清理缓存
fs.readdirSync('./local_storage').forEach(function (fileName) {fs.unlinkSync('./local_storage/' + fileName);
});const KEY_CENTER = require("../KeyCenter.js");
const APPID = KEY_CENTER.APPID, SERVER_SECRET = KEY_CENTER.SERVER_SECRET;
const generateToken04 = require('./TokenUtils.js').generateToken04;
var LocalStorage = require('node-localstorage').LocalStorage;
localStorage = new LocalStorage('./local_storage');
var indexedDB = require("fake-indexeddb/auto").indexedDB;
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(``, {url: "http://localhost/",referrer: "http://localhost/",contentType: "text/html",includeNodeLocations: true,storageQuota: 10000000
});
window = dom.window;
document = window.document;
navigator = window.navigator;
location = window.location;
WebSocket = window.WebSocket;
XMLHttpRequest = window.XMLHttpRequest;
</code></pre> 
<h3>
<a id="422_ZIM_333"></a>4.2.2 创建ZIM对象</h3> 
将即构官方下载的index.js引入，获取ZIM类并实例化，这个过程封装到createZIM函数中。需要注意的是登录需要Token，为了安全考虑，Token建议在服务器端生成。接下来把整个初始化过程封装到initZego函数中，包含注册监听接收消息，监控Token过期并重置。 
<pre><code class="prism language-javascript">const ZIM = require('./index.js').ZIM; function newToken(userId) {const token = generateToken04(APPID, userId, SERVER_SECRET, 60 * 60 * 24, '');return token;
}
/*** 创建ZIM对象
*/
function createZIM(onError, onRcvMsg, onTokenWillExpire) {var zim = ZIM.create(APPID);zim.on('error', onError);zim.on('receivePeerMessage', function (zim, msgObj) {console.log("收到P2P消息")onRcvMsg(false, zim, msgObj)});// 收到群组消息的回调zim.on('receiveRoomMessage', function (zim, msgObj) {console.log("收到群组消息")onRcvMsg(true, zim, msgObj)});zim.on('tokenWillExpire', onTokenWillExpire);return zim;
}
/*
*初始化即构ZIM
*/
function initZego(onError, onRcvMsg, myUID) {var token = newToken(myUID);var startTimestamp = new Date().getTime();function _onError(zim, err) {onError(err);}function _onRcvMsg(isFromGroup, zim, msgObj) {var msgList = msgObj.messageList;var fromConversationID = msgObj.fromConversationID;msgList.forEach(function (msg) {if (msg.timestamp - startTimestamp &gt;= 0) { //过滤掉离线消息var out = parseMsg(zim, isFromGroup, msg.message, fromConversationID)if (out)onRcvMsg(out); }})}function onTokenWillExpire(zim, second) {token = newToken(userId);zim.renewToken(token);}var zim = createZIM(_onError, _onRcvMsg, onTokenWillExpire);login(zim, myUID, token, function (succ, data) {if (succ) {console.log("登录成功！")} else {console.log("登录失败！", data)}})return zim;
}</code></pre> 
<h3>
<a id="423__403"></a>4.2.3 登录、创建房间、加入房间、离开房间</h3> 
调用zim对象的login函数完成登录，封装到login函数中；调用zim对象的joinRoom完成加入房间，封装到joinRoom函数中；调用zim的leaveRoom函数完成退出房间，封装到leaveRoom函数中。 
<pre><code class="prism language-javascript">/*** 登录即构ZIM
*/
function login(zim, userId, token, cb) {var userInfo = { userID: userId, userName: userId };zim.login(userInfo, token).then(function () {cb(true, null);}).catch(function (err) {cb(false, err);});
}
/*** 加入房间
*/
function joinRoom(zim, roomId, cb = null) {zim.joinRoom(roomId).then(function ({ roomInfo }) {cb &amp;&amp; cb(true, roomInfo);}).catch(function (err) {cb &amp;&amp; cb(false, err);});
}
/*** 离开房间
*/
function leaveRoom(zim, roomId) {zim.leaveRoom(roomId).then(function ({ roomID }) {// 操作成功console.log("已离开房间", roomID)}).catch(function (err) {// 操作失败console.log("离开房间失败", err)});
}
</code></pre> 
<h3>
<a id="424__449"></a>4.2.4 发送消息、解析消息</h3> 
发送消息分为一对一发送和发送到房间，这里通过isGroup参数来控制，如下sendMsg函数所示。将接收消息UID和发送内容作为sendMsg参数，最终封装并调用ZIM的sendMessage函数完成消息发送。 
接收到消息后，在我们的应用中设置了发送的消息内容是个json对象，因此需要对内容进行解析，具体的json格式可以参考完整源码，这里不做详细讲解。 
<pre><code class="prism language-javascript">/*** 发送消息
*/
function sendMsg(zim, isGroup, msg, toUID, cb) { var type = isGroup ? 1 : 0; // 会话类型，取值为 单聊：0，房间：1，群组：2var config = {priority: 1, // 设置消息优先级，取值为 低：1（默认），中:2，高：3}; var messageTextObj = { type: 20, message: msg, extendedData: '' };var notification = {onMessageAttached: function (message) { console.log("已发送", message)}} zim.sendMessage(messageTextObj, toUID, type, config, notification).then(function ({ message }) {// 发送成功cb(true, null);}).catch(function (err) {// 发送失败cb(false, err)}); 
}
/*** 解析收到的消息
*/
function parseMsg(zim, isFromGroup, msg, fromUid) {//具体实现略
}
</code></pre> 
<h3>
<a id="425__487"></a>4.2.5 导出接口</h3> 
有了以上的实现后，把关键函数导出暴露给其他业务调用： 
<pre><code class="prism language-javascript">module.exports = {initZego: initZego,sendMsg: sendMsg,joinRoom: joinRoom
}
</code></pre> 
以上代码主要封装： 
<ol>
<li>即构ZIM初始化</li>
<li>发送消息</li>
<li>加入房间</li>
</ol> 
至此，我们就具备了将chatgpt消息群发到一个房间的能力、加入房间、接收到房间的弹幕消息能力。 
更多关于即构ZIM接口与官方Demo可以点击参考这里，对即构ZIM了解更多可以点击这里 
关于Avatar如何播报chatgpt内容，我们在下一篇文章实现。 
<h1>
<a id="5__509"></a>5 相关代码</h1> 
<ol><li>nodejs接入chatgpt与即构zim</li></ol>
</div>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-98b95bb57c.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">
</div>
<div id="treeSkill"></div>
</article>

作者

sockstack

许可协议

CC BY 4.0

发布于

2023-11-06

修改于

2024-10-16

上一篇：软件：常用 Linux 软件汇总，值得收藏下一篇：ChatGPT 提示语——AI提示词玩家，提示词就是和AI沟通语言的桥梁！

尚未登录

GPT虚拟直播Demo系列（一）｜GPT接入直播间实现主播与观众互动

文章分类

博客重构之路

Spring Boot简单入门

k8s 入门教程

MySQL 知识

NSQ 消息队列

ThinkPHP5 源码分析

使用 Docker 从零开始搭建私人代码仓库

日常开发汇总

标签列表

springboot

hyperf

swoole

webman

php

多线程

数据结构

docker

k8s

thinkphp

mysql

tailwindcss

flowbite

css

前端