Как захватить изображение с веб-камеры - набор форм модели - 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 пожалуйста?