Flutter Projelerinde Dart:ffi Kullanarak OpenCV Kütüphanesini Kullanmak.

Muhammed Almaz
Neyasis Technology
4 min readOct 1, 2021

--

Öncelikle bu makale, daha önce yazmış olduğum Flutter projesinde dart ffi kullanımı adlı makalenin devamıdır. Önceki makaleyi okumadıysanız okumanızı tavsiye ederim. Bu makalede dart:ffi kütüphanesini kullanarak OpenCV kütüphanesini direkt C++ engine üzerinden çalıştıracağız. Burada direkt olarak C++ kodları yazacağımızdan çok daha performanslı bir şekilde görüntü işleme yapabileceğiz. Bununla birlikte örnekleri bolca bulunan C++ algoritmalarını Dart, JAVA, Swift veya Objective-C dillerine çevirmek için vakit kaybetmeyeceğiz ve daha performanslı uygulamalar üreteceğiz.

OpenCV kütüphanesi nedir ne işe yarar?

OpenCV kütüphanesi bir görüntü işleme kütüphanesidir. OpenCV ilk olarak C/C++ dilleri ile yazılmış ve diğer dillere köprüler aracılığıyla kullanım olanağı sağlanmıştır. Yani sizlerin Python, Javascript, C# veya JAVA gibi dillerde kullandığınız OpenCV kütüphaneleri temelinde C/C++ kodları çağırır. OpenCV kütüphanesi ile bilgi seviyenize göre her türlü görüntü işleme uygulaması yazabilirsiniz. Bunlara örnek verecek olursak; Fotoğraf efekt uygulaması, Yüz tanıma uygulaması, Bir imgenin görüntü kalitesini arttıran uygulamalar, Video efektleri vb. uygulamalar yazabilirsiniz.

Haydi Başlayalım.

Öncelikle bir flutter projesi oluşturalım.Oluşturduğumuz flutter projesinde bulunan pubspec.yaml dosyası içerisine ffi: 1.1.2 kütüphanesini import edelim. Daha sonra projemizin kök dizininde open_cv adlı bir klasör oluşturalım. Klasör içerisinde my_functions.cpp adlı bir C++ dosyası oluşturalım. Son durumda klasör yapımız aşağıdaki ekran görüntüsündeki gibi olmalıdır.

Oluşturmuş olduğumuz my_functions.cpp dosyasının içerisine aşağıda bulunan kod bloğunu ekleyelim. Aşağıdaki kod bloğunda çok basit bir düzeyde bir fotoğrafın renkli fotoğraftan gri fotoğrafa çevirilmesini sağlayan kod yapısı bulunmaktadır. Bu fonksiyonları dart dilinden çağırıp sonuçlarını flutter projemizde görüntüleyeceğiz.

C++ kodlarımız içerisinde print veya printf metodu ile bir log oluşturamıyoruz. Bundan dolayı platform_log methodunu kullanma ihtiyacı duydum.

iOS Entegrasyonu

OpenCV web sitesinde releases bölümünde bulunan ve ihtiyaç duyduğunuz OpenCV versiyonuna ait iOS pack buttonuna tıklayarak açılan pencereden OpenCV iOS kütüphanesini indirin. iOS uygulamasının C++ kodları görebilmesi için projemizin ios klasörü altında bulunan Runner.xcodeproj adlı dosyaya çift tıklayarak projemizi XCode uygulaması üzerinden açalım. Daha önce oluşturmuş olduğumuz (open_cv) klasörü XCode üzerine sol menüde bulunan dosyaların olduğu bölümün kök dizinine sürükle bırak yapalım.

Karşımıza çıkan ekranda copy items if needed seçili ise lütfen bu seçeneği kaldırarak finish buttonuna tıklayalım. Klasörleri kopyalarsak daha sonra yapmış olduğumuz değişiklikler iOS projelerimize yansımayacaktır. Örneğin my_functions.cpp dosyasında bir değişiklik yaptığınızda iOS projesinde dosyayı referans olarak göstermek yerine kopyaladığınızdan kopyalanan kodlar yani eski kodlar çalışacaktır. Dosyalama yapımızın son hali aşağıdaki gibi olmalıdır.

