这是一个纯前端Serverless的H5语音聊天室
项目Demo演示地址
浏览器支持情况
简介
本文使用的是腾讯云给出的游戏语音解决方案,个人开发者可以免费使用部分功能。
免费的真香2333
本文只使用了H5 SDK,只有最基础的语音聊天服务。还有更高级的空间音效,语音识别等功能,不过在Web没法用就是了...
不包含广告,可放心食用。
之前掘金有人疯狂发某云的组队广告,真的挺烦人的。
需要材料
- 腾讯云账号
- Github账号
- 一个HTTPS域名及一个能够部署node的服务器
- 本地运行NodeJS,服务端部署NodeJS服务的条件
涉及技术
只是用到了,本文不涉及0.0
- Vue
- Element-UI
- Node.js
- pm2
第一步,创建应用
登陆腾讯云官网,访问GME游戏多媒体引擎
新建应用,平台勾选H5,服务区域选择中国大陆。(不需要付费,免费用量500日pv)
注意!关闭实时语音服务以外的其他服务(因为这些要付费的样子qwq)
创建完成后点开应用详情就可以看到AppID和权限密匙了
如有疑问可查阅腾讯云-GME接入指引
第二步,下载鉴权程序并部署
鉴权部分具体操作请参照官方文档 cloud.tencent.com/document/pr…
大致流程:
- 下载签名程序
- 将程序中的AppID和权限密钥修改成你自己的
- 测试签名程序能否正常工作
本地测试这个签名程序无误,能正常得到鉴权信息之后,则可以使用pm2将这个签名程序部署到你的服务器上了。(注意!需要部署到HTTPS域名下)
第三步,fork前端程序并部署
登陆Github,fork我的这个gme-chat-demo项目 (该项目改造自官方模板,项目中已包含了SDK)
然后将index.html中此处代码中的AppID和签名程序地址修改为你自己的即可。
使用Github Pages将前端页面部署,Github会自动给你分配https域名😎
然后...
找你的朋友来试试吧~😁
如果没有朋友可以自己开两个标签页(哭了)
关于GME SDK更多的能力与API,则可以阅读官方文档
总结
各种云服务商为个人开发者提供了更便捷的云服务,serverless,音视频流服务等...
让更多个人开发者也轻松能做出直播,聊天室等复杂功能。
文章潦草,还望见谅 ・ω・ 有任何意见也欢迎提出~