Chỉ là note của cá nhân sau quá trình làm để tránh quên ;) ko phải chia sẻ hướng đi;)))

ABR (adaptive bitrate streaming)

• Khi làm màn hình dạng video feed như Instagram, capcut có rất nhiều video (resolution, quality khác nhau) nếu dùng 1 file gốc để display thì hiệu năng sẽ trở nên rất kém (ứng dụng sẽ nặng lên, tốc độ load từng video sẽ rất chậm tạo cảm giác khó chịu đến người dùng khi tình trạng network kém). Dùng ffmpeg để generate ra file m3u8 (bao gồm các audio theo từng băng thông) hoặc dùng 3th party (AWS….)

ffmpeg

• concat multiple image/video into one video
• add watermark
• transition giữa các clip (xfade, gif, webm, webp…)
• stickers, frame, filter nằm trên bề mặt của mỗi clip
• ghép nhạc vào video
• trim video/image (có 1 tip nhỏ là khi người dùng thêm image thì chúng ta convert nó sang video bằng ffmpeg luôn, đưa về đơn vị video hết. quá trình convert ko tốn thời gian quá lâu)
• animation text: text có animation
• canvas text: text đơn giản có font, có background, shadow (kiểu như subtitle)

transition

• xfade transition: slide, circle crop, fade ….
• advanced transition: 1 số transition mà có thể từ 1 format cụ thể nào đó có thể là png, webm, gif

overlay/filter

• filter
• sticker
• text
• picture in picture

pre-made template

• định nghĩa 1 jsonTemplate hoặc 1 kiểu dử liệu nào đó để cá nhân hệ thống sử dụng

