小程序1v1视频通话多种实现方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序1v1视频通话多种实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

例如：本文讲解我是如何寻找多种实现小程序1v1视频通话方法？

一、微信小程序双人音视频对话（弃坑）

申请开通
暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

我用的是工具 - 视频客服类目

审核大概半天时间

小程序1v1视频通话多种实现方法

双人视频通话文档
通过双人音视频通话功能（1v1 VoIP），用户可以直接在小程序内进行一对一视频通话或音频通话，提升小程序服务质量，且功能所需的开发成本极低。

从基础库 2.20.1 开始支持

微信小程序前端接口

开启双人通话：wx.setEnable1v1Chat
加入（创建）双人通话：wx.join1v1Chat

使用条件需要去微信服务市场开通
小程序1v1视频通话多种实现方法
先默认第一，免费购买，其它要钱就不要买。土豪例外。

提交订单即可

微信为单个小程序提供每个自然月1000分钟的免费通话时长，1分钟语音通话时长扣除1分钟免费通话时长，1分钟视频通话时长扣除15分钟免费时长。超出部分需另行付费。免费时长领取与套餐包购买需前往微信服务市场进行操作

接下来开始测试微信小程序前端接口

    wx.setEnable1v1Chat({
      enable: true,
      success(res){
          console.log(res, 'res')
          wx.join1v1Chat({
              listener:{
                  nickname: '接听1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                openId: '',//获取小程序用户的openId
              },
              caller:{
                  nickname: '呼叫1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                  openId: '',//获取小程序用户的openId
              },
              success(res){
                  console.log('[startCallWx]res', res)
              },
              fail(err){
                  console.log('[startCallWx]err', err)
              }
          })
          
      },
      fail(err) {
          console.error("拨通失败", err)
      }
    })

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
auth.code2Session

    let that=this;

    wx.login({
      success (res) {
        if (res.code) {
          console.log(res,'res')
          wx.request({
            url:`https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${res.code}&grant_type=authorization_code`,
            success:(res)=>{
              console.log(res);
                 that.setData({
                  openId:res.data.openId
              })
            }
          })
        }
      }
    })

经测试两个手机必须进入小程序才能唤醒呼叫通话，而且另一部手机接通了，另一部一直在显示对方未接听中。有bug.
问了微信官方社区无人回复。弃坑

二、腾讯云实时音视频（比较贵）

含UI集成方案

本文将介绍如何用最短的时间完成 TUICallKit 组件的接入，跟随本文档，您将在半个小时的时间内得到一个包含完备 UI 界面的视频通话小程序。基本功能如下图所示：
小程序1v1视频通话多种实现方法

小程序 Demo 体验

如果您想要直接体验音视频通话小程序，单击 Demo 体验，扫描小程序二维码。
如果您想要直接跑通一个新工程，请直接阅读微信小程序 Demo 快速跑通。
如果您想要亲自集成 TUICallKit 组件，搭建一个音视频通话小程序，请跟随本文档。

开发环境要求

微信 App iOS 最低版本要求：7.0.9
微信 App Android 最低版本要求：7.0.8
小程序基础库最低版本要求：2.10.0

警告：
由于小程序测试号不具备和的使用权限，请使用企业小程序账号申请相关权限进行开发。
由于微信开发者工具不支持原生组件（即和标签），需要在真机上运行体验。

小程序开发准备

步骤一：开通企业类小程序

小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在注册时填写主体类型为企业，如下图所示：
小程序1v1视频通话多种实现方法

步骤二：在小程序控制台开启实时音视频接口

小程序推拉流标签使用权限暂时只开放给有限类目，具体支持类目参考该地址。
符合类目要求的小程序，需要在微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
小程序1v1视频通话多种实现方法

步骤三：在小程序控制台配置域名

在微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名和 socket 合法域名。
request 合法域名：

https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com

socket 合法域名：

wss://wss.im.qcloud.com
wss://wss.tim.qq.com

如图所示，服务器域名配置：
小程序1v1视频通话多种实现方法

TUICallKit 源码集成

步骤一：初始化小程序项目

在微信开发者工具上创建一个小程序项目，选择不使用模板。
新建终端。
执行npm init -y命令生成package.json文件。

npm init -y

