Flutter多功能缩放插件zoom_allinonesdk的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter多功能缩放插件zoom_allinonesdk的使用

1. 插件简介

zoom_allinonesdk 是一个用于在Flutter应用程序中集成Zoom All-In-One SDK的插件，支持Android、iOS和Web平台。通过该插件，开发者可以轻松地在Flutter应用中实现Zoom会议的创建和加入功能。

2. 前置条件

在使用 zoom_allinonesdk 之前，您需要完成以下步骤：

  • 创建Zoom账户：确保您已经拥有一个Zoom账户。
  • 创建Meeting SDK应用：登录Zoom App Marketplace，创建一个Meeting SDK应用，并获取客户端ID和客户端密钥。
  • 创建Server-to-Server OAuth应用：创建一个Server-to-Server OAuth应用，获取账户ID、客户端ID和客户端密钥。
  • 配置SDK和OAuth凭证：将获取到的凭证信息添加到配置文件中。

3. 配置示例

const Map<String, String> configs = {
  'MEETING_SDK_CLIENT_KEY': 'YOUR_MEETING_SDK_CLIENT_KEY',
  'MEETING_SDK_CLIENT_SECRET': 'YOUR_MEETING_SDK_CLIENT_SECRET',
  'SERVER_TO_SERVER_CLIENT_KEY': 'YOUR_SERVER_TO_SERVER_CLIENT_KEY',
  'SERVER_TO_SERVER_CLIENT_SECRET': 'YOUR_SERVER_TO_SERVER_CLIENT_SECRET',
  'SERVER_TO_SERVER_ACCOUNT_ID': 'YOUR_SERVER_TO_SERVER_ACCOUNT_ID',
};

4. 平台特定设置

4.1 Android平台设置
  1. 登录Zoom App Marketplace，选择“Meeting SDK”作为应用类型。
  2. 下载Android SDK（版本5.16.0.16310）。
  3. 将下载的 commonlib.aar 和 mobilertc.aar 文件复制到 android/libs 目录下。
  4. 确保文件夹结构正确。
4.2 iOS平台设置
  1. 登录Zoom App Marketplace，选择“Meeting SDK”作为应用类型。
  2. 下载iOS SDK（版本5.16.0.16310）。
  3. 解压后，将 MobileRTC.xcframework 和 MobileRTCResources.bundle 文件复制到iOS模块的相应目录。
  4. 在项目根目录下运行 pod install。
  5. 打开Xcode项目，进入 Targets > Build Phases > Copy Bundle Resources，添加 MobileRTCResources.bundle。
4.3 Web平台设置

  1. 个人会议ID和密码：访问Zoom个人会议室页面，获取个人会议ID和密码。

  2. 添加样式表链接到 index.html 的 <head> 中：

    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.18.0/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.18.0/css/react-select.css">

  3. 在 index.html 的 <body> 中添加必要的JavaScript依赖：

    <!-- Import ZoomMeeting dependencies -->
<script src="https://source.zoom.us/2.18.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.18.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.18.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.18.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.18.0/lib/vendor/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.0/sha256.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.18.0.min.js"></script>
<script src="main.dart.js" type="application/javascript"></script>

5. 使用示例

5.1 创建会议
5.1.1 Android和iOS
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

void createMeeting() {
  ZoomOptions zoomOptions = ZoomOptions(
    domain: "zoom.us",
    clientId: configs["MEETING_SDK_CLIENT_KEY"],
    clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
  );

  MeetingOptions meetingOptions = MeetingOptions(
    displayName: "YOUR_NAME",
    meetingId: "",  // 如果是即时会议，留空；否则填写具体的会议ID
    meetingPassword: "",  // 如果是即时会议，留空；否则填写具体的会议密码
    userType: "1",  // 1 表示主持人
  );

  var zoom = ZoomAllInOneSdk();
  zoom.initZoom(zoomOptions: zoomOptions).then((results) {
    if (results[0] == 0) {
      zoom.startMeeting(
        accountId: configs["SERVER_TO_SERVER_ACCOUNT_ID"],
        clientId: configs["SERVER_TO_SERVER_CLIENT_KEY"],
        clientSecret: configs["SERVER_TO_SERVER_CLIENT_SECRET"],
        meetingOptions: meetingOptions,
      ).then((loginResult) {
        print("loginResult " + loginResult.toString());
      });
    }
  }).catchError((error) {
    print("[Error Generated] : " + error);
  });
}
5.1.2 Web
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

