feat: finclip sdk
wuzhihao
parent
f71cf6205a
commit
be552b8c11
|
|
@ -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'
|
||||
|
||||
4. 下载 [Agora Miniapp SDK](https://docs.agora.io/cn/Agora%20Platform/downloads)，并将 SDK 重新命名为 “mini-app-sdk-production.js"
|
||||
5. 将更名后的 "mini-app-sdk-production.js" 文件保存在本示例程序的 *lib* 文件夹下
|
||||
6. 启动微信开发者工具并导入该示例程序
|
||||
7. 输入频道名，加入频道。邀请你的朋友加入同一个频道，就可以开始视频互通了。
|
||||
const TOKEN = 'some token'
|
||||
4. *lib* 文件夹中包含 mini-app-sdk-production.js 和 finclip-agora-client-sdk.js，分别对应在微信平台和 FinClip 小程序平台，在不同平台运行需要在 *meeting.js* 引入对应的 SDK
|
||||
5. 启动开发者工具并导入该示例程序
|
||||
6. 输入频道名，加入频道。邀请你的朋友加入同一个频道，就可以开始视频互通了。
|
||||
|
||||
**声网的 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) 提交工单
|
||||
|
||||
## 代码许可
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</view>
|
||||
</cover-view> -->
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</view>
|
||||
</cover-view> -->
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"description": "项目配置文件",
|
||||
"packOptions": {
|
||||
"ignore": []
|
||||
},
|
||||
"setting": {},
|
||||
"compileType": "miniprogram",
|
||||
"projectname": "Agora-Miniapp-Tutorial",
|
||||
"isGameTourist": false,
|
||||
"isFulljs": true
|
||||
}
|
||||
|
|
@ -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
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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({
|
|||
// });
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue