Djangoで unknown url type: ''" というエラーが出ます。

djangoで、パソコンのカメラにアクセスして写真を撮る機能を作っているのですが、
画像をjavascriptで生成して、postで送信してるのですが、受信先で
src が '' となっていて、unknown url type: ''" というエラーが出ます。

したのjavascriptで Take photo を押して下に画像が表示されているので、canvas に出力できており、 src に dataをセットしているのですが、受信先では ' ' となります。
どなたかアドバイスいただけないでしょうか？

python
1    #全体のコードは下にあります。
2    function takepicture() {
3      var context = canvas.getContext('2d');
4      if (width && height) {
5        canvas.width = width;
6        canvas.height = height;
7        context.drawImage(video, 0, 0, width, height);
8      
9        var data = canvas.toDataURL('image/png'); <----この変換が間違えているのでしょうか？
10        photo.setAttribute('src', data);  <- ここでpostのwebimnにdataをセットしているのですが、受け取るところでは'' ' になります。
11      } else {
12        clearphoto();
13      }
14    }

urls.py


from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.urls import path


from django.contrib import admin
from django.conf import settings
    
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.image_upload, name='image_upload'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

python
1# Import these methods
2from django.core.files import File
3from django.core.files.base import ContentFile
4from django.core.files.temp import NamedTemporaryFile
5from urllib.request import urlopen
6from django.urls import path
7
8from .models import Image
9from django.shortcuts import render,redirect
10
11def image_upload(request):
12    context = dict()
13    if request.method == 'POST':
14        # username = request.POST["username"]
15        username='lobert'
16
17        webimg = urlopen(request.POST["src"])
18        data = webimg.read()
19        image = ContentFile( data, "webcam.jpg" )
20
21        if image is not None:
22            obj = Image.objects.create(username=username, image=image)  # create a object of Image type defined in your model
23            obj.save()
24            context["path"] = obj.image.url  #url to image stored in my server/local device
25            context["username"] = obj.username
26        else :
27            return redirect('/')
28        return redirect('any_url')
29    return render(request, 'index.html', context=context)  # context is like respose data we are sending back to user, that will be rendered with specified 'html file'.

index.js

javascript
1(function() {
2    // The width and height of the captured photo. We will set the
3    // width to the value defined here, but the height will be
4    // calculated based on the aspect ratio of the input stream.
5  
6    var width = 320;    // We will scale the photo width to this
7    var height = 0;     // This will be computed based on the input stream
8  
9    // |streaming| indicates whether or not we're currently streaming
10    // video from the camera. Obviously, we start at false.
11  
12    var streaming = false;
13  
14    // The various HTML elements we need to configure or control. These
15    // will be set by the startup() function.
16  
17    var video = null;
18    var canvas = null;
19    var photo = null;
20    var startbutton = null;
21  
22    function startup() {
23      video = document.getElementById('video');
24      canvas = document.getElementById('canvas');
25      photo = document.getElementById('photo');
26      startbutton = document.getElementById('startbutton');
27  
28      navigator.mediaDevices.getUserMedia({video: true, audio: false})
29      .then(function(stream) {
30        video.srcObject = stream;
31        video.play();
32      })
33      .catch(function(err) {
34        console.log("An error occurred: " + err);
35      });
36  
37      video.addEventListener('canplay', function(ev){
38        if (!streaming) {
39          height = video.videoHeight / (video.videoWidth/width);
40        
41          // Firefox currently has a bug where the height can't be read from
42          // the video, so we will make assumptions if this happens.
43        
44          if (isNaN(height)) {
45            height = width / (4/3);
46          }
47        
48          video.setAttribute('width', width);
49          video.setAttribute('height', height);
50          canvas.setAttribute('width', width);
51          canvas.setAttribute('height', height);
52          streaming = true;
53        }
54      }, false);
55  
56      startbutton.addEventListener('click', function(ev){
57        takepicture();
58        ev.preventDefault();
59      }, false);
60      
61      clearphoto();
62    }
63  
64    // Fill the photo with an indication that none has been
65    // captured.
66  
67    function clearphoto() {
68      var context = canvas.getContext('2d');
69      context.fillStyle = "#AAA";
70      context.fillRect(0, 0, canvas.width, canvas.height);
71  
72      var data = canvas.toDataURL('image/png');
73      photo.setAttribute('src', data);
74    }
75    
76    // Capture a photo by fetching the current contents of the video
77    // and drawing it into a canvas, then converting that to a PNG
78    // format data URL. By drawing it on an offscreen canvas and then
79    // drawing that to the screen, we can change its size and/or apply
80    // other changes before drawing it.
81  
82    function takepicture() {
83      var context = canvas.getContext('2d');
84      if (width && height) {
85        canvas.width = width;
86        canvas.height = height;
87        context.drawImage(video, 0, 0, width, height);
88      
89        var data = canvas.toDataURL('image/png');
90        photo.setAttribute('src', data);
91      } else {
92        clearphoto();
93      }
94    }
95  
96    // Set up our event listener to run the startup process
97    // once loading is complete.
98    window.addEventListener('load', startup, false);
99  })();