OpenCV web sitesinden indirmiş olduğumuz opencv-framework adlı zip dosyasını unzip yaparak dosya formatına çevirelim. Dosya formatına çevirilen kodları open_cv dosyasında yaptığımız gibi sürükle bırak yaparak projemize dahil edelim. Burada copy items if needed seçeneğini seçebiliriz. Bizler opencv kütüphanesi içerisinde herhangi bir güncelleme yapmayacağız. Bu işlem sonucunda projemizin dosya yapısı aşağıdaki gibi olmalıdır.

Yukarıda belirtilen adımları başarılı bir şekilde gerçekleştirdiyseniz iOS entegrasyonunuz tamamlanmış demektir.

Android Entegrasyonu

OpenCV web sitesinde releases bölümünde bulunan ve ihtiyaç duyduğunuz OpenCV versiyonuna ait Android buttonuna tıklayarak açılan pencereden OpenCV Android kütüphanesini indirin. Oluşturduğumuz Flutter projesinde android kök dizininde bulunan app klasörü içerisine CMakeLists.txt adlı bir txt dosyası oluşturalım. Oluşturduğumuz dosya içerisine aşağıda bulunan kodları ekleyelim.

CMakeList dosyası ile ilgili detaylı anlatımı bir önceki makalemizde bulabilirsiniz. Son durumda klasör yapımız aşağıdaki gibi olmalıdır.

Daha önce indirmiş olduğumuz OpenCV Android kütüphanesinde bulunan indirilen kütüphane dosyası/sdk/native/libs klasörünün içinde bulunan klasörleri android/app/src/main klasörü içerisine jniLibs klasörü oluşturup ekleyelim. Yani aşağı görselde bulunan dosyaları;

Flutter kök dizininde bulunan ve yolu android/app/src/main olan klasör içerisine taşıyalım. Son durumda proje dosya yapımız aşağıdaki şekilde olmalıdır.

indirilen kütüphane dosyası/sdk/native/jni klasörü içerisinde bulunan include dosyasını projemizin kök dizinine kopyalayalım. Bu işlem sonucunda proje dosya yapımız aşağıdaki gibi olmalıdır.

android/app altında bulunan build.gradle dosyası içerisinde android etiketi altında bulunan defaultConfig etiketine aşağıdaki kodu ekleyelim.

Hemen aynı dosyada android etiketi altına aşağıdaki kodu ekleyelim.

Bu işlemleri yaptıysanız artık NDK aracılığıyla direkt olarak C++ kodlarını çalıştırabiliriz. Artık dart kodları ile C++ kodlarını çağırıp görüntü işlemeye başlayalım.

Flutter projesinden C++ metotlarını çağırma

Flutter projesi altında lib klasörü içerisine ffi.dart klasörünü oluşturalım. Oluşturduğumuz dosya içerisine aşağıdaki kodları ekleyelim. FFI ile ilgili detaylı açıklamaları önceki makalemizde bulabilirsiniz.

Son olarak main.dart dosyamızdaki kodları aşağıdaki kodlar ile değiştirelim.

Yukarıda bulunan kod bloğu ffi.dart dosyasındaki fonksiyonları çağırarak C++ dili ile yazılan OpenCV metotlarını kullanmaktadır. Kullanılan metotlar bir imgeyi renkli formundan gri formuna çevirmektedir.

Daha fazla OpenCV C++ kod örneklerine bu linkten ulaşabilirsiniz.

Projenin kaynak kodlarına aşağıda bulunan github linkinden erişebilirsiniz.

--

--

Muhammed Almaz
Neyasis Technology

I work as a Staff Software Engineer at OMWO Technology.