flutter_ali_ott_hotline 1.0.0

A Flutter plugin enabling hotline calls via WebRTC for seamless customer support and communication...

Tích hợp thư viện Flutter

Thông tin cấu hình

• Cấu hình tổng đài: SERVICE_ID, SERVICE_KEY, SERVICE_NAME, SERVICE_AVATAR.

Cấu hình Android

Yêu cầu

• Android SDK version 24 trở lên

Cài đặt thư viện

Cấu hình maven repository trong file build.gradle ở project level:

repositories{
  maven {
      url 'https://maven.pkg.github.com/Ali-Corp/AliOTT'
      credentials {
          username "alicorpvn"
          password "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"
      }
  }
}

Khi báo thư viện trong file build.gradle ở app level:

dependencies {
  implementation 'vn.ali.ott:hotline:1.0.6'
}

Cấu hình iOS

Yêu cầu

• iOS 14.0 trở lên

Thư viện

Pod::Spec.new do |s|
  ....
  s.dependency 'Flutter'
  s.dependency 'ALIOTT/Hotline', '~> 1.0.4'
end

• Sau đó chạy lệnh:

pod install

Cấu hình Xcode project

• Cấu hình Voice over IP:

  • Chọn Target -> Signing & Capabilities
  • Thêm Background Modes nếu chưa có, sau đó đánh dấu chọn Voice over IP

[iOS Enable VoIP]

• Cấu hình quyền sử dụng Microphone:
  • Chọn Target -> Info
  • Thêm key Privacy - Microphone Usage Description và nội dung để xin quyền sử dụng Microphone

[iOS Enable Permission Microphone]

Thư viện

dependencies:
  flutter:
  ...
  flutter_ali_ott_hotline: ^0.0.1

Khai báo thư viện

    import 'package:flutter_ali_ott_hotline/flutter_ali_ott_hotline.dart';

Khởi tạo thư viện

    final _flutterAliOttHotlinePlugin = FlutterAliOttHotline();

    _flutterAliOttHotlinePlugin.startListenEvent();
    _flutterAliOttHotlinePlugin.setEventCallbacks(
        onInitSuccess: () => {debugPrint("Init success")},
        onInitFail: () => {debugPrint("Init fail")},
        onRequestShowCall: (ALIOTTCall call) => {
              setState(() {
                _call = call;
              })
            });
    _flutterAliOttHotlinePlugin.config(
      "production",
      ALIOTTHotlineConfig(
        id: REPLACE_SERVICE_ID,
        key: REPLACE_SERVICE_KEY,
        name: REPLACE_SERVICE_NAME,
        icon: REPLACE_SERVICE_AVATAR,
      ),
    );

Cấu hình tổng đài:

• REPLACE_SERVICE_ID: SERVICE_ID
• REPLACE_SERVICE_KEY: SERVICE_KEY
• REPLACE_SERVICE_NAME: SERVICE_NAME
• REPLACE_SERVICE_AVATAR: SERVICE_AVATAR

Thực hiện cuộc gọi

    _flutterAliOttHotlinePlugin.startHotlineCall(
        phoneApp,
        fullName,
        avatarGuest,
    );    

Trong đó :

• phoneApp: số điện thoại đăng nhập app
• fullName: tên hiển thị
• avatarGuest: url hình ảnh

Sau khi bấm nút gọi trên thì sẽ có 1 event onRequestShowCall trả về thông tin cuộc gọi ALIOTTCall? _call từ thông tin này để vẽ giao diện và xử lý cuộc gọi

• Đăng các event callback trả về thông tin cuộc gọi

    widget.plugin.setCallEventCallbacks(
      onCallStateChange: (state) {
        if (mounted) {
          setState(() {
            handleStageCall(state);
          });
        }
      },
      onCallConnectedChange: (connectedState, connectedDate) => {
        if (mounted)
          {
            setState(() {
              callConnectedState = connectedState;
              connectedTime = connectedDate;
              if (callConnectedState ==
                      ALIOTTCallConnectedState.ALIOTTConnectedStateComplete &&
                  connectedTime != null) {
                handleStageCall(ALIOTTCallState.ALIOTTCallStateActive);
              }
            })
          }
      },
    );    

widget.plugin : FlutterAliOttHotline là plugin để kết nối thư viện cuộc gọi

trong đó, onCallStateChange là trạng thái cuộc gọi diễn ra, gồm các trạng thái:

• ALICMMCallStateEnded : kết thúc cuộc gọi,
• ALICMMCallStatePending : cuộc gọi đang bắt đầu kết nối,
• ALICMMCallStateActive : cuộc gọi đã kết nối

khi bên tổng đài chấp nhận cuộc gọi, hoặc kết thúc cuộc gọi thì có event trả về trong onCallStateChange trả về trạng thái để handle UI

• onCallConnectedChange : là trạng thái kết nối cuộc gọi đang diễn ra
• ALICMMConnectedStateComplete : thành công, và đông thời trả về connectedDate thời gian bắt đầu cuộc gọi
• ALICMMConnectedStatePending : đang kết nối

chi tiết trong CallingPage trong demo đính kèm.

Các sự kiện handle cuộc gọi

kết thúc cuộc gọi

widget.plugin.endCall();

Bật tắt mic

mute = !mute;
widget.plugin.setMuteCall(mute);

Bật tắt loa ngoài

speaker = !speaker;
widget.plugin.setSpeakOn(speaker);

Ví dụ hoàn chỉnh

FlutterExample