Suck the cat with code! This paper is participating in[Cat Essay Campaign]

A preface

Hi, I’m from programmer South. This article is to take you into the video small program to build. One day, I was asleep in the middle of the night, and suddenly I heard my “churro” (orange cat) and “soymilk” (English short) two kittens mewing all the time, so I had a sudden idea, why not let them and other kittens can video call communication? Ah, take advantage of this opportunity, this is not to come, “cat chat” small program overnight set sail!

Ii. Presentation

Join a video chat room

This is, mobile phone shooting, kangkang youtiao and soya-bean milk in what? Oh, thieving!

Phone rear camera effect

On the left is a cellphone shot of fried dough sticks (orange cat) and on the right is a computer shot of soybean milk (English short). (The cat chat room has a voice, imagine the voice oh ~ meow ~)

Phone front camera effect

On the left is a cellphone shot of fried dough sticks (orange cat) and on the right is a computer shot of soybean milk (English short). (Cat chat rooms have sounds. Imagine the sounds.)

Three operation process (preparation + workflow (core code))

The preparation of wechat applets

(Also refer toSound networkWriting process)

Register non-personal applets – set applets service type tool > Video Customer service“Development (Development Management)” “Interface Settings” “Enable real-time playback and real-time recording of audio and video streams— “Development (Development Management) –” “Development Settings” — “Server Domain name (Server Configuration) –” add the request legitimate domain name and socket legitimate domain name, add the following content at the 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

The socket:

wss://miniapp.agoraio.cn (Also refer toSound networkWriting process)

Sound networkPreparatory work for

Reference Address:Soundnet – Sample project

The operation of wechat developers

Open wechat Developer — “Import downloaded good running sample project –” fill in APPID, that is, the ID of the non-personal small program you registered — “open successfully, and start to modify the places that need to be changed

What needs to be changed

One thing that needs to be changed here is that the index. WXML code does not display avatars and nicknames, so it needs to be changed

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

The meeting. Js code has an incorrect path address and needs to change lib to utils

// pages/meeting/meeting.js. . .const AgoraMiniappSDK = require(".. /.. /utils/mini-app-sdk-production.js"); . . . Page({/** * initial data for the page */
 data: {... . . },/** * lifecycle function -- listens for page loading */
 onLoad: function (options) {... . . },/** * lifecycle function - listen for the page to complete the first rendering */
 onReady: function () {... . . },/** * lifecycle function -- listens for page display */
 onShow: function () {},/** * life cycle function - listen for page hiding */
 onHide: function () {... . . },/** * life cycle function - listen for page unload */
 onUnload: function () {},/** * page-related event handlers -- listen for user pull actions */
 onPullDownRefresh: function () {... . . },/** * the handler for the pull-down event on the page */
 onReachBottom: function () {... . . },/** * Users click on the upper right corner to share */
 onShareAppMessage: function () {... . . }})Copy the code

4 Source code Address

Source code address: gitee.com/nanfangzhe/… Personal Gitee address: gitee.com/nanfangzhe/

I am programmer south, thank you for watching ~

Later, if I have time, I will continue to improve. Well, that’s the end of the article. Thank you for seeing it to the end. Do not understand the place can welcome to leave a message, comment, let us study together, progress together.