Неисправность при загрузке формы с вводимым пользователем текстом и данными формы захвата видео getUserMedia и мультиплексором - PullRequest
Новая
       21

Неисправность при загрузке формы с вводимым пользователем текстом и данными формы захвата видео getUserMedia и мультиплексором

0 голосов
/ 22 мая 2019

У меня есть форма, которая будет принимать пользовательский ввод текста, описания и изображения. Затем я загружаю данные формы и заставляю multer делать свое дело на стороне сервера. Моя проблема в том, что я хочу дать пользователю возможность выбрать, загружать изображение или использовать камеру и захватывать изображение. Я могу взять загруженное пользователем изображение и отправить его на сервер с текстом и описанием просто отлично.

У меня проблема с захватом изображения с веб-камеры пользователя и использованием его в качестве файла изображения, отправляемого с текстом и описанием. Я пытаюсь придерживаться синтаксиса данных формы, потому что это то, что читает Мультер.

Я где-то читал, что только мобильные телефоны читают <input type="file" accept="image/*;capture=camera" id="example-img" name="userPhoto" class="form-control" placeholder="Enter Example img"> - вот почему я пытаюсь использовать getUserMedia, но я просто не могу понять, как включить его в логику данных формы. Пожалуйста, любая помощь будет очень признателен.

Заранее спасибо!

Вот мой подход: HTML: 

          <div class="form-group">
            <label for="example-text">Example Text</label>
            <input type="text" id="example-text" class="form-control" aria-describedby="example-text"
              placeholder="Enter Example Text" name="title">
          </div>
          <div class="form-group">
            <label for="example-description">Example Description</label>
            <textarea class="form-control" id="example-description" aria-describedby="example-description"
              placeholder="Enter Example Description" name="description"></textarea>
          </div>
          {{!-- adding our own img input to be read by multer --}}
          <div class="form-group">
            <label for="example-img">Example Image</label>
            <input type="file" accept="image/*;capture=camera" id="example-img" name="userPhoto" class="form-control"
              placeholder="Enter Example img">
            <section id="camera">
              <!-- Camera sensor -->
              <canvas id="camera--sensor"></canvas>
              <!-- Camera view -->
              <video id="camera--view" autoplay playsinline></video>
              <!-- Camera output -->
              <!-- Camera trigger -->
              <button id="camera--trigger" class="btn btn-primary">Take a picture</button>
            </section>
            <img id="myImg" src="//:0" alt="your image" width="200">
          </div>
          <button id="submitForm" class="btn btn-primary float-right">Submit</button>
        </form>```

//JS:
const cameraView = document.querySelector("#camera--view"),
  cameraSensor = document.querySelector("#camera--sensor"),
  cameraTrigger = $("#camera--trigger"),
  imgEl = $("#myImg")


//video constraints
var constraints = {
  video: {
    facingMode: "environment"
  },
  audio: false
};

//start camera function
function cameraStart() {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      track = stream.getTracks()[0];
      cameraView.srcObject = stream;
    })
    .catch(function (error) {
      console.error("Oops. Something is broken.", error);
    });
}

//Capture image
function capturePhoto(event) {
  event.preventDefault();
  console.log("Click");
  var capPhoto = input.files[0];
  console.log("This is in the Capture Photo method" + capPhoto);
  cameraSensor.width = cameraView.videoWidth;
  cameraSensor.height = cameraView.videoHeight;
  cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
  imgEl.attr("src",  cameraSensor.toDataURL("image/png"));

  // imgEl.classList.add("taken");
}


//send to server
saveExample: function () {
    var formData = new FormData(postForm[0]);

    console.log(postForm[0]);
    // console.log("This is  form data:  " + JSON.stringify(postForm[0]));
    console.log(formData);
    console.log(formData.entries());
    return $.ajax({
      type: "POST",
      enctype: "multipart/form-data",
      url: "api/posts",
      data: formData,
      processData: false, // Important!
      contentType: false,
      cache: false,
      // data: JSON.stringify(example),
      success: function (returnData) {
        console.log(returnData);
        console.log(data);
      },
      error: function (err) {
        console.log("error", err);
      }
    });
  },

window.addEventListener("load", cameraStart, false);
cameraTrigger.on("click", capturePhoto)
...