Cordova দিয়ে একটি ক্যামেরা অ্যাপ তৈরি করা সম্ভব যা মোবাইল ডিভাইসে ক্যামেরার সুবিধা প্রদান করবে। Cordova প্ল্যাটফর্মের মধ্যে একটি জনপ্রিয় প্লাগইন cordova-plugin-camera রয়েছে, যার মাধ্যমে ক্যামেরার বিভিন্ন ফিচার যেমন ছবি তোলা, ছবি গ্যালারি থেকে বেছে নেওয়া ইত্যাদি করা সম্ভব। এই টিউটোরিয়ালে আমরা Cordova ব্যবহার করে একটি পূর্ণাঙ্গ ক্যামেরা অ্যাপ তৈরি করার প্রক্রিয়া দেখব।
১. প্রোজেক্ট তৈরি করা
প্রথমে, আপনাকে একটি নতুন Cordova প্রোজেক্ট তৈরি করতে হবে। নিচের কমান্ডটি ব্যবহার করুন:
cordova create cameraApp com.example.cameraapp CameraApp
এখানে:
cameraApp- আপনার অ্যাপের নাম।com.example.cameraapp- অ্যাপের প্যাকেজ নাম।CameraApp- অ্যাপের ডিসপ্লে নাম।
এই কমান্ডটি একটি নতুন Cordova প্রোজেক্ট তৈরি করবে এবং আপনি এর মধ্যে কাজ করতে পারবেন।
২. প্ল্যাটফর্ম যুক্ত করা
এখন অ্যাপটি তৈরি হয়ে গেছে, এবার আপনাকে প্ল্যাটফর্ম যুক্ত করতে হবে। আপনি যদি Android প্ল্যাটফর্মে অ্যাপটি রান করতে চান, তাহলে নিচের কমান্ডটি ব্যবহার করুন:
cordova platform add android
iOS প্ল্যাটফর্মের জন্য কমান্ডটি হবে:
cordova platform add ios
৩. ক্যামেরা প্লাগইন ইনস্টল করা
ক্যামেরা ব্যবহার করার জন্য cordova-plugin-camera প্লাগইন ইনস্টল করতে হবে। নিচের কমান্ডটি ব্যবহার করুন:
cordova plugin add cordova-plugin-camera
এই প্লাগইনটি ক্যামেরা ফিচার ব্যবহার করতে প্রয়োজনীয় কোড এবং API প্রদান করবে।
৪. ক্যামেরা অ্যাপের ফিচার ডিজাইন করা
এখন, আমরা একটি সাধারণ HTML UI তৈরি করব যেখানে ব্যবহারকারী ছবি তুলতে পারবেন এবং তা স্ক্রিনে দেখতে পারবেন।
index.html ফাইল:
<!DOCTYPE html>
<html>
<head>
<title>Camera App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app">
<h1>Camera App</h1>
<button onclick="takePicture()">Take Picture</button>
<br>
<img id="image" src="" alt="Captured Image" style="display:none; width: 100%; height: auto;">
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
</body>
</html>
এখানে একটি বাটন রয়েছে যা ব্যবহারকারীর ছবি তোলার জন্য ব্যবহৃত হবে এবং একটি <img> ট্যাগ রয়েছে যেখানে ক্যাপচার করা ছবি প্রদর্শিত হবে।
৫. ক্যামেরা ফিচার কার্যকরী করা
এখন, index.js ফাইলে ক্যামেরা ফিচার কার্যকরী করতে হবে। এটি করতে আমরা navigator.camera API ব্যবহার করব, যা cordova-plugin-camera দ্বারা প্রদান করা হয়।
index.js ফাইল:
function takePicture() {
navigator.camera.getPicture(onSuccess, onError, {
quality: 50, // Image quality (1 to 100)
destinationType: Camera.DestinationType.DATA_URL, // Return image as base64 encoded string
sourceType: Camera.PictureSourceType.CAMERA, // Use camera to take picture
allowEdit: true, // Allow editing the image
targetWidth: 300, // Resize the image
targetHeight: 300 // Resize the image
});
}
function onSuccess(imageData) {
var image = document.getElementById('image');
image.src = "data:image/jpeg;base64," + imageData;
image.style.display = 'block';
}
function onError(error) {
alert('Error: ' + error);
}
এখানে takePicture() ফাংশনটি ক্যামেরা অ্যাপ্লিকেশনটি চালু করবে। onSuccess ফাংশনটি ছবি তোলার পরে ইমেজ ডাটা প্রক্রিয়াকরণ করবে এবং onError ফাংশনটি কোনো ত্রুটি ঘটলে ব্যবহারকারীকে জানাবে।
৬. অ্যাপটি বিল্ড এবং রান করা
এখন, আপনার অ্যাপটি তৈরি হয়েছে। অ্যাপটি বিল্ড করতে এবং রান করতে নিচের কমান্ডগুলি ব্যবহার করুন:
- অ্যাপটি বিল্ড করুন:
cordova build android
- Android ডিভাইসে রান করুন:
cordova run android
iOS ডিভাইসে রান করতে হলে, iOS প্ল্যাটফর্ম যোগ করার পরে নিচের কমান্ডটি ব্যবহার করতে পারেন:
cordova run ios
৭. অ্যাপের উন্নতি এবং বৈশিষ্ট্য বৃদ্ধি
এখন যে অ্যাপটি তৈরি হয়েছে, সেটিতে আপনি আরও অনেক বৈশিষ্ট্য যোগ করতে পারেন যেমন:
- ক্যামেরা ফ্ল্যাশ চালানো: ফ্ল্যাশ চালাতে
flashModeসেটিং ব্যবহার করা যেতে পারে। - ফ্রন্ট ক্যামেরা ব্যবহার:
Camera.Direction.FRONTব্যবহার করে ফ্রন্ট ক্যামেরা অ্যাক্সেস করা সম্ভব। - গ্যালারি থেকে ছবি নির্বাচন: ক্যামেরার পাশাপাশি গ্যালারি থেকে ছবি নির্বাচন করার অপশনও যুক্ত করা যেতে পারে।
এছাড়া, আপনি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য ইমেজ সাইজ কমানোর বা বিভিন্ন ফিল্টার প্রয়োগ করার মতো অতিরিক্ত বৈশিষ্ট্যও যুক্ত করতে পারেন।
সারাংশ
এই টিউটোরিয়ালে আমরা দেখেছি কিভাবে Cordova ব্যবহার করে একটি পূর্ণাঙ্গ ক্যামেরা অ্যাপ তৈরি করা যায়। আমরা cordova-plugin-camera প্লাগইন ব্যবহার করে মোবাইল ডিভাইসের ক্যামেরা ব্যবহার করার জন্য প্রয়োজনীয় কোড এবং কার্যপ্রণালী দেখেছি। অ্যাপটি বিল্ড এবং রান করার পর, আপনি মোবাইল ডিভাইসে ছবি তুলতে এবং সেগুলি প্রদর্শন করতে সক্ষম হবেন।
Read more
