Как загрузить изображение с веб-камеры с помощью JavaScript ajax на сайт Django?

Я создаю сайт для трансляций с использованием Django, и мне нужно загрузить изображение с помощью ajax post запроса в форму модели на сайте django. Я работаю со следующим кодом:

Модели:

from django.db import models
from django.contrib.auth.models import User

class Camera(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True, related_name='camera')
    image = models.ImageField(upload_to='live/', null=True, blank=True)

Просмотров:

from .models import Camera
from .forms import CameraForm

@login_required
@csrf_exempt
def golive(request):
    cameras = Camera.objects.filter(user=request.user)
    camera = None
    if cameras.count() == 0:
        camera = Camera.objects.create(user=request.user)
        camera.save()
    else:
        camera = cameras.first()
    if request.method == 'POST':
        print(request.FILES)
        form = CameraForm(request.POST, request.FILES, instance=camera)
        if form.is_valid():
            form.save()
        print("Working")
        return redirect('live:live')
    return render(request, 'live/golive.html', {'object': request.user.camera, 'form': CameraForm()})

@login_required
def live(request, username):
    profile = get_object_or_404(Profile, user__username=username, identity_verified=True, vendor=True)
    cameras = Camera.objects.filter(user=profile.user)
    return render(request, 'live/live.html', {'profile': profile, 'camera': cameras.first()})

Шаблоны:

{% extends 'base.html' %}
{% block content %}
<h1>Go live</h1>
<div id="container">
<video autoplay="true" id="video">
</video>
<canvas id="canvas" width="1028" height="728">
</canvas>
<button id="capture"></button>
</div>
{% endblock %}
{% block javascript %}
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function capture(){
    ctx.drawImage(video, 0, 0, 1024, 728);
    ctx.save();
    canvas.toBlob(function(blob){
        console.log(blob);
    var fileOfBlob = new File([blob], 'camera.png');
        var formData = new FormData();
    formData.append('image', fileOfBlob, 'camera.png');
        $.ajax({
            url: window.location.pathname,
            type: 'POST',
            data: formData,
            success: function (response) {
        console.log("Captured image.")
            },
            cache: false,
            contentType: false,
            processData: false
        });
    },'image/png');
}
setInterval(capture, 10000);
function startup() {
  navigator.mediaDevices.getUserMedia({video: true, audio: false})
  .then(function(stream) {
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });
}
startup();
{% endblock %}

Формы:

from django import forms
from .models import Camera

class CameraForm(forms.ModelForm):
    class Meta:
        model = Camera
        fields = ('image',)

Веб-камера отображается на странице просто отлично, но когда я пытаюсь отобразить {{ camera.image.url }} я вижу, что изображение не было загружено. Как загрузить изображение в виде шара с помощью ajax на сайт django? Может я что-то упускаю?

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User


class Camera(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True, related_name='camera')
    src = models.TextField(default="", null=True, blank=True)
    last_frame = models.DateTimeField(default=timezone.now)