15分鐘從零開發一個屬於你的H5語音聊天室

這是一個純前端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，音視頻流服務等...

讓更多我的開發者也輕鬆能作出直播，聊天室等複雜功能。

文章潦草，還望見諒 ･ω･ 有任何意見也歡迎提出~