开源demo| ARCall 小程序开源示例发布

目前,小程序已经成为了我们生活中的一部分,其功能齐全、内存占用小、推广成本低、利于转化等优势促使其发展迅速。伴随着各行各业在小程序上应用,实时音视频的需求也越来越多,anyRTC 在小程序面世后第一时间推出小程序实时音视频 SDK,帮助开发者在小程序中集成实时音视频功能。

在小程序的实时音视频中,除了典型的视频会议这样的应用外,用的最多的便是类似于微信呼叫邀请的功能了,anyRTC 在推出 ARCall 开源示例后,不断有客户让适配小程序来实现呼叫邀请通话,今天就来带大家微信小程序原生实现 ARCall,来跟 Web 以及 Native 互通。

前提准备

1. 微信公众平台

  • 账号登录微信公众平台

  • 进入开发下的开发管理,选择接口设置,开启 实时播放音视频流实时录制音视频流

    在这里插入图片描述

  • 进入开发下的开发管理,选择接口设置,配置服务器域名

    • request合法域名

      https://official.opensso.tencent-cloud.com;
      https://rtmgw.agrtc.cn;
      https://wtgw.agrtc.cn;
      
    • socket合法域名

      wss://ctsone.anyrtc.cc;
      wss://ctstwo.anyrtc.cc;
      wss://node1.rtm.agrtc.cn:443;
      wss://node2.rtm.agrtc.cn:443;
      wss://ws.anyrtc.cc;
      wss://wtnode.agrtc.cn;
      
  • 服务器域名配置完成后,复制 AppID(小程序ID)

在这里插入图片描述

2. 项目创建、插件引入

  • 创建项目

  • 引入插件

    • 初始化npm

      npm init
      
    • 引入 ar-rtm-sdkar-rtc-miniapp

      npm install --save ar-rtm-sdk
      npm install --save ar-rtc-miniapp
      

在这里插入图片描述

  • 微信开发者配置
    必须先完成上一步骤的插件引入

    • 工具 》 构建 npm
      在这里插入图片描述
      在这里插入图片描述

    • 本地运行配置
      在这里插入图片描述

代码流程逻辑

在这里插入图片描述

实现效果

在这里插入图片描述

体验地址

微信搜索anyRTC视频云点击AR 呼叫即可体验小程序版 ARCall

代码地址

文件Call_WeChat
https://github.com/anyRTC-UseCase/ARCall

在这里插入图片描述

posted @   anyRTC  阅读(144)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
历史上的今天:
2021-07-20 为什么互动直播可以发展如此迅速?
点击右上角即可分享
微信分享提示