小程序1v1视频通话多种实现方法

步骤二：下载并导入 TUICallKit 组件

下载 TUICallKit 组件。

npm i @tencentcloud/call-uikit-wechat

mac版

mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit

window版

xcopy node_modules\@tencentcloud\call-uikit-wechat .\TUICallKit /i /e

执行完以上命令后，您的目录下生成 TUICallKit 文件夹，其中包含有 TUICallKit 组件。目录如下：
构建 npm，微信开发者工具工具 > 构建 npm，新增miniprogram_npm目录。目录如下：

步骤三：获取 SDKAppID、SecretKey

登录到即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
单击创建的应用，进入基本配置页面，获取 SDKAppID、SecretKey。
在基本配置页面，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
如果需要正式应用上线，可以单击购买正式版即可进入购买页面。

步骤四：获取 UserSig

客户端生成

由于 UserSig 有时效性，如果您需要长期使用 TUICallKit，推荐您采用该方法。

单击下载 debug 文件夹，将 debug 目录复制到您的项目，如下图所示：
填写 GenerateTestUserSig.js 文件的 SDKAppID 以及 SecretKey。

控制台生成

如果您想要快速体验 TUICallKit，您可以通过控制台中的辅助工具生成一个临时可用的 UserSig。

小程序1v1视频通话多种实现方法

步骤五：调用 TUICallKit 组件

欢迎跳到腾讯云文档来查

最后注意一下
创建应用有送七天免费试用，如果要正式部署线上，一个月要一千多块。不适合初创公司使用的。

无UI集成方案

本文主要介绍如何快速跑通微信小程序版本的 TRTC Demo，您可以从 Github 上的 WXMini 目录下获取相关代码。Demo 中前三个功能项演示了三个不同的应用场景：
语音聊天室：纯语音交互，支持多人互动语音聊天，以及混音、混响等声音特效功能。适合在线狼人杀、在线语音直播等社交类场景。
双人通话：1v1视频通话，配合 Web IM SDK 可以实现在线问诊，在线客服等需要面对面交流的沟通场景。
多人会议：支持多路视频通话和大小画面等围绕视频会议相关的高级功能，适用于远程培训、在线教育等场景。
小程序1v1视频通话多种实现方法

更多详细请到腾讯云文档查

三、即购zego （目前是比较划算之一）

示例源代码

示例代码运行指引

示例源码仅针对微信原生组件。
本文档仅提供小程序原生框架示例接入指引，uni-app 框架示例接入指引及相关注意事项，请参考上方 uni-app 框架下示例源码中的 readme.md 文件。

示例源码目录结构

.
├── components  # 小程序组件
│   ├── zego-player # zego-player组件，封装了live-player拉流
│   └── zego-pusher # zego-pusher组件，封装了live-pusher推流
├── libs    # 依赖库文件夹，存放如sdk的js文件等
│   └──ZegoExpressMiniProgram.js    # 小程序sdk
├── miniprogram_npm # 一些项目依赖的npm包
│   └── miniprogram-api-promise # 用于扩展微信小程序api支持promise
├── pages   # 小程序页面 
│   ├── base    # 视频直播《基础推拉流》
│   ├── base_zego   # 视频直播 推拉流组件
│   ├── bgm     # 视频直播 背景音
│   ├── cdn     # 视频直播 CDN
│   ├── customlive  # 自定义推拉流
│   ├── main    # 首页
│   ├── message     # 视频直播《实时消息》
│   ├── mix     # 视频直播 混流
│   ├── multi   # 重试 多节点
│   ├── native      # 基础演示 摄像头、麦克风等
│   ├── setting     # 自定义设置 设置APPID
│   ├── snapshot    # 视频直播 截图
│   └── tokenRole   # token鉴权 token v3
├── resource    # 资源文件夹，存放如图片等静态资源
├── script      # 一些测试脚本
├── utils       # 存放共享的工具类、方法等的js文件夹
├── app.js      # 微信小程序的入口文件
├── app.json    # 微信小程序公共设置
├── app.wxss    # 微信小程序全局样式
├── package.json    # npm包描述文件
├── project.config.json # 微信小程序项目配置描述文件
└── sitemap.json    # sitemap配置文件，用于配置小程序及其页面是否允许被微信索引