Как получить несколько изображений с веб-камеры и сохранить их в базе данных javascript - django

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

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)

forms.py

class UploadDocumentsForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ['docs']
UploadDocumentFormSet = modelformset_factory(Document,form=UploadDocumentsForm,extra=1,can_delete=True)

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})

**NOTE ** my javascript solution doesnt work with formset 

const player = document.getElementById('player');

const docs = document.getElementById('document')


const captureButton = document.getElementById('capture');
 
const constraints = {
  video: true,
};
  
captureButton.addEventListener('click', (e) => {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  context.drawImage(player, 0, 0, canvas.width, canvas.height);
  const imgFormat = canvas.toDataURL();
  docs.value = imgFormat 
  e.preventDefault();
 
});
  
navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    player.srcObject = stream;
  });  
      
    $('#addButton').click(function() {
        var form_dex1 = $('#id_form-TOTAL_FORMS').val();
        $('#images').append($('#formset').html().replace(/__prefix__/g,form_dex1));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_dex1) + 1);    
        
    });       
      
          <button id="addButton" class="px-4 py-1 pb-2 text-white focus:outline-none header rounded-xl">
            {% trans "add new form" %}
            <i class="bi bi-plus"></i>
        </button>  

<form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
                {% for form in images.forms %}
                {{form.id}}          

                <div id="main_form" class="text-lg">
                    <div class="border border-purple-900 mt-2 rounded-lg p-2 text-center">
                        <p>{% for i in obj.takes_by.all %}
                            {{forloop.counter}} : {{i.full_name}}
                            {% endfor %}
                        </p>
                    </div>                                
                </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>

Я могу сохранить только изображение без набора форм, но я не знаю, как изменить выбор файла для захвата изображения? Есть ли какое-нибудь решение, пожалуйста? Спасибо заранее...

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