0

I have a lot of images in my project media folder,which is saved by using a sdk camera(Alliedvision).I need to stream these images to html page one by one whenever the camera saves it in the media folder.Is it possible to stream images in django ?

  • You simply want to display an image in one of your templates? And if a new one is added change the current one for the new one? – Edwin Cruz Jun 25 '20 at 15:05
  • yes,i have to do the same...change the current one for the new @EdwinCruz –  Jun 25 '20 at 15:08
  • are images uploaded to folder directly or using django server ? – Pankaj Sharma Jun 25 '20 at 15:20
  • images should upload using django server..@PankajSharma –  Jun 25 '20 at 15:22
  • Websockets can help you in this, create a ws connection with js on client side and on server side use `post_save` to trigger a send event on ws (url of that image). – Pankaj Sharma Jun 25 '20 at 15:59
  • this can help you out - https://stackoverflow.com/questions/46614541/using-django-signals-in-channels-consumer-classes – Pankaj Sharma Jun 25 '20 at 15:59
  • django channels for using websocket with django - https://channels.readthedocs.io/en/latest/ – Pankaj Sharma Jun 25 '20 at 16:01
  • Is it possible to do this with javascript listeners? @PankajSharma –  Jun 26 '20 at 02:37
  • @Sharon could you clarify me the scenario ? You want to show the latest image uploaded by any client or by that same client ? If another client uploads image then js listeners can't help you in that otherwise, yes. Let me know scenario I will help you. – Pankaj Sharma Jun 26 '20 at 02:51
  • My django project media folder have lot of images which is saved by using allied vision camera. The scenario is whenever i press camera ON in html with the help of subprocess this allied vision camera will ON and will save the images in media folder. Now my client wants to stream one by one images in the same html whenever camera saves the image @PankajSharma –  Jun 26 '20 at 02:58
  • @Sharon I wanted to ask If I upload a image from another client then should new Image be reflected in both clients or only on that client from which it is uploaded ? And how do you save images from html ? – Pankaj Sharma Jun 26 '20 at 03:05
  • i can explain, **Scenario** Camera ON button click in html >>> django view call via ajax >>> subprocess.popen for run the execution file of sdk camera >>> camera take the images and save it inside media folder Now I want this images inside media folder should stream in html page one by one @PankajSharma –  Jun 26 '20 at 03:10

3 Answers3

0

When you save Image from ajax return all images url in list and onsuccess create dynamic html element i.e <img src="url">.

$.ajax({
        url: url,
        type: "POST",
        data: {
            image: image_data
        },
        success: function(response) {
          let images = response.images;
          $.each(images,function(index,url){
             $(".img-container").append("<img src="+url+">");
         });
        }
    })

in your views return images urls as - return JsonResponse({'images':[image.url for image in ImageModel.objects.all()]})

Pankaj Sharma
  • 2,185
  • 2
  • 24
  • 50
  • Thanks for the response. I tried this in my project. but all the images are displaying near to near. This is not what i asked,I need one image at a time and it should change frame by frame in the same –  Jun 26 '20 at 04:51
  • @Sharon you got the url of images, now handle it as you want, may be you can use any Carousel library like - https://www.w3schools.com/howto/howto_js_slideshow.asp or else give id to img attr and change the url after a time interval, now it is the question of javascript and how do you handle the images, I have answered how you can render images from django. – Pankaj Sharma Jun 26 '20 at 05:06
  • Thanks for the guidance. It is working now..Now the challenge is to deal with image size,that i can do with any of the compression technique . –  Jun 27 '20 at 03:25
-1

I would suggest you make a Ajax script that renders that gets the information for you. In your views you make a view that returns the url of the last image in the database and use ajax to simply make a get request to that view and if it is any different from what is already there it will change the source.

Edwin Cruz
  • 507
  • 3
  • 10
-2

You can approach the problem with the following steps:

  1. Watch the media folder for new images using a library like watchdog https://pypi.org/project/watchdog/
  2. Invoke a django management command when there are new images and notify clients to update. Using django channels you can have the clients subscribe to a channel which can be notified by logic in the management command.

For channels implementation refer to the channels docs https://channels.readthedocs.io/en/latest/introduction.html

Harrison
  • 188
  • 2
  • 9