void createMeeting() {
  ZoomOptions zoomOptions = ZoomOptions(
    domain: "zoom.us",
    clientId: configs["MEETING_SDK_CLIENT_KEY"],
    clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
    language: "en-US",  // 可选 - 仅限Web
    showMeetingHeader: true,  // 可选 - 仅限Web
    disableInvite: false,  // 可选 - 仅限Web
    disableCallOut: false,  // 可选 - 仅限Web
    disableRecord: false,  // 可选 - 仅限Web
    disableJoinAudio: false,  // 可选 - 仅限Web
    audioPanelAlwaysOpen: false,  // 可选 - 仅限Web
  );

  MeetingOptions meetingOptions = MeetingOptions(
    displayName: "YOUR_NAME",
    meetingId: "YOUR_MEETING_ID",  // 个人会议ID，Web平台必须提供
    meetingPassword: "YOUR_MEETING_PASSWORD",  // 个人会议密码，Web平台必须提供
    userType: "1",  // 1 表示主持人
  );

  var zoom = ZoomAllInOneSdk();
  zoom.initZoom(zoomOptions: zoomOptions).then((results) {
    if (results[0] == 200) {
      zoom.startMeeting(
        accountId: configs["SERVER_TO_SERVER_ACCOUNT_ID"],
        clientId: configs["SERVER_TO_SERVER_CLIENT_KEY"],
        clientSecret: configs["SERVER_TO_SERVER_CLIENT_SECRET"],
        meetingOptions: meetingOptions,
      ).then((joinMeetingResult) {
        print("[Meeting Status Polling] : " + joinMeetingResult.toString());
      });
    }
  }).catchError((error) {
    print("[Error Generated] : " + error);
  });
}
5.2 加入会议
5.2.1 Android和iOS
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

void joinMeeting() {
  ZoomOptions zoomOptions = ZoomOptions(
    domain: "zoom.us",
    clientId: configs["MEETING_SDK_CLIENT_KEY"],
    clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
  );

  MeetingOptions meetingOptions = MeetingOptions(
    displayName: "YOUR_NAME",
    meetingId: "YOUR_MEETING_ID",  // 个人会议ID，加入会议时必须提供
    meetingPassword: "YOUR_MEETING_PASSWORD",  // 个人会议密码，加入会议时必须提供
    userType: "0",  // 0 表示参会者
  );

  var zoom = ZoomAllInOneSdk();
  zoom.initZoom(zoomOptions: zoomOptions).then((results) {
    if (results[0] == 0) {
      zoom.joinMeting(meetingOptions: meetingOptions).then((loginResult) {});
    }
  }).catchError((error) {
    print("[Error Generated] : " + error);
  });
}
5.2.2 Web
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

