1

I'm trying to create a javascript application where it takes the picture using ALPhotoCapture in Pepper and displays the picture as a part of a web page in the Pepper Tablet. I'm able to make the Pepper take the Picture on FrontTactileTouch event and the picture is stored in /home/nao/recordings/cameras/picture.jpg. However, When I'm using the Javascript to load the Picture. The Browser doesn't allow me to show the picture on the tablet. On Googling, I found that browsers don't allow us to load the local pictures on the web page because of security issues. Does Pepper run Chrome Browser?

Just wanted to know if there is any workaround to display the local images in Pepper Tablet Web page. I've come across this ( https://community.ald.softbankrobotics.com/en/forum/display-image-peppers-tablet-8658 ) where They take a picture using Choregraphe and show it in the Tablet. But, this way the picture occupies the whole tablet. I just want the picture to be a part of the web page. Any suggestions are much appreciated.

rico
  • 184
  • 5
srinu634
  • 43
  • 9
  • May you can save the picture directly in the http folder... then there should be no more security issues – Oswald Jun 13 '18 at 05:55

1 Answers1

0

if your application id srinu634app (be sure that's the actual package id, not just the name), you can save your image to:

/home/nao/.local/share/PackageManager/apps/srinu634app/html/img/photo1.png

... and then, in your project's html folder, you can have an index.html referencing img/photo1.png in an <img> (you could have the robot notify the javascript when an image is taken and what it's name is etc.).

Note that it's also possible to directly get the image data from javascript, without ever creating a file - see here for some discussion of how to do that: https://community.ald.softbankrobotics.com/en/forum/how-appear-naos-camera-view-using-qimessagingjs-webpage-6287

(the use case is a video stream; doing a static image like you do is simpler)

Emile
  • 2,946
  • 2
  • 19
  • 22
  • Thank you so much for the reply.Appreciate it. For some reason, I am not able to get the picture loaded in my html with the shared path ( I verified my app ID and ssh also shows the image in the described folder ). I'm following the second approach by using the ALVideo where I got the raw data. Thanks for the comments. Your comments are extremely helpful and I really appreciate it. My use case is that I take a picture and send it to a API for a good user experience, any suggestions on how to go about that? – srinu634 Jun 13 '18 at 16:21
  • 1
    Make sure you display the image using and not the full path, as the tablet cannot access the storage content. – JLS Jun 18 '18 at 15:35
  • Hi Guys, I tried the approach using the following path and it didn't work. Is there any other to display the image in the Pepper? my windows.local.pathname in javascript shows that the path name is /apps/.lastUploadedChoregrapheBehavior , Should I try to store the image in this path rather than the PackageManager path? – srinu634 Jul 18 '18 at 16:43
  • No, /apps/.lastUploadedChoregrapheBehavior is not a file path, it's an url path that is mapped to /home/nao/.local/share/PackageManager/apps/.lastUploadedChoregrapheBehavior, which is the path to which your app is installed when you hit "play" in Choregraphe. The problem is that the package ID depends of how you install it, you can get it from inside a choregraphe box with self.packageUid(). – Emile Jul 24 '18 at 08:02