feat: finclip sdk

README.CN.md

@@ -1,10 +1,10 @@
-# Agora Miniapp Tutorial × FinClip
+# Agora Miniapp Tutorial
 
 *Read this in other languages [English](README.md)*
 
 ## 简介
 
-本 Demo 基于 Agora Miniapp SDK 开发，能帮助开发者在 [FinClip 小程序](https://www.finclip.com/)中实现视频通话及互动直播等功能。
+本 Demo 基于 Agora Miniapp SDK 开发，能帮助开发者在微信小程序中实现视频通话及互动直播等功能。
 
 本页演示如下内容：
 
@@ -17,7 +17,7 @@
 ## 准备开发环境
 
 1. 请确保本地已安装微信开发者工具
-2. 请确保有一个支持 **live-pusher** 和 **live-player** 组件的微信公众平台账号。只有特定行业的认证企业账号才可使用这两个组件。详情请[点击这里](https://www.finclip.com/mop/document/develop/component/media.html#live-pusher)
+2. 请确保有一个支持 **live-pusher** 和 **live-player** 组件的微信公众平台账号。只有特定行业的认证企业账号才可使用这两个组件。详情请[点击这里](https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html)
 3. 请确保在微信公众平台账号的开发设置中，给予以下域名请求权限：
 
  * https://miniapp.agoraio.cn
@@ -31,17 +31,16 @@
  * https://miniapp-4.agoraio.cn
 
 ## 运行示例程序
-
+ 
-1. 在 [FinClip](https://www.finclip.com/) 与 [Agora.io](http://dashboard.agora.io/signin/) 注册账号，并创建自己的测试项目，获取 App ID。如需获取 Token 或 Channel Key，请启用 App Certificate
+1. 在 [Agora.io](http://dashboard.agora.io/signin/) 注册账号，并创建自己的测试项目，获取 App ID。如需获取 Token 或 Channel Key，请启用 App Certificate
 2. 下载本页示例程序
-3. 打开 *utils* 文件夹，在 *config.js* 文件中填入获取到的 App ID：
+3. 打开 *utils* 文件夹，在 *config.js* 文件中填入获取到的 App ID 和 TOKEN：
 
     	const APPID = 'abcdefg'
-    
+    	const TOKEN = 'some token'
-4. 下载 [Agora Miniapp SDK](https://docs.agora.io/cn/Agora%20Platform/downloads)，并将 SDK 重新命名为 “mini-app-sdk-production.js"
+4. *lib* 文件夹中包含 mini-app-sdk-production.js 和 finclip-agora-client-sdk.js，分别对应在微信平台和 FinClip 小程序平台，在不同平台运行需要在 *meeting.js* 引入对应的 SDK
-5. 将更名后的 "mini-app-sdk-production.js" 文件保存在本示例程序的 *lib* 文件夹下
+5. 启动开发者工具并导入该示例程序
-6. 启动微信开发者工具并导入该示例程序
+6. 输入频道名，加入频道。邀请你的朋友加入同一个频道，就可以开始视频互通了。
-7. 输入频道名，加入频道。邀请你的朋友加入同一个频道，就可以开始视频互通了。
 
 **声网的 Native SDK 可以直接与小程序互通。**
 
@@ -52,7 +51,7 @@
     	//...
     	client.join(<your key/access token here>, channel, uid, () => {
     	//...
-
+    	
 关于如何生成 Token 或 Dynamic Key 详见 [Token](https://docs.agora.io/cn/2.2/product/Video/Agora%20Basics/key_native?platform=Android) 或 [Dynamic Key](https://docs.agora.io/cn/2.2/product/Video/Agora%20Basics/key_web?platform=Web)。
 
 ## 反馈
@@ -66,7 +65,7 @@
 - 如果你想了解声网 SDK 在复杂场景下的应用，可以参考 [官方场景案例](https://github.com/AgoraIO-usecase)
 - 如果你想了解声网的一些社区开发者维护的项目，可以查看 [社区](https://github.com/AgoraIO-Community)
 - 若遇到问题需要开发者帮助，你可以到 [开发者社区](https://rtcdeveloper.com/) 提问
-- 如果需要售后技术支持, 你可以联系 FinClip
+- 如果需要售后技术支持, 你可以在 [Agora Dashboard](https://dashboard.agora.io) 提交工单
 
 ## 代码许可
 

README.md

@@ -29,15 +29,16 @@ With this sample app, you can:
 
 2. Download this project.
 
-3. Fill in the App ID in *config.js* in the *utils* folder of this project:
+3. Fill in the AppID and TOKEN in *config.js* in the *utils* folder of this project:
 
     	const APPID = 'abcdefg'
+    	const TOKEN = 'some token'
 
 4. Contact contact@finogeeks.com / sales@agora.io  to abtain the Agora Miniapp SDK, and rename the SDK to "mini-app-sdk-production.js".
 
 5. Save the "mini-app-sdk-production.js" under the *lib* folder of this project.
 
-6. Start the WeChat Developer Tool and import this project.
+6. Start the Developer Tool and import this project.
 
 7. Enter a channel name and join a channel. Invite your friend to join in the same channel and you will be able to see each other.
 

components/agora-player/agora-player.wxml

@@ -2,10 +2,10 @@
 <view class="play-container" style="left:{{x}}px; top:{{y}}px; width: {{width}}px; height: {{height}}px; ">
   <live-player wx:if="{{url!==''}}" id="player-{{uid}}" src="{{url}}" mode="RTC" class="player" orientation="{{orientation}}" bindstatechange="playerStateChange" object-fit="fillCrop" style="height:{{height}}px; position: absolute; width: 100%; top: 0; left: 0;"
     debug="{{debug}}" autoplay="true"/>
-  <cover-view wx-if="{{status !== 'ok'}}" class="sud flex-center-column" style="position: absolute; width: 100%; height:{{height}}px;justify-content:center">
+  <!-- <cover-view wx-if="{{status !== 'ok'}}" class="sud flex-center-column" style="position: absolute; width: 100%; height:{{height}}px;justify-content:center">
     <cover-image style="width: 128px;height:103px" src="../../images/{{status}}.png"></cover-image>
   </cover-view>
   <cover-view class="" style="position: absolute;top:10px;left:10px;font-size: 28rpx; right: 10px">
     {{name}}({{uid}})
-  </cover-view>
+  </cover-view> -->
-</view>
+</view>

components/agora-pusher/agora-pusher.wxml

@@ -2,7 +2,7 @@
 <view class="pusher-container" id="rtcpusher" style="top: {{y}}px; left: {{x}}px; width: {{width}}px; height: {{height}}px; position: absolute;">
   <live-pusher wx:if="{{url!==''}}" style="height:{{height}}px; position: absolute; width: 100%; " url="{{url}}" mode="RTC" aspect="{{aspect}}" class="camera" bindstatechange="recorderStateChange" bindnetstatus="recorderNetChange" background-mute="true" muted="{{muted}}" beauty="{{beauty}}"
     max-bitrate="500" min-bitrate="200" waiting-image="https://webdemo.agora.io/away.png" debug="{{debug}}" autopush="true" />
-  <cover-view wx-if="{{status !== 'ok'}}" class="sud flex-center-column" style="position: absolute; width: 100%; height: 100%;justify-content:center">
+  <!-- <cover-view wx-if="{{status !== 'ok'}}" class="sud flex-center-column" style="position: absolute; width: 100%; height: 100%;justify-content:center">
     <cover-image style="width: 128px;height:103px" src="../../images/{{status}}.png"></cover-image>
-  </cover-view>
+  </cover-view> -->
-</view>
+</view>

fide.project.config.json

@@ -0,0 +1,11 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {},
+  "compileType": "miniprogram",
+  "projectname": "Agora-Miniapp-Tutorial",
+  "isGameTourist": false,
+  "isFulljs": true
+}

lib/finclip-agora-client-sdk.js

@@ -0,0 +1,328 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.umd = factory());
+})(this, (function () { 'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  function sendToSdk(api, params, context) {
+    var success = params.success;
+    var fail = params.fail;
+    delete params.success;
+    delete params.fail;
+    context.debug && console.log('Client Bridge Api:', api, params);
+    ft && ft.invoke(api, params, function (res) {
+      var _res$errMsg = res.errMsg,
+          errMsg = _res$errMsg === void 0 ? ':fail' : _res$errMsg;
+
+      if (res.errMsg) {
+        res.errMsg = res.errMsg.replace('agoraSDK', "agoraSDK ".concat(params.method || ''));
+      }
+
+      context.debug && console.log('Invoke Callback:', api, res);
+      var isOk = errMsg.indexOf(':ok') !== -1;
+      var isFail = errMsg.indexOf(':fail') !== -1;
+
+      if (isOk) {
+        typeof success === 'function' && success(res.data || {});
+      } else if (isFail) {
+        typeof fail === 'function' && fail(res.data || {});
+      }
+    });
+  }
+
+  function onMethod(context) {
+    ft && ft.on('onAgoraSDKEvent', function (payload) {
+      context.debug && console.log('onAgoraSDKEvent', payload);
+      var type = payload.type,
+          data = payload.data;
+      context.invokeCallback(type, data);
+    });
+  }
+
+  var Client = /*#__PURE__*/function () {
+    function Client(options) {
+      _classCallCheck(this, Client);
+
+      var _ref = options || {},
+          _ref$debug = _ref.debug,
+          debug = _ref$debug === void 0 ? false : _ref$debug;
+
+      this.listeners = {};
+      this.delayTasks = [];
+      this.debug = debug;
+      onMethod(this);
+    }
+
+    _createClass(Client, [{
+      key: "init",
+      value: function init(appId, onSuccess, onFailure) {
+        this.appId = appId;
+        sendToSdk('agoraSDK', {
+          method: 'init',
+          params: {
+            appId: appId
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "setRole",
+      value: function setRole(role, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'setRole',
+          params: {
+            role: role
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "join",
+      value: function join(channelKey, channel, uid, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'join',
+          params: {
+            channelKey: channelKey,
+            channel: channel,
+            uid: uid
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "publish",
+      value: function publish(onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'publish',
+          params: {},
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "destroy",
+      value: function destroy(onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'destroy',
+          params: {},
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "muteLocal",
+      value: function muteLocal(target, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'muteLocal',
+          params: {
+            target: target
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "unmuteLocal",
+      value: function unmuteLocal(target, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'unmuteLocal',
+          params: {
+            target: target
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "mute",
+      value: function mute(uid, target, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'mute',
+          params: {
+            uid: uid,
+            target: target
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "unmute",
+      value: function unmute(uid, target, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'unmute',
+          params: {
+            uid: uid,
+            target: target
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "renewToken",
+      value: function renewToken(token, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'renewToken',
+          params: {
+            token: token
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "setRemoteVideoStreamType",
+      value: function setRemoteVideoStreamType(uid, type, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'setRemoteVideoStreamType',
+          params: {
+            uid: uid,
+            type: type
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "startChannelMediaRelay",
+      value: function startChannelMediaRelay(config, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'startChannelMediaRelay',
+          params: {
+            config: config
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "updateChannelMediaRelay",
+      value: function updateChannelMediaRelay(config, onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'updateChannelMediaRelay',
+          params: {
+            config: config
+          },
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "stopChannelMediaRelay",
+      value: function stopChannelMediaRelay(onSuccess, onFailure) {
+        sendToSdk('agoraSDK', {
+          method: 'stopChannelMediaRelay',
+          params: {},
+          success: onSuccess,
+          fail: onFailure
+        }, this);
+      }
+    }, {
+      key: "on",
+      value: function on(eventName, callback) {
+        if (typeof eventName === 'string' && typeof callback === 'function') {
+          this.listeners[eventName] = callback;
+        }
+
+        this.runDelayTasks();
+      }
+    }, {
+      key: "subscribe",
+      value: function subscribe(uid, onSuccess, onFailure) {
+        this.listeners[uid] = function (data) {
+          var url = data.url,
+              rotation = data.rotation;
+          typeof onSuccess === 'function' && onSuccess(url, rotation);
+        };
+
+        this.runDelayTasks();
+      }
+    }, {
+      key: "unsubscribe",
+      value: function unsubscribe(uid, onSuccess) {
+        delete this.listeners[uid];
+        typeof onSuccess === 'function' && onSuccess();
+      }
+    }, {
+      key: "runDelayTasks",
+      value: function runDelayTasks() {
+        var _this = this;
+
+        this.delayTasks = this.delayTasks.filter(function (task) {
+          var eventName = task.eventName,
+              payload = task.payload;
+          var callback = _this.listeners[eventName];
+
+          if (typeof callback === 'function') {
+            try {
+              callback(payload);
+            } catch (e) {
+              console.error(e);
+            }
+
+            return false;
+          } else {
+            return true;
+          }
+        });
+      }
+    }, {
+      key: "invokeCallback",
+      value: function invokeCallback(eventName, payload) {
+        var callback = this.listeners[eventName];
+
+        if (typeof callback === 'function') {
+          callback(payload);
+        } else if (!callback) {
+          this.delayTasks.push({
+            eventName: eventName,
+            payload: payload
+          });
+        }
+      }
+    }]);
+
+    return Client;
+  }();
+
+  var index = {
+    Client: Client,
+    // mock Log
+    LOG: {
+      setLogLevel: function setLogLevel() {}
+    }
+  };
+
+  return index;
+
+}));
+//# sourceMappingURL=finclip-agora-client-sdk.js.map

pages/meeting/meeting.js

@@ -1,10 +1,14 @@
 // pages/meeting/meeting.js
 const app = getApp()
 const Utils = require('../../utils/util.js')
-const AgoraMiniappSDK = require("../../lib/mini-app-sdk-production.js");
+// 微信平台 SDK
+// const AgoraMiniappSDK = require("../../lib/mini-app-sdk-production.js");
+// 凡泰平台 SDK
+const AgoraMiniappSDK = require("../../lib/finclip-agora-client-sdk.js");
 const max_user = 10;
 const Layouter = require("../../utils/layout.js");
 const APPID = require("../../utils/config.js").APPID;
+const TOKEN = require("../../utils/config.js").TOKEN;
 
 /**
  * log relevant, remove these part and relevant code if not needed
@@ -554,10 +558,13 @@ Page({
       let client = {}
       if (this.testEnv) {
         client = new AgoraMiniappSDK.Client({
+          debug: true,
           servers: ["wss://miniapp.agoraio.cn/120-131-14-112/api"]
         });
       } else {
-        client = new AgoraMiniappSDK.Client()
+        client = new AgoraMiniappSDK.Client({
+          debug: true
+        })
       }
       //subscribe stream events
       this.subscribeEvents(client);
@@ -570,7 +577,7 @@ Page({
       client.init(APPID, () => {
         Utils.log(`client init success`);
         // pass key instead of undefined if certificate is enabled
-        client.join(undefined, channel, uid, () => {
+        client.join(TOKEN, channel, uid, () => {
           client.setRole(this.role);
           Utils.log(`client join channel success`);
           //and get my stream publish url
@@ -622,7 +629,7 @@ Page({
         Utils.log(`client init success`);
         // pass key instead of undefined if certificate is enabled
         Utils.log(`rejoin with uids: ${JSON.stringify(uids)}`);
-        client.rejoin(undefined, channel, uid, uids, () => {
+        client.rejoin(TOKEN, channel, uid, uids, () => {
           Utils.log(`client join channel success`);
           if (this.isBroadcaster()) {
             client.publish(url => {
@@ -872,4 +879,4 @@ Page({
     // }); 
 
   }
-})
+})

utils/config.js

@@ -1,4 +1,5 @@
-const APPID = "";
+const APPID = "1fa54c6d47074eea98833162a292497a";
+const TOKEN = "";
 
 if(APPID === ""){
   wx.showToast({
@@ -9,5 +10,6 @@ if(APPID === ""){
 }
 
 module.exports = {
-  APPID: APPID
+  APPID: APPID,
-}
+  TOKEN: TOKEN
+}