void joinMeeting() {
  ZoomOptions zoomOptions = ZoomOptions(
    domain: "zoom.us",
    clientId: configs["MEETING_SDK_CLIENT_KEY"],
    clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
    language: "en-US",  // 可选 - 仅限Web
    showMeetingHeader: true,  // 可选 - 仅限Web
    disableInvite: false,  // 可选 - 仅限Web
    disableCallOut: false,  // 可选 - 仅限Web
    disableRecord: false,  // 可选 - 仅限Web
    disableJoinAudio: false,  // 可选 - 仅限Web
    audioPanelAlwaysOpen: false,  // 可选 - 仅限Web
  );

  MeetingOptions meetingOptions = MeetingOptions(
    displayName: "",
    meetingId: "YOUR_MEETING_ID",  // 个人会议ID，加入会议时必须提供
    meetingPassword: "YOUR_MEETING_PASSWORD",  // 个人会议密码，加入会议时必须提供
    userType: "0",  // 0 表示参会者
  );

  var zoom = ZoomAllInOneSdk();
  zoom.initZoom(zoomOptions: zoomOptions).then((results) {
    if (results[0] == 200) {
      zoom.joinMeting(meetingOptions: meetingOptions).then((joinMeetingResult) {
        print("[Meeting Status Polling] : " + joinMeetingResult.toString());
      });
    }
  }).catchError((error) {
    print("[Error Generated] : " + error);
  });
}

6. 完整示例Demo

以下是一个完整的Flutter项目示例，展示了如何使用 zoom_allinonesdk 插件来创建和加入Zoom会议。

import 'package:flutter/material.dart';
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

const Map<String, String> configs = {
  'MEETING_SDK_CLIENT_KEY': 'YOUR_MEETING_SDK_CLIENT_KEY',
  'MEETING_SDK_CLIENT_SECRET': 'YOUR_MEETING_SDK_CLIENT_SECRET',
  'SERVER_TO_SERVER_CLIENT_KEY': 'YOUR_SERVER_TO_SERVER_CLIENT_KEY',
  'SERVER_TO_SERVER_CLIENT_SECRET': 'YOUR_SERVER_TO_SERVER_CLIENT_SECRET',
  'SERVER_TO_SERVER_ACCOUNT_ID': 'YOUR_SERVER_TO_SERVER_ACCOUNT_ID',
};

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoom All-In-One Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DashBoardScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class DashBoardScreen extends StatefulWidget {
  [@override](/user/override)
  _DashBoardScreenState createState() => _DashBoardScreenState();
}

class _DashBoardScreenState extends State<DashBoardScreen> {
  final TextEditingController _meetingIdController = TextEditingController();
  final TextEditingController _meetingPasswordController = TextEditingController();

  void _createMeeting() {
    ZoomOptions zoomOptions = ZoomOptions(
      domain: "zoom.us",
      clientId: configs["MEETING_SDK_CLIENT_KEY"],
      clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
    );

    MeetingOptions meetingOptions = MeetingOptions(
      displayName: "YOUR_NAME",
      meetingId: "",  // 即时会议留空
      meetingPassword: "",  // 即时会议留空
      userType: "1",  // 1 表示主持人
    );

    var zoom = ZoomAllInOneSdk();
    zoom.initZoom(zoomOptions: zoomOptions).then((results) {
      if (results[0] == 0) {
        zoom.startMeeting(
          accountId: configs["SERVER_TO_SERVER_ACCOUNT_ID"],
          clientId: configs["SERVER_TO_SERVER_CLIENT_KEY"],
          clientSecret: configs["SERVER_TO_SERVER_CLIENT_SECRET"],
          meetingOptions: meetingOptions,
        ).then((loginResult) {
          print("loginResult " + loginResult.toString());
        });
      }
    }).catchError((error) {
      print("[Error Generated] : " + error);
    });
  }

  void _joinMeeting() {
    ZoomOptions zoomOptions = ZoomOptions(
      domain: "zoom.us",
      clientId: configs["MEETING_SDK_CLIENT_KEY"],
      clientSecert: configs["MEETING_SDK_CLIENT_SECRET"],
    );

    MeetingOptions meetingOptions = MeetingOptions(
      displayName: "YOUR_NAME",
      meetingId: _meetingIdController.text,  // 输入的会议ID
      meetingPassword: _meetingPasswordController.text,  // 输入的会议密码
      userType: "0",  // 0 表示参会者
    );

    var zoom = ZoomAllInOneSdk();
    zoom.initZoom(zoomOptions: zoomOptions).then((results) {
      if (results[0] == 0) {
        zoom.joinMeting(meetingOptions: meetingOptions).then((loginResult) {
          print("Joined Meeting");
        });
      }
    }).catchError((error) {
      print("[Error Generated] : " + error);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zoom All-In-One Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _meetingIdController,
              decoration: InputDecoration(labelText: '会议ID'),
            ),
            TextField(
              controller: _meetingPasswordController,
              decoration: InputDecoration(labelText: '会议密码'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _createMeeting,
              child: Text('创建会议'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _joinMeeting,
              child: Text('加入会议'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter多功能缩放插件zoom_allinonesdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter多功能缩放插件zoom_allinonesdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter多功能缩放插件 zoom_allinonesdk 的代码示例。请注意，由于这是一个假设性的示例，你可能需要根据实际插件的API文档进行调整。

首先，你需要在你的 pubspec.yaml 文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  zoom_allinonesdk: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中使用这个插件。下面是一个基本的示例，展示如何初始化并使用 zoom_allinonesdk 插件来实现图片的缩放功能。

import 'package:flutter/material.dart';
import 'package:zoom_allinonesdk/zoom_allinonesdk.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoom All-in-One SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ZoomDemoPage(),
    );
  }
}

class ZoomDemoPage extends StatefulWidget {
  @override
  _ZoomDemoPageState createState() => _ZoomDemoPageState();
}

class _ZoomDemoPageState extends State<ZoomDemoPage> {
  late ZoomController zoomController;

  @override
  void initState() {
    super.initState();
    zoomController = ZoomController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zoom All-in-One SDK Demo'),
      ),
      body: ZoomWidget(
        controller: zoomController,
        child: Image.network(
          'https://example.com/your-image.jpg', // 替换为你的图片URL
          fit: BoxFit.cover,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例：调用插件的某个方法，这里假设是重置缩放级别
          zoomController.resetZoom();
        },
        tooltip: 'Reset Zoom',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

// 自定义ZoomWidget来包装ZoomController和子Widget
class ZoomWidget extends StatelessWidget {
  final ZoomController controller;
  final Widget child;

  ZoomWidget({required this.controller, required this.child});

  @override
  Widget build(BuildContext context) {
    // 注意：这里假设ZoomWidget是插件提供的一个组件，用于处理缩放功能。
    // 实际使用时，请根据插件的API文档进行适配。
    return ZoomView(
      controller: controller,
      child: child,
    );
  }
}

// 假设的ZoomController类，实际使用时请参考插件的API文档
class ZoomController {
  void resetZoom() {
    // 实现重置缩放级别的逻辑
    // 这里是示例代码，实际使用时需要调用插件提供的API
    print('Zoom reset');
  }

  // 可以添加其他控制缩放的方法，如放大、缩小等
}

// 假设的ZoomView组件，实际使用时请参考插件的API文档
class ZoomView extends StatelessWidget {
  final ZoomController controller;
  final Widget child;

  ZoomView({required this.controller, required this.child});

  @override
  Widget build(BuildContext context) {
    // 这里是假设的ZoomView组件实现，实际使用时请根据插件的API文档进行适配
    return GestureDetector(
      onScaleStart: (details) {
        // 处理缩放开始事件
      },
      onScaleUpdate: (details) {
        // 处理缩放更新事件
      },
      onScaleEnd: (details) {
        // 处理缩放结束事件
      },
      child: child,
    );
  }
}

注意：

  1. ZoomController 和 ZoomView 是假设的类，实际使用时需要根据 zoom_allinonesdk 插件的API文档进行替换和实现。
  2. 插件的具体使用方法和API可能会有所不同，因此请参考插件的官方文档进行详细实现。
  3. 示例中的 Image.network 用于加载网络图片，你可以根据需要替换为本地图片或其他Widget。
回到顶部