Uploading Canvas (web camera snap) to Django Server

Question

I need to take a snap on the client's side with JS [done in 1.] and send it to my server [trial in 2.].

By now, I can send images to the server (media/images/), using the auto-generated button from Django through forms/models and views, which allows a user to choose a pic from his own computer.

The thing here is that I don't want to rely on this process - that forces the user to select an image from his computer. Instead, I want that when the user takes a snap, the program sends it to the server automatically, and the server stores it in a folder.

I am new to Django, so I would really appreciate it if you could provide some code in your answers.

player1.html

JS

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({video: true}) // request cam
.then(stream => {
  video.srcObject = stream; // don't use createObjectURL(MediaStream)
  return video.play(); // returns a Promise
})

function snap () {
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  context.drawImage(video, 0, 0); // This draws the captured image on the canvas
}

player1.html


  
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}

JS

function snap () {
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  context.drawImage(video, 0, 0); // This draws the captured image on the canvas
  console.log('canvas: ', canvas.toDataURL("image/jpeg"))
  var formData = new FormData();
  formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  formData.append("header_image", canvas.toDataURL("image/jpeg"));
  var xhr = new XMLHttpRequest();
  xhr.open( "POST", "http://127.0.0.1:8000/player1");
  xhr.send(formData);
}

views.py

...
from encodings.base64_codec import base64_decode

class AddPostView(CreateView):
    model = Post
    form_class = PostForm
    template_name = 'player1.html'
    # fields = '__all__'

    #def convert(self): I think I need something like this, but well written, to decode the image in here.. how should I write it, tho?
    #    print('here')
    #    base64_decode(self.object)
    #    print('hmm:', base64_decode(self.object))

urls.py

urlpatterns = [
    path('', views.index, name='index'),
    path('player1', AddPostView.as_view(), name='player1'),
]

models.py

class Post(models.Model):
    header_image = models.ImageField(null=True, blank=True, upload_to="images/")

    def get_absolute_url(self):
        return reverse('player1')

forms.py

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('header_image',)  # these fields came from models.py

[Solution? B: LAST HOPE] - I also read from people with the same problem that they added the image on the database, using PHP, etc. So if I do that, how can I then grab it to manipulate it on views...? If someone knows going on that way, all good by me!

Uploading Canvas (web camera snap) to Django Server

0 Answers