时间戳

首页 > 解决方案 > 使用 WebRTC 将从网络摄像头捕获的图像上传到服务器

javascript - 使用 WebRTC 将从网络摄像头捕获的图像上传到服务器

问题描述

我正在做一个演示项目，因为我实际上是编码新手，现在遇到了一些问题。基本上我的项目是关于智能考勤，学生需要将他们在手机上拍摄的自拍提交到服务器。这个项目使用 HTML 和 CSS 和 Js。我正在使用表单提交图像，方法是 POST。所以我参考了这个来使用 WebRTC 从我的网络摄像头捕获图像。从我从几个论坛帖子中读到的内容来看，WebRTC 捕获图像并且图像不是图像文件，而是采用 base64 格式。基于多项研究，以下是 JavaScript 中执行捕获过程的代码：

function takepicture() {
  var context = canvas.getContext('2d');
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
    $.ajax({
      url: "/",
      data: data,
      type: 'POST'
      success: function(dataR) {}
      error: function(xhr, status, error) {
        console.log('Error:' + error.message);
      }
    });
  } else {
    clearphoto();
  }
}
HTML Code:

<form method="POST" form class="login100-form validate-form" enctype="multipart/form-data">
  <div class="wrap-input100 validate-input" data-validate="Enter e-mail">
    <input class="input100" type="text" name="staff_email" placeholder="E-mail">
    <span class="focus-input100" data-placeholder="&#xf207;"></span>
  </div>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button>
  </div>
  <canvas id="canvas">
  		    </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box.">
  </div>

我想将拍摄的照片提交到服务器，但它根本没有提交。我可以知道我面临什么样的问题吗？我很乐意提供更多说明。从其他一些帖子中，他们使用 PHP，我并不真正拥有它的知识.....在此先感谢 =)

标签： javascripthtmlwebrtc

解决方案

推荐阅读