{
   "ratio": "916",
   "timeline": {
        "slides": [
           {"id": 1, "startTime": 0, "endTime": 10.0, "duration": 100.0 , "angle": 90,"filePath": "", "width": 100, "height": 100, "rect": {"l": 0, "t": 0, "b": 100, "r": 100}} 
        ],
        "audio": [
           {"id": 1, "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
        ]
    },
    "overlays": [
          {"id": 1,"type": "TEXT", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
          {"id": 2,"type": "CANVAS", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
          {"id": 3,"type": "STICKER", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
    ],
    "transitions": [
      {"id": 1,"type": "xfade", "name": "fadeWhite", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
      {"id": 2,"type": "advance", "name": "HEART_RAIN.webm", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
    ],
    "frames": [
       {"id": 1, "name": "HEART_RAIN.webm", "filePath": "", "startTime": 0, "endTime": 10.0, "duration": 100.0, "slideId": 1}
    ],
}

camera filter

• Color filter
• LUT filter
• Android: GPUImage
• iOS: Metal

Performance tip

• chỉ thao tác xử lý trên video 720p 1080p hoặc nhỏ hơn, hạn chế xử lý trực tiếp trên video 4k, vì có thể dẫn tới crash nếu memory ko đáp ứng (trim, multiple 4k video, generate thumbnail ….)

• When you already have a Android/iOS native app you want to add more module and use Flutter framework for fast development.
• When you have a flutter application which need to handle some feature on Native (Camera filter, apply water mark to camera, custom camera…) But the native screen need to open Flutter screen again. (Flutter screen -> Native screen -> Flutter screen) (3 screen layers)

1/ Open Flutter screen from Android native:

• Create Activity class from Android native code

And then, only need to start the Flutter activity above, by using:

startActivity(NewFlutterActivity()
        .initialRoute("/yourFlutterRoute")
        .build(this)))

2/ Open Flutter screen from iOS native:

• Create ViewController from iOS swift native

And then, only need to start the Flutter activity above, by using:

let flutterViewController = NewFlutterViewController(project: nil, initialRoute: "/yourFlutterRoute", nibName: nil, bundle: nil)

let appDelegate = UIApplication.shared.delegate as! AppDelegate

appDelegate.navigationController?.pushViewController(flutterViewController, animated: true)

3/ Flutter open Native screen ??

In flutter you can create a MethodChannel and then use this MethodChannel to invokeMethod to native. In native code you need to listen and start screen.

• Flutter code:

static const MethodChannel _channel =
    const MethodChannel('flutter.open.native.screen');

final resultFromNative = _channel.invokeMethod("openNativeScreen")

• Android native code:

MethodChannel mNativeChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, 'flutter.open.native.screen')
mNativeChannel.setMethodCallHandler { call, result ->
    when (call.method) {
        'openNativeScreen' -> {
           // startActivityHere
           // use result to send data back to Flutter, by using: result("hello flutter")

        else -> {
            result.notImplemented()
        }
    }
}

• iOS native code:

mNativeChannel = FlutterMethodChannel(name: 'flutter.open.native.screen',binaryMessenger: flutterViewController!.binaryMessenger)

cameraChannel?.setMethodCallHandler({

(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
if(call.method == "openCamera"){
   // Open iOS native screen here

   // use result to send data back to FLutter by calling: result("hello flutter")
}else{
     result(FlutterMethodNotImplemented)
}})

Use case

• apply filter to camera realtime (live camera preview with multiple filters)
• add watermark and save video with watermark

How to create the screen like the picture above?

I will list for you some things I used to create the screen like Tiktok Video List using Flutter

In this topic I use:

• PageView: show video list in vertical direction, preload next video when the current video hide 70% of screen
• VideoPlayer: play the video file for each video, pause and play, tracking the progress.
• VisibleDetector: in case when the screen disappear we need to stop the video controller (the coming call, user open another screen when push notification come)

PageView

• First of all you need to create a PageController to manage the PageView

final PageController _pageController = PageController(initialPage: 0, keepPage: true);

/// Remember add the scroll listener
_pageController.addListener(_scrollListener);

/// [keepPage] keep the item widget to prevent rebuild

• Create some variable to handle page change logic

int _currentPage = 0;
bool _isOnPageTurning = false; // flag to check the video item in on playing or not

• It is so simple to use PageView by calling the dart code below

PageView.builder(
  scrollDirection: Axis.vertical,
  controller: _pageController,
  itemCount: items.length,
  itemBuilder: (context, index) {
    return VideoItemWidget(
      videoInfo: items[index],
      pageIndex: index,
      currentPageIndex: _currentPage,
      isPaused: _isOnPageTurning,
      videoEnded: (){},
    );
  },
)

• To preload and play the next video when the current video disappear about 70%, let do it by the logic below.

void _scrollListener() {
  if (_isOnPageTurning &&
      _pageController.page == _pageController.page!.roundToDouble(){

    setState(() {
      _currentPage = _pageController.page!.toInt();
      _isOnPageTurning = false;
    });

  } else if (!_isOnPageTurning &&
      _currentPage.toDouble() != _pageController.page) {

    if ((_currentPage.toDouble() - _pageController.page!).abs()>0.7{
      setState(() {
        _isOnPageTurning = true;
      });
    }

  }
}

Those things above are finish to create the PageView to show the List of Video

Now let continue going to the VideoItemWidget widget.

• Create a StatefulWidget class, and remember put the const into the contrucstor to prevent Flutter rebuild this item

class VideoItemWidget extends StatefulWidget {
  final int pageIndex;
  final int currentPageIndex;
  final bool isPaused;
  final void Function()? videoEnded;

const VideoItemWidget({    
    required this.videoInfo,
    required this.pageIndex,
    required this.currentPageIndex,
    required this.isPaused,
    this.videoEnded,
});

@override
State<StatefulWidget> createState() => _VideoItemWidgetState();

• Every single VideoItemWidget will keep their VideoController in its State, So we need to init the VideoController in initState(), and we must dispose the VideoController in dispose().
• To make more performance with the network condition (Please use Adaptive bitrate streaming)

class _VideoItemWidgetState extends State<VideoItemWidget>{ 

  late VideoPlayerController? _videoPlayerController;

@override
  void initState() {
     super.initState();

     _videoPlayerController =
     VideoPlayerController.network(/*Video URL*/);

     _videoPlayerController?.addListener(_videoListener);

     _videoPlayerController?.initialize().then((){});
  }

@override
void dispose() {
  if (initialized && _videoPlayerController != null) {
    _videoPlayerController?.removeListener(_videoListener);
    _videoPlayerController?.dispose();
    _videoPlayerController = null;
    }
  super.dispose();
  }

}

• Now let go to build the item UI for the Video

Firstly you have to check that the video is Landscape or Portrait, If the video is Portrait we render the video with BoxFit.cover, if the video is Landscape we render with BoxFit.fitWidth (These is my opion render you can customize you own)

// To check landscape or portrait it so simple

bool isLandscapeVideo = video.width > video.height;

Render Landscape Video widget, it is simpler than Portrait Video. you can use the aspectRatio of the VideoController

Widget _renderLandscapeVideo() {
  if (!initialized) return Container();
  if (_videoPlayerController == null) return Container();
  return Center(
    child: AspectRatio(
      child: VisibilityDetector(
          child: VideoPlayer(_videoPlayerController!),
          onVisibilityChanged: _handleVisibilityDetector,
          key: Key('key_${widget.currentPageIndex}')),
      aspectRatio: _videoPlayerController?.value.aspectRatio,
    ),
  );
}

Render Portrait Video, you need to check with the Screen size to calculate the the aspectRatio.

var tmp = MediaQuery.of(context).size;

Widget _renderPortraitVideo() {
  if (!initialized) return Container();
  if (_videoPlayerController == null) return Container();

  var screenH = max(tmp.height, tmp.width);
  var screenW = min(tmp.height, tmp.width);
  tmp = _videoPlayerController!.value.size;

  var previewH = max(tmp.height, tmp.width);
  var previewW = min(tmp.height, tmp.width);
  var screenRatio = screenH / screenW;
  var previewRatio = previewH / previewW;

  return Center(
    child: OverflowBox(
      child: VisibilityDetector(
          onVisibilityChanged: _handleVisibilityDetector,
          key: Key('key_${widget.currentPageIndex}'),
          child: VideoPlayer(_videoPlayerController!)),
      maxHeight: screenRatio > previewRatio
          ? screenH
          : screenW / previewW * previewH,
      maxWidth: screenRatio > previewRatio
          ? screenH / previewH * previewW
          : screenW,
    ),
  );
}

• Handle pause when the screen disappear and continue playing when the screen open back

void _handleVisibilityDetector(VisibilityInfo info) {
  if (info.visibleFraction == 0) {

/// The screen is disappeared
   if (initialized &&widget.pageIndex == widget.currentPageIndex &&
        !widget.isPaused
        ) {
      if (_videoPlayerController != null) {
        _videoPlayerController?.pause().then((value) {});
      }
    }

  } else {
   /// The screen is appeared
   _videoPlayerController?.play().then((value) {});

  }
}

That all to create the screen like tiktok video list, this is my idea, and my practice for learning purpose.

Actually we have many way to handle this screen, maybe it better than my idea!

Let share your idea to make it better. I want i learn more to improve

If you want to use it in fast development: you can check my package on pub dev: https://pub.dev/packages/flutter_video_newfeed

================================================================================

??? LÀM THẾ NÀO ĐỂ GIẢI QUYẾT VẤN ĐỀ NÀY ???

1/ Quy trình thực hiện:

• Xây dựng mô hình phát hiện và nhận dạng đối tượng trong ảnh.
• Sử dụng mô hình này trực tiếp trong local của thiết bị (khá tốn kém vì trên mobile bộ nhớ hạn hẹp, có thể sử dụng tensorflow để xây dựng file mô hình phù hợp về bộ nhớ) hoặc Sau khi xây dựng mô hình tiến hành update lên server và ở client sẽ gởi request một tấm ảnh lên server, server tiến hành xử lý và trả về kết quả cho client (cần network)
• Xây dựng một API xử lý nhận ảnh từ phía client.

2/ Chi tiết từng quá trình thực hiện.

2.1 Xây dựng mô hình phát hiện và nhận dạng: Có nhiều cách để phát hiện đối tượng trong ảnh và nhận dạng đối tượng đó. cần tìm hiểu về :

• YOLO detection
• Cascade classifier
• CNN (Convolution neural network)
• Shape and color filter, window search (khá tệ để phát hiện đối tượng bằng cách này :D)
• SVM, kmean, BOW ….
• Pla pla khá nhiều cách để thực hiện xây dựng một mô hình máy học
• **Ở đây mình sẽ chỉ dẫn cách xây dựng từ cơ bản và deloy mô hình lên server để mobile có thể giao tiếp với mô hình này bằng API***

CODE THAM KHẢO XÂY DỰNG MÔ HÌNH NHẬN DẠNG ẢNH :

• file huấn luyện mô hình: main_training.py

1/ Xây dựng mô hình nhận dạng ảnh thông qua:

• Rút trích đặc trưng ảnh bằng SIFT
• Giảm chiều đặc trưng thông qua BOW (bag of visual words)
• Phân loại ảnh dùng SVM

2/ Phía server: dùng Flask + Python để xây dựng API.(Code tham khảo)

Cần cài đặt:

• Python: Ngôn ngữ lập trình phía Server
• Flask: tạo các route để phía client gữi request
• request, jsonify: nhận dữ liệu request từ phía client và dùng jsonify để parse và trả về kết quả cho phía client
• svmutil, opencv: sử dụng mô hình để nhận dạng ảnh
• joblib: đọc và ghi tập tin mô hình.

CHI TIẾT:

-> Flask: phương thức POST

# POST
@app.route(‘/api/post_some_data’, methods=[‘POST’])

-> dùng request.get_json() để parse trường dữ liệu ảnh gởi từ client. Dữ liệu từ client là base64 convert từ ảnh. sau khi nhận từ phương thức POST với trường dữ liệu ảnh với dạng base64, sử dụng Image.open(io.BytesIO(base64.b64decode(b64str))) để chuyển base64 về dữ liệu hình ảnh để cung cấp cho mô hình nhận dạng ảnh

-> Sử dụng mô hình để nhận dạng ảnh trên để dự đoán ra nhãn của ảnh đó và dùng jsonify để gởi kết quả về client với dữ liệu dạng JSON

3/ Phía client: xây dựng ứng dụng android để nhận dạng ảnh.(Code tham khảo):

Ý tưởng của ứng dụng: xây dựng ứng dụng cho phép nhận dạng 1 tấm ảnh chụp hoặc ảnh trong thư viện.

===> Đọc ảnh từ camera hoặc từ Gallery:

• Gallery:

val intent = Intent() intent.type = “image/*” intent.action = Intent.ACTION_GET_CONTENT startActivityForResult(Intent.createChooser(intent, “Select Picture”), PICK_IMAGE_REQUEST)

• Camera:

val intent = Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE) startActivityForResult(intent, CAPTURE_IMAGE_REQUEST)

Nhận ảnh sau khi pick từ Gallery hoặc sau khi chụp:

dữ liệu sẽ được trả về trong biến data: Intent, convert sang Bitmap và lấy Bitmap convert sang Base64 (String)

====> chuyển ảnh sang base64 String:

====> Gữi dữ liệu lên server để dự đoán nhãn của ảnh

Sử dụng thư viện Retrofit để gởi dữ liệu Base64 String lên server thông qua phương thức POST với endpoint /api/post_some_data

*getPredictLabelPost: với đối số truyền vào là 1 body bao gồm trường json để phía client và server dùng để gởi và nhận kết quả:

{
image: ”bdhasbdh7VDGVCSVCD271tdvVDGHVS”
}

**Client sẽ gởi 1 json với key là image kèm value là 1 base64 của ảnh

**Server nhận kết quả từ key là trường image -> convert base64 sang ảnh để nhận dạng.

GỞI request và nhận kết quả trả về:

Lưu ý: hàm excute() cần chạy ở background thread.

Kết quả sau khi nhận dạng ảnh sẽ là biến label.

Tham khảo:

• LIBSVM -- A Library for Support Vector Machines
• Introduction to SIFT (Scale-Invariant Feature Transform) - OpenCV-Python Tutorials 1 documentation
• An introduction to Bag of Words and how to code it in Python for NLP
• Welcome | Flask (A Python Microframework)
• Send Post Request with params using Retrofit

Panorama là một thành công trong lĩnh vực thị giác máy tính. Được xuất bản bởi Matthew Brown and David G. Lowe trong cuốn panoramic image stitching paper in 2007. Kể từ đó nó được áp dụng trong nhiều kể từ nay như GoogleStreetView hoặc điển hình như các ứng dụng chụp ảnh ở các điện thoại cảm ứng hiện nay.

Trong bài này mình sẽ giới thiệu cách mà mình hiểu về một ảnh Panorama được tạo bởi những cách thức, giải thuật nào (chỉ là hiểu biết cơ bản của bản thân).

Cần hiểu một số giải thuật/ khái niệm trong Thị giác máy tính như: Phát hiện góc (giải thuật Harris corner detector), Bộ mô tả của ảnh (Descriptor of keypoints).

** Mô tả về quy trình mà ghép 2 ảnh chụp gần giống nhau để cho ra một ảnh Panorama: Đầu tiên ta tiến hành sử dụng giải thuật Harris Corner Detector để tiến hành tìm các điểm chính trong từng ảnh (các điểm ảnh này là góc), Sau khi trên mỗi ảnh ta đã có các keypoints, sau khi có tập các điểm keypoints trên mỗi ảnh ta tiến hành xây dựng một bộ mô tả cho mỗi ảnh bởi mỗi tập keypoints của mỗi ảnh (bộ mô tả kiểu sẽ nói lên 2 ảnh gần giống nhau sẽ có bộ mô tả gần giống nhau tại mỗi điểm keypoint). Sau khi có 2 bộ mô tả ta tiến hành so khớp 2 ảnh với nhau(keypoint ở ảnh 1 sẽ là keypoint nào ở ảnh 2). Sau bước này ta có được các cặp keypoint matched với nhau cuối cùng áp dụng giải thuật ước lượng chuyển đổi của Ma trận (Transformation Estimation) để tiến hành tìm 1 ma trận mà biến đổi ảnh 1 và ảnh 2 và sau đó ghép ảnh lại và cuối cùng là tối ưu để cho ra 1 ảnh Panorama hoàn thiện.

Một ảnh Panorama sẽ trải qua các bước như sau:

1/ Phát góc trong ảnh (Harris corner detector).

2/ Xây dựng một bộ mô tả cho ảnh.

3/ So khớp giữa 2 hay nhiều ảnh với nhau.

4/ Ghép ảnh.

5/ Tối ưu ảnh hoàn chỉnh panorama (Blending)

1/ Phát góc trong ảnh (Harris corner detector).

Ở bước này nôm na là ta sẽ đi tìm các đặc trưng cục bộ trong ảnh, mà đặc trưng này là các điểm ảnh như một góc cạnh.

Vậy làm sao để biết được pixel trên ảnh đó nó là góc?

Để nói pixel đó là góc ta tiến hành:

Bước 1: Đạo hàm theo theo Gx,Gy trên ảnh đầu vào

Bước 2: Tính các tổng bình phương của các kết quả đạo hàm ở Bước 1

Bước 3: Xây dựng ma trận M và tính giá trị R:

Khi đã có giá trị R ta xác định nó có phải là góc hay không:

• nếu R có giá trị nhỏ thì nó là vùng pixel không có giá trị hay còn gọi là vùng “phẳng".

• nếu R < 0 thì vùng pixel chỉ chứa “cung".

• nếu R lớn thì xác định nó là “góc".

Kết quả ở bước trên ta sẽ có một ảnh như sau:

Code để thực hiện tìm góc(hàm harris_corners())

2/ Xây dựng một bộ mô tả cho ảnh

Sau khi đã tìm ra các keypoints của ảnh, trên từng keypoint ta tiến hành thực hiện mô tả nó.

Có nhiều cách để mô tả một điểm keypoint cho bài toán này. Cách đơn giản nhất là ứng với mỗi điểm keypoint ta tiến hành khởi tạo 1 miếng vá điểm ảnh này (không biết gọi là gì) nôm na như ô vuông xanh xanh hình 4,5,6.

Với mỗi ô vuông xanh (miếng vá) như hình 4 5 6, nó là một ma trận 2 chiều (M hàng N cột)ta tiến hành trải nó thành 1 vector với số chiều là MxN chiều

Ví dụ một ma trận M =3 hàng, N = 3 cột:

1 2 3
4 5 6 => [1 2 3 4 5 6 7 8 9]
7 8 9

Vì thế cứ mỗi keypoint ta sẽ có 1 vector, với N keypoint ta sẽ có N vector. ===> Vậy một bộ mô tả của một ảnh sẽ là N vector như sau:

[ X1 X2 X3 X4 ………. Xsố chiều] => vector keypoint 1
[ X1 X2 X3 X4 ………. Xsố chiều] => vector keypoint 2
.
.
.
[ X1 X2 X3 X4 ………. Xsố chiều] => vector keypoint thứ N

CODE để xây dựng bộ mô tả (sử dụng hàm simple_descriptor() cho cách mô tả đơn giản, và hàm describe_keypoints())

3/ So khớp giữa 2 hay nhiều ảnh với nhau.

Sau khi có bộ mô tả trên từng ảnh như trên, ta tiến hành đi so khớp giữa 2 hay nhiều bộ mô tả đó với nhau bằng các sau:

Ví dụ ở 2 ảnh: tức là ta có 2 bộ mô tả. Vậy điểm nào trên ảnh sẽ khớp với điểm nào?

Ở phương pháp này ta tiến hành như sau:

Với một vector bên ảnh 1 ta đi tìm khoảng cách Euclid với tất cả các vector bên ảnh 2, nó là Matched (khớp nhau) với điều kiện là khoảng cách gần nhất nhỏ hơn khoảng cách gần nhất thứ hai với một tỉ lệ r nhỏ hơn ngưỡng threshold (khó hiểu như …..). OK, mình sẽ mô hình hoá nó như sau:

Ví dụ khoảng các giữa vector1 ảnh A với các vector trong ảnh B lần lượt là distance1–1, distance1–2, distance1–3, distance1–4, ví dụ trong các khoảng cách trên khoảng các giữa vector1 với vector3, vector1 với vector4 là nhỏ nhất để nói keypoint ảnh A có mô tả là vector1 khớp với keypoint có mô tả là vector3 trong ảnh B thì tỉ lệ giữa distance1–3 và distance1–4 phải nhỏ hơn 1 ngưỡng xét thì 2 keypoints đó là khớp với nhau, tương tự các keypoints khác.

Sau bước này ta thu được các cặp keypoints khớp nhau.

Code để thực hiện tính các keypoints khớp nhau(hàm matching_keypoints())

4/ Ghép ảnh.

Ghép ảnh bằng phương pháp ước lượng ma trận chuyển đổi (Transformation Estimation)

Cụ thể như sau: sau Bước 3 ta có tập các điểm khớp giữa 2 ảnh: Keypoint pA ảnh A tại vị trí pixel thứ (Xa,Ya) và Keypoint pB ảnh B tại vị trí pixel (Xb,Yb) hớp nhau ta tiến hành tìm một ma trận biến đổi H sao cho pA.H = pB (đơn giản chỉ áp dụng công thức least-squares solution to a linear matrix equation để tính H)

==> CUỐI CÙNG chỉ cần wrap 2 ảnh này lại bằng cách nào đó cho ngôn ngữ mà bạn lập trình.

Ảnh sau khi ghép lại còn một số chưa hoàn chỉnh, để có một ảnh hoàn chỉnh hơn tiến hành sang Bước 5 Blending

Bước 5: Blending

Tham khảo ở đây để thực hiện vì bước này không có gì để nói, apply my code now

Taì liệu tham khảo:

https://courses.engr.illinois.edu/cs498dwh/fa2010/lectures/Lecture%2017%20-%20Photo%20Stitching.pdf

http://cui.unige.ch/~benbelga/examenThesis_MohamedBENBELGACEM.pdf

Slide bài giảng Thị giác máy tính, PGS TS Phạm Nguyên Khang