مثال على فتح الكاميرا وتصوير الشاشة والتحميل

دون الدخول في التفاصيل، خطوة كاملة لفتح الكاميرا باستخدام JS والتقاطع والتحميل إلى الخادم

1. يستخدم استخدام الكاميرا بشكل رئيسي طريقة getUserMedia، ثم يتم وضع تدفق الوسائط المكتسب في علامة video

2. يستخدم رسم الصورة في canvas لاستخراج الصورة، حيث يتم رسم محتوى video في canvas باستخدام طريقة drawImage

3. قم بنقل المحتوى المقطوع إلى الخادم، قم بتحويل محتوى canvas إلى شكل base64 ثم قم بتحويله إلى صورة من خلال file_put_contents في الخادم (PHP)

على الرغم من ذلك، يجب الانتباه إلى أن استخدام الكاميرا في متصفحات غير Chrome قد يحدث بعض المشاكل، قد تكون هذه مشكلة قديمة أيضًا، لذا فإن الكود التالي يعتمد بشكل رئيسي على Chrome

مثل الأخطاء التي تحدث في أحدث إصدار من Firefox، لا أعرف لماذا

1. فتح الكاميرا

getUserMedia لديه إصدار جديد وإصدار قديم، يُنصح باستخدام الإصدار الجديد

الإصدار القديم يوجد تحت عنصر navigator، ويعتمد على متصفح مختلف

 // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 

إذا (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}
    }, function(err) {
      console.log(err);
    });
  } 

المعامل الأول يشير إلى استخدام الفيديو (video) أو الصوت (audio)

المعامل الثاني يشير إلى استدعاء النجاح بعد الاستدعاء، حيث يحتوي على معامل (MediaStream)، في الإصدار القديم يمكنك إغلاق الكاميرا مباشرة عن طريق استدعاء MediaStream.stop()، ولكن في الإصدار الجديد تم إزالته. تحتاج إلى استخدام MediaStream.getTracks()[index].stop() لإغلاق المسار المطلوب

المعامل الثالث يشير إلى استدعاء استدعاء الفشل

الإصدار الجديد يوجد تحت عنصر navigator.mediaDevices

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}
    }).catch(function(err) {
      console.log(err);
    })
  } 

مثل الإصدار القديم، ولكن يرجع هذا النوع إلى عنصر Promise، يمكنك استخدام then و catch لتعيين استدعاءات النجاح والفشل

على الرغم من أنه يجب الانتباه إلى أن MediaStream.getTracks() يعيد قائمة Tracks مرتبة بشكل معكوس بناءً على أول معامل

مثل الآن تم تعريف

{
  video: true,
  audio: true
} 

إذا كنت ترغب في إغلاق الكاميرا، فتحتاج إلى استدعاء MediaStream.getTracks()[1].stop();

بالمثل، 0 يشير إلى مسار الـ audio

استخدام createObjectURL لتحويل بيانات تدفق الوسائط إلى علامة الفيديو، يمكنك حفظ بيانات تدفق الوسائط الحية (ويمكنك أيضًا عرض الصورة في الوقت الحقيقي بسهولة)

لا يدعم objekt URL في إصدارات الويبكيت قدماً، يجب استخدام objekt URL

　　<video width="200" height="150"></video>
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">قطع الصورة</button>
    <button id="close">إغلاق الكاميرا</button>
    <button id="upload">رفع الصورة</button>
  </p>
  <img id="uploaded" width="200" height="150" /> 

2. قطع الصورة

يمكنك كتابة المحتوى

 // قطع الصورة
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false); 

3. إغلاق الكاميرا

 // إغلاق الكاميرا
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. رفع الصورة المقطعة

canvas.toDataURL('image/png')

// تحميل الصورة المقطعة
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false); 

أما الخادم الخلفي (PHP) فهو يحول المحتوى المكتسب إلى ملف صورة ويحفظه

يجب ملاحظة أن يجب إزالة معلومات الرأس من base64 قبل الحفظ، وإلا يبدو أن الصورة معطوبة ولا يمكن فتحها

 <?php
  $snapData = $_POST['snapData'];
  $snapData = str_replace('data:image/png;base64,', '', $snapData);
  // $snapData = str_replace(' ', '+', $snapData);
  $img = base64_decode($snapData);
  $uploadDir = 'upload/';
  $fileName = date('YmdHis', time()) . uniqid();
  if (!(file_put_contents($uploadDir . $fileName, $img))) {
    echo json_encode(array('code' => 500, 'msg' => 'فشل في إرسال الملف'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'تم إرسال الملف بنجاح', 'path' => $uploadDir . $fileName));
  }
?> 

كود JS كامل

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function $(elem) {
    return document.querySelector(elem);
  }
  // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
  var canvas = $('canvas'),
    context = canvas.getContext('2d'),
    video = $('video'),
    snap = $('#snap'),
    close = $('#close'),
    upload = $('#upload'),
    uploaded = $('#uploaded'),
    mediaStreamTrack;
  // 获取媒体方法（新方法）
  // 使用新方法打开摄像头
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}
    }).catch(function(err) {
      console.log(err);
    })
  }
  // 使用旧方法打开摄像头
  else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}
    }, function(err) {
      console.log(err);
    });
  }
  // قطع الصورة
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // إغلاق الكاميرا
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // تحميل الصورة المقطعة
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);
  </script>

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تدعموا تعليمات النطق.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص المالك الأصلي، المحتوى تم إضافته من قبل مستخدمي الإنترنت بشكل تلقائي، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي ولا يتحمل أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، إذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم فوراً.