Захват нескольких изображений с веб-камеры - django + js

У меня есть проект, в одной из моделей есть поле image для загрузки изображения, я сделал его modelformset_factory для загрузки нескольких изображений, но с веб-камеры! Есть ли какие-нибудь советы или модули django для этого? Я пробовал это, но я не могу сделать больше одной фотографии, и не могу присвоить сделанную фотографию в ImageField?

моя модель загрузки изображений

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']

UploadDocumentFormSet = modelformset_factory(Document,form=UploadDocumentsForm,extra=1,can_delete=True)

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


    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', (e) => {
      // Draw the video frame to the canvas.
      context.drawImage(player, 0, 0, canvas.width, canvas.height);
      e.preventDefault();
    });
  
    // Attach the video stream to the video element and autoplay.
    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>

но я не уверен, как этого добиться! спасибо за помощь

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