一起用代码吸猫！本文正在参与【喵星人征文活动】

一 前言

　　大家好，我是程序员南方者。本篇文章是带大家走进视频小程序的搭建。

　　有一天，大半夜我睡觉，突然迷迷糊糊听到我家“油条”（橘猫）和“豆浆”（英短）两只小猫咪一直喵喵叫，突发奇想，为啥不让它们和别的小猫咪能够进行视频通话交流呢？哎，趁此机会，这不就来了吗，《猫的聊天室》小程序就连夜起航了！

二 展示情况

加入视频聊天室

这里是，手机拍摄，康康油条和豆浆在干嘛？噢~在偷摸！

链接

手机后置摄像头效果

左边是手机拍摄油条（橘猫），右边是电脑拍摄豆浆（英短）。（猫的聊天室是有声音的，自由想象声音喔~ 喵~)

链接

手机前置摄像头效果

左边是手机拍摄油条（橘猫），右边是电脑拍摄豆浆（英短）。（猫的聊天室是有声音的，自由想象声音噢~ 喵~)

链接

三 操作流程（准备工作 + 工作流程（核心代码））

微信小程序的准备工作

（也可参考声网写的流程）

注册非个人小程序——》设置小程序的服务类型工具 > 视频客服

——》开发（开发管理）——》接口设置——》打开实时播放音视频流和实时录制音视频流

——》开发（开发管理）——》开发设置——》服务器域名（服务器配置）——》添加request合法域名和socket合法域名，添加以下内容 request处：

https://uni-webcollector.agora.io

https://miniapp-1.agoraio.cn

https://miniapp-2.agoraio.cn

https://miniapp-3.agoraio.cn

https://miniapp-4.agoraio.cn

socket处：

wss://miniapp.agoraio.cn

（也可参考声网写的流程）

声网的准备工作

参考地址：声网 - 示例项目

微信开发者的操作

打开微信开发者——》导入下载好的跑通示例项目——》填写APPID，也就是你所注册的非个人小程序的id——》打开成功，开始修改需要改动的地方

需要改动的地方

这里有部分需要改动的就是：

index.wxml代码是显示不出头像和昵称的，所以需要改动成一下代码

<!-- pages/index/index.wxml -->
<view>
  ...
     <open-data type="userAvatarUrl" />
     <open-data type="userNickName" />
  ...
</view>

meeting.js代码是有个路径地址错了，需要把lib改成utils

// pages/meeting/meeting.js
   ...
   ...
   ...
const AgoraMiniappSDK = require("../../utils/mini-app-sdk-production.js");
   ...
   ...
   ...
Page({
 /**
  * 页面的初始数据
  */
 data: {
   ...
   ...
   ...
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   ...
   ...
   ...
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
   ...
   ...
   ...
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
   ...
   ...
   ...
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
   ...
   ...
   ...
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
   ...
   ...
   ...
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
   ...
   ...
   ...
 }
})

四 源码地址

源码地址：gitee.com/nanfangzhe/…

个人Gitee地址：gitee.com/nanfangzhe/

我是程序员南方者，谢谢你的观看~

　　后期，如果有时间我还会继续完善起来。

　　好了，最后到这里文章就结束了。感谢你看到了最后。不懂的地方可以欢迎留言、评论，让我们一起学习、一起进步。