Как захватить изображение с веб-камеры - набор форм модели - django

я пытаюсь получить доступ к веб-камере, сделать снимок и перенаправить изображение в поле image (для сохранения в базе данных - postgresql). вот мой views.py

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        images = UploadDocumentFormSet(request.POST,request.FILES)
        if images.is_valid():            
            for img in images:
                if img.is_valid() and img.cleaned_data !={}:
                    img_post = img.save(commit=False)
                    img_post.booking = obj
                    img_post.save()
            return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
        else:
            messages.error(request,_('take a picture or choose an image'))    
    images = UploadDocumentFormSet(queryset=Document.objects.none())            
    return render(request,'booking/add_img.html',{'obj':obj,'images':images})

my models.py

class Document(models.Model):
    booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
    docs = models.ImageField(upload_to=upload_docs)
    def __str__(self):
       return str(self.booking.id)

my forms.py

class UploadDocumentsForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ['docs']

а это мой html + js

const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');

const constraints = {
  video: true,
};

captureButton.addEventListener('click', () => {
  // Draw the video frame to the canvas.
  context.drawImage(player, 0, 0, canvas.width, canvas.height);
});

// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    player.srcObject = stream;
  });
            <form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
                {% for form in images.forms %}
                {{form.id}}
                {{form.errors}}                

                <div id="main_form" class="text-lg">
                </div>                             
                <hr>
                {{images.management_form}}
                <div class="form-group mt-3" id="images">
                    {{ form.docs | add_class:'form-control-file' }}
                </div>

                <video id="player" controls autoplay></video>
                <button id="capture">Capture</button>
                <canvas id="canvas" width=320 height=240></canvas>
               
                {% endfor %}
                <div class="form-group mt-3" id="formset" style="display: none;">
                    {{ images.empty_form.docs | add_class:'form-control-file' }}

                </div>

                <button class="header pt-2  text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
            </form>

я не знаю как присвоить захваченное изображение моему form.docs в форме?! нет ли какого-нибудь способа перенаправить его в поле в db пожалуйста?

Вернуться на верх