I'm trying to capture several images and save into my django database , but i dont know how to catpture multiple images . i want dynamically add new canvas for new capturing image
this is my html and js to capture images
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;
});
<!-- begin snippet: js hide: false console: true babel: false --> <form action="" method="POST" enctype="multipart/form-data" dir="ltr">{% csrf_token %}
<input type="text" name="documents" id="document">
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<button class="header pt-2 text-white px-4 p-1 rounded-lg mt-4">{% trans "save" %}</button>
</form>im not sure if it is possible or not ? please if you know something in this case let me know , i appreciate your helps ..