I am trying to capture a photo from a webcam and store it in a FileField or ImageField. But I am not getting how to get the captured image data on request. Please check my HTML template, javascript code, and views.py. Can anyone suggest a way to get this image data captured using javascript, on submitting the form in HTML?

```
class UserDetails(models.Model):
    User_name = models.CharField(max_length= 300)
    User_phone = models.BigIntegerField()
    User_address = models.TextField()
    User_pic = models.FileField(upload_to='documents/%Y/%m/%d')

```

My HTML form

```
{% extends 'base.html' %}
{% load static %}
{% block content %}  

<!DOCTYPE html>
<html lang="en">

<body class="">

      <div class="container-fluid">
        <div class="row">
         <div class="col-md-8">  
            <div id="accordion" role="tablist">

                <form method="POST" action="/usersave/" enctype="multipart/form-data">
                    {% csrf_token %}
                      ....

                   <div class="card-body">
                     <div class="row">
                       <div class="col-md-4 ml-auto mr-auto">
                          <div class="form-group">                                
                             <video id="video" autoplay ></video>                               
                             <canvas id="canvas"></canvas>                                
                       </div>
                 <button id="startbutton1" class="btn btn-outline-secondary btn-sm">Take Photo</button>
                              <script src="{% static "assets/js/capture.js" %}"></script> 
                            </div>

                            .....
                        <div class="img  pull-center" >                                            
                        <img id ="photo" name="photo" alt="The screen capture will appear in this box.">                   
              </form>
          </div>                
        </div>  
     </div>
  </div>

```

Views.py

```
def usersave(request):
if request.method== 'POST':        
    User_name = request.POST["Username"]
    User_phone = request.POST["Userphone"]
    User_address = request.POST["Useraddress"]
    pic = request.FILES["photo"]
    User_info= UserDetails(User_name=User_name, User_phone=User_phone, User_address=User_address, User_pic= pic)
    User_info.save()    
    return render(request, 'some.html')

```

Using this capture.js file I am able to take photo and populate the HTML file in img tag

```
(function() {

    var width = 320;    
    var height = 0;    
    var streaming = false;  
    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton1 = null;

    function startup() {
      video = document.getElementById('video');
      canvas = document.getElementById('canvas');
      photo = document.getElementById('photo');
      startbutton1 = document.getElementById('startbutton1');

      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(function(stream) {
        video.srcObject = stream;
        video.play();
      })
      .catch(function(err) {
        console.log("An error occurred: " + err);
      });

      video.addEventListener('canplay', function(ev){
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth/width);

          if (isNaN(height)) {
            height = width / (4/3);
          }

          video.setAttribute('width', width);
          video.setAttribute('height', height);
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);
          streaming = true;
        }
      }, false);

      startbutton1.addEventListener('click', function(ev){
        takepicture();
        ev.preventDefault();
      }, false);

      clearphoto();
    }

    function clearphoto() {
      var context = canvas.getContext('2d');
      context.fillStyle = "#AAA";
      context.fillRect(0, 0, canvas.width, canvas.height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    }

    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);
      } else {
        clearphoto();
      }
    }
    window.addEventListener('load', startup, false);
  })();

```