Receive camera picture from user in Django

Abdalsamad Keramatfar
2 min readJan 17, 2022

As a data scientist it is possible that you need to make some web apps at least as prototypes. Also, since the data science community use python oftentimes, Django is a good solution for the situation. albeit, there is flask too, but I personally prefer Django. Many of the machine learning systems serve as an input-output box where the trained model in serving receives some expected input data and returns some results. For an example see here. This app receives your voice (input data) and returns the model prediction (output).

Since image data constitute a great portion of data that data scientists working with them, it is important to know how to receive this kind of data through your Django app. So, in this post I will show how to receive camera pictures from user in Django.

I think that you know the basics of Django and in this stage your app is running well. First we add a url pattern for our new views function:

path(‘camera’, views.camera, name = ‘camera view’)

Chrome and the other modern web browsers does not let you to work with some functionality you need (getUserMeida) under http, so you need an ssl server. I used this package. It is simple and effective. Just follow the instructions in the page. Then we need an html template. The main part is to send the received image by a form field:

<input id=”webimg” value=”” name=”src” type=”text” style=”display: none;”>

Also I use some styles. Then I use JavaScript to setup the camera. The code is explained here. I have changed it a bit to hold the picture data in the value of the above input and then receive it at my views function (camera). Here the function receives the value field of the above input and saves it on the disk. And That's it.

Sources:

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

https://gist.github.com/2ndmouse/9885489

https://stackoverflow.com/questions/62049649/capture-web-camera-image-and-upload-database-using-django

--

--