Skip to content

小程序源码,直播<live-room>、双人多人<rtc-room>标签对接RoomService业务后台,实现直播连麦、双人、多人房间管理。<webrtc-room>标签对接WebRTC业务后台,实现与Chrome浏览器的互通。

Notifications You must be signed in to change notification settings

tmp3000/MiniProgram

Repository files navigation

<style> table td { height: 35px; text-align:center; vertical-align:middle; } .markdown-text-box img { border: 0; max-width: 100%; height: auto; box-sizing: content-box; box-shadow: 0 0 0px #ccc; margin: 0px 0; } .markdown-text-box table td, .markdown-text-box table th { padding: 8px 13px; border: 1px solid #d9d9d9; word-wrap: break-word; text-align: center; } </style>

1.项目简介

在构建直播业务,多人音视频业务等场景下,都需要后台配合完成诸如:

  • 生成直播地址,包括推流和播放地址
  • 生成IM签名,用于IM独立模式下的用户登录
  • 管理IM聊天室,聊天室的创建和销毁还有成员进出通知
  • 双人/多人音视频管理视频位。 以上这些都有一定的学习成本,为了降低学习成本,我们将后台封装了一套接口,来解决以上问题。再配合IOS,Android,小程序和Win PC端的后台调用封装。对应用开发者提供一套友好的接口,方便您实现多人实时音视频,直播,聊天等业务场景。

特别说明:

  • [1] 后台没有对接口的调用做安全校验,这需要您结合您自己的账号和鉴权体系,诸如在请求接口上加一个Sig参数,内容是您账号鉴权体系派发的一个字符串,用于校验请求者的身份。**
  • [2] 房间管理采用 java对象直接在内存中进行管理。房间信息动态和实效性,因此没有采用数据库做持久存储,而是在内存中动态管理。**

云服务开通

开通直播服务

申请开通视频直播服务

进入 直播管理控制台,如果服务还没有开通,则会有如下提示: 点击申请开通,之后会进入腾讯云人工审核阶段,审核通过后即可开通。

配置直播码

直播服务开通后,进入【直播控制台】>【直播码接入】>【接入配置】 完成相关配置,即可开启直播码服务: 点击【确定接入】按钮即可。

开通云通信服务

申请开通云通讯服务

进入云通讯管理控制台,如果还没有服务,直接点击直接开通云通讯按钮即可。新认证的腾讯云账号,云通讯的应用列表是空的,如下图:

点击创建应用接入按钮创建一个新的应用接入,即您要接入腾讯云IM通讯服务的App的名字,我们的测试应用名称叫做“RTMPRoom演示”,如下图所示:

点击确定按钮,之后就可以在应用列表中看到刚刚添加的项目了,如下图所示:

配置独立模式

上图的列表中,右侧有一个应用配置按钮,点击这里进入下一步的配置工作,如下图所示。

安装微信小程序开发工具

下载并安装最新版本的微信开发者工具,使用小程序绑定的微信号扫码登录开发者工具。

微信开发者工具

下载 Demo

访问 小程序,获取小程序 Demo 和后台源码。

上传和部署代码

  1. 打开第四步安装的微信开发者工具,点击【小程序项目】按钮。
  2. 输入小程序 AppID,项目目录选择上一步下载下来的代码目录,点击确定创建小程序项目。
  3. 再次点击【确定】进入开发者工具。

注意:

目录请选择 RTCRoomDemo 根目录。包含有 project.config.json,请不要只选择 wxlite 目录!

上传代码

4 . 打开 RTCRoomDemo 代码中 server 目录下的 config.js 文件,修改配置信息

需要替换的参数一览:

参数名 作用 获取方案
live.appID 腾讯云直播服务基于 appID 区分客户身份 DOC
live.bizid 腾讯云直播服务基于 bizid 区分客户业务 DOC
live.pushSecretKey 腾讯云直播服务用于推流防盗链 DOC
live.APIKey 腾讯云直播服务的后台 REST API,采用 APIKey 进行安全保护 DOC
im.sdkAppID 腾讯云通讯服务用 sdkAppID 区分 IM 客户身份 DOC
im.accountType 曾用于区分 APP 类型,现仅出于兼容性原因而保留 DOC
im.administrator RTCRoomServer 使用了 IM REST API 发送房间里的系统消息,而 IM REST API 接口需要您填写管理员名称。 DOC
im.privateKey RTCRoomServer 使用 privateKey 用于签发管理员(administrator)的 usersig,进而能够调用 IM REST API 发送房间里的系统消息。 DOC
im.publicKey RTCRoomServer RoomService 使用 publicKey 用于确认终端用户的登录身份。 DOC

5 . 点击界面右上角的【腾讯云】图标,在下拉的菜单栏中选择【上传测试代码】。

上传按钮

6 . 选择【模块上传】并勾选全部选项,然后勾选【部署后自动安装依赖】,点击【确定】开始上传代码。

选择模块

上传成功

7 . 上传代码完成之后,点击右上角的【详情】按钮,接着选择【腾讯云状态】即可看到腾讯云自动分配给你的开发环境域名,完整复制(包括 https://)开发环境 request 域名,然后在编辑器中打开 wxlite/config.js 文件,将复制的域名填入 serverUrlroomServiceUrl中并保存,保存之后编辑器会自动编译小程序,左边的模拟器窗口即可实时显示出客户端的 Demo:

查看开发域名

8 . 在模拟器中编译运行点击多人音视频进入,在右侧的console里面可以看到登录成功的log表示配置成功。

登录测试

9 . 请使用手机进行测试,直接扫描开发者工具预览生成的二维码进入, 这里部署的后台是开发测试环境,一定要开启调试:

开启调试

注意:后台服务器部署的测试环境有效期为七天,如果还需要测试体验请重新部署后台。小程序访问域名有白名单限制,小程序开启调试就不会检查白名单,测试期间建议开启白名单,最后要发布的时候将域名配置到白名单里面,请参考常见问题里面如何部署正式环境?

六、项目结构

RTCRoomDemo
├── README.md
├── server                       //后台代码目录,具体请参见服务端项目结构介绍
└── wxlite                       //腾讯视频云小程序目录
   ├── config.js                 //配置文件,主要配置后台服务器地址
   ├── lib                       //小程序使用的通用库目录
   ├── pages                     //腾讯视频云小程序界面主目录
   │      ├── Resources          //资源目录
   │      ├── components         //组件目录
   │      │      ├── live-room   //腾讯视频云小程序<live-room>组件
   │      │      │      └── vertical1v3template     //腾讯视频云小程序<live-room>组件使用的界面模版
   │      │      ├── rtc-room    //腾讯视频云小程序<rtc-room>组件
   │      │      │      └── gridtemplate            //腾讯视频云小程序<rtc-room>组件使用的界面模版
   │      │      ├── sketchpad
   │      │      └── webrtc-room //腾讯视频云小程序<webrtc-room>组件
   │      │          ├── 1l3rtemplate               //腾讯视频云小程序<webrtc-room>组件使用的界面模版
   │      │          ├── 1u3dtemplate               //腾讯视频云小程序<webrtc-room>组件使用的界面模版
   │      │          └── gridtemplate               //腾讯视频云小程序<webrtc-room>组件使用的界面模版
   │      ├── doubleroom         //腾讯视频云小程序双人音视频
   │      ├── livelinkroom       //腾讯视频云小程序直播连麦  
   │      ├── liveroom           //腾讯视频云小程序直播体验室
   │      ├── main               //腾讯视频云小程序主界面
   │      ├── multiroom          //腾讯视频云小程序多人音视频
   │      ├── play               //腾讯视频云小程序播放界面
   │      ├── push               //腾讯视频云小程序推流界面
   │      ├── rtplay             //腾讯视频云小程序低延时播放界面
   │      ├── vodplay            //腾讯视频云小程序点播播放界面
   │      └── webrtcroom         //腾讯视频云小程序webrtc互通体验室
   └── utils
       ├── liveroom.js           //腾讯视频云小程序单向音视频库文件
       ├── rtcroom.js            //腾讯视频云小程序双人、多人音视频库文件
       └── webrtcroom.js         //腾讯视频云小程序webrtc互通库文件

常见问题 FAQ

1. 运行出错如何排查?
  • 请修改wxlite/config.js中的url,使用默认的官方demo后台:https://room.qcloud.com ,直接运行小程序
  • 请重新解压下载的demo直接运行小程序,默认就是官方demo后台
  • 请返回第二步检查开通的小程序类目是否正确,推拉流标签在小程序控制台是否开启
  • 使用官方demo后台运行可以,请参考此文档再重新部署一遍
  • 依然不行可以提工单或客服电话(400-9100-100)联系我们
2. 运行小程序进入多人音视频看不到画面?
  • 请确认使用手机来运行,微信开发者工具内部的模拟器目前还不支持直接运行
  • 请确认小程序基础库版本 wx.getSystemInfo 可以查询到该信息,1.7.0 以上的基础库才支持音视频能力。
  • 请确认小程序所属的类目,由于监管要求,并非所有类目的小程序都开发了音视频能力,已支持的类目请参考 DOC
  • 如有更多需求,或希望深度合作,可以提工单或客服电话(400-9100-100)联系我们。
3. live-pusher、live-player标签使用及错误码参考
4. 如果需要上线或者部署正式环境怎么办?

About

小程序源码,直播<live-room>、双人多人<rtc-room>标签对接RoomService业务后台,实现直播连麦、双人、多人房间管理。<webrtc-room>标签对接WebRTC业务后台,实现与Chrome浏览器的互通。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%