Sending Live Streaming Images from Client’s Webcam to Django Server

Introduction

Hi everyone, this is Mohamed Alomar from GeekFeed.

This blog shows how to access client’s Webcam and how to send live streaming images to Django server using Python and JavaScript.

Prerequisites:

To follow this blog, you should have:

  •  Remote Linux server (the used one in this blog is Ubuntu Server 20.04 LTS (HVM) provided by AWS).
  • Windows Machine for the local development(Windows 10 machine is used in writing this blog).

Starting new Django project

Installing Python on Windows

Django is a python framework, thus Python is required to be installed, to install Python on windows follow the instructions in this link (the recommended version is Python3.7 or later).

Installing Django

After having Python installed on your Windows machine, install Django package by using the following  command:

Verifying Djano version

To confirm the version of Django you have, run the following command in Windows shell prompt:

Starting a new Django project

To start a new Django project run the following command:

then navigate to webcam directory and create new Django application by running the following command:

Now, that webcamapp has been created, you have to register this app in the main project, so it will be  included when any tools are run, to do so, open project settings file then add new line to INSTALLED_APPS list as below:

Frontend files:

In order to have your static files accessible by other Django functionalities, You need to create templates and static directories inside webapp folder, and inside these two folders your HTML and JavaScript files will reside.

index.html

create new html file (ex:index.html ) inside webapp/templates folder:

a video tag is used to embed a simple HTML5 video player to your page.
canvas tag is used to draw graphics using scripts.
Now that you have set the required HTML tags ,it is time to add JavaScript code that will constantly embed your Webcam recordings to the created video player.

 

app.js

 

Back-end functionalities:

URLs

Urls.py file is used to manage and redirect the clients requests by returning back the page that the user is looking for,  so urls job to loot at the request URL and then decide which function(view) to fire, and finally return the results back and display it on client’s browser.

Therefore, your urls.py file should contain the following pattern:

 

Views:

View in Django is a function that is triggered from urls.py file, it takes a web request as its input ,then handles that request and returns results as web response.

Your view that will be triggered to handle the coming request should contain the following logic:

Issue to solve(After deploying Django app to production)

After deploying Django app to Ubuntu server, the code to detect and run WebCam won’t work correctly (when using Google Chrome and with many other web browsers).

The reason behind that is Google Chrome does not allow accessing user personal data on insecure connection through http protocol, and  Django runs its application using http protocol, so in order to overcome this Issue, you need to enable https protocol and run your Django application through that  protocol,

in order to do that you need to install django-sslserver module in your Python distribution .

To consider the installed library in your project, you need to specify
django-sslserver name in INSTALLED_APPS list as follows in settings.py:

 

start up django app with runsslserver

When you try to access the deployed Django application in remote session , you will be  prompted  to grant access to the system’s camera , after that the streaming of  images will be sent constantly  to the server side where you can preform the image processing operations you wish.

Conclusion

Before starting a web project , it is  important to choose the right language and  the right framework to use, Django is one of the best  web frameworks that can be used in web development, due to its ability of having smooth communication between client’s system resources (camera ,microphone, .. etc. ) and  backend functionalities, besides being highly secure , scalable and supports cross-platform apps.

 

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
サイト管理者
サイト管理者
株式会社ギークフィードのサイト編集担当者です。 弊社へのお問い合わせ・質問は、お問い合わせページからお願いいたします。

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