15分钟从零开发一个属于你的H5语音聊天室

4,858 阅读2分钟

这是一个纯前端Serverless的H5语音聊天室

项目Demo演示地址

在线演示地址 备用地址

浏览器支持情况

简介

本文使用的是腾讯云给出的游戏语音解决方案,个人开发者可以免费使用部分功能。

免费的真香2333

本文只使用了H5 SDK,只有最基础的语音聊天服务。还有更高级的空间音效,语音识别等功能,不过在Web没法用就是了...

不包含广告,可放心食用。

之前掘金有人疯狂发某云的组队广告,真的挺烦人的。

需要材料

  1. 腾讯云账号
  2. Github账号
  3. 一个HTTPS域名及一个能够部署node的服务器
  4. 本地运行NodeJS,服务端部署NodeJS服务的条件

涉及技术

只是用到了,本文不涉及0.0

  • Vue
  • Element-UI
  • Node.js
  • pm2

第一步,创建应用

登陆腾讯云官网,访问GME游戏多媒体引擎

新建应用,平台勾选H5,服务区域选择中国大陆。(不需要付费,免费用量500日pv)

注意!关闭实时语音服务以外的其他服务(因为这些要付费的样子qwq)

创建完成后点开应用详情就可以看到AppID和权限密匙了

如有疑问可查阅腾讯云-GME接入指引

第二步,下载鉴权程序并部署

鉴权部分具体操作请参照官方文档 cloud.tencent.com/document/pr…

大致流程:

  1. 下载签名程序
  2. 将程序中的AppID和权限密钥修改成你自己的
  3. 测试签名程序能否正常工作

本地测试这个签名程序无误,能正常得到鉴权信息之后,则可以使用pm2将这个签名程序部署到你的服务器上了。(注意!需要部署到HTTPS域名下)

第三步,fork前端程序并部署

登陆Github,fork我的这个gme-chat-demo项目 (该项目改造自官方模板,项目中已包含了SDK)

然后将index.html中此处代码中的AppID和签名程序地址修改为你自己的即可。

使用Github Pages将前端页面部署,Github会自动给你分配https域名😎

然后...

找你的朋友来试试吧~😁

如果没有朋友可以自己开两个标签页(哭了)

关于GME SDK更多的能力与API,则可以阅读官方文档

总结

各种云服务商为个人开发者提供了更便捷的云服务,serverless,音视频流服务等...

让更多个人开发者也轻松能做出直播,聊天室等复杂功能。

文章潦草,还望见谅 ・ω・ 有任何意见也欢迎提出~