Can I transfer the value received with getUserMedia to the input file?

Question

I have a html5 web application running under webview.

I want to send data with form enctype multipart/form-data by taking photo from user's camera.

I tried something in input type file but unfortunately when I press "Select File" in all of them, it opens camera and file selection list.

<form action="/upload.asp" method="post" enctype="multipart/form-data">

    <input type="file" id="cameraPic" accept="image/*;capture=camera" /><br>
    <input type="file" id="cameraPic" capture="environment" accept="image/*"/><br>
    <input type="file" id="cameraPic" capture="user" accept="image/*"/><br>
    <input type="file" id="cameraPic" name="profile_pic" accept=".jpg, .jpeg"/><br>

  <input type="submit">
</form>

So I wanted to try to capture and upload the camera with "mediaDevices.getUserMedia".

With the code below, I can take a photo and see it on the page. But how can I send the image from the page to the backend?

Assignment of input file value (I don't think it will be for security reasons)
Find Base64 code and upload it to Textarea and send it.
Putting "Upload" button next to "Take Photo" button.

I am undecided about what to do and how to do it?

I don't know if my path is correct or not.

Another problem is "getUserMedia" back camera not opening.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Take Photo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html,body,video {margin:0;padding:0;}
    button {height:3em;width:10em;left:0;top:0;position:fixed;}
    video {height:3em;width:10em;right:0;top:0;position:fixed;}
    #takePhotoCanvas {width:100vw;height:100vh;left:0;top:3em;position:fixed;}
  </style>
</head>
<body>

<button onclick="takePhotoButton()">Take Photo</button>
<video autoplay=""></video>
<canvas id="takePhotoCanvas"></canvas>



<script>
var imageCapture;

navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;

const track = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
})
.catch(error => console.log(error));


function grabFrameButton() {
  imageCapture.grabFrame()
  .then(imageBitmap => {
    const canvas = document.querySelector('#grabFrameCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
};

function takePhotoButton() {
  imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    const canvas = document.querySelector('#takePhotoCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
};

/* Utils */

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split('px')[0];
  canvas.height = getComputedStyle(canvas).height.split('px')[0];
  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
      x, y, img.width * ratio, img.height * ratio);
};

</script>
</body>
</html>

You may find it helpful to look at these [WebRTC Samples](https://webrtc.github.io/samples/) . They show you some things about image capture and camera selection. — O. Jones, Aug 28 '21 at 15:49
Does this answer your question? [How can I capture an image via the user's webcam using getUserMedia?](https://stackoverflow.com/questions/33975431/how-can-i-capture-an-image-via-the-users-webcam-using-getusermedia) — O. Jones, Aug 28 '21 at 15:50
@O.Jones It does the capturing and transferring the canvas image in my code. But I need to post the image on the canvas to the server. — omerix, Aug 28 '21 at 16:57

score 1 · Accepted Answer · answered Aug 28 '21 at 21:45

This MDN tutorial is worthwhile.

It looks like you need canvas.toBlob().

Something like this might work.

canvas.toBlob(function (blob){
   const fd = new FormData();
   fd.append('fname', 'pic.jpg');
   fd.append('data', blob);
   $.ajax({
       type: 'POST',
       url: '/uploadedendpoint ',
       data: fd,
       processData: false,
       contentType: false
    })
    .done(function(data) {
       console.log(data);
}, 'image/jpeg')

This uses the jquery ajax call to post the encoded jpeg picture from the canvas.

Not debugged ... that's up to you.

Can I transfer the value received with getUserMedia to the input file?

1 Answers1