Using dash to prototype an iPhone camera app

Dash Python
1

I would like to use Dash to prototype a minimum viable product for an iOS app. I want to use dash because I am pretty good at building dash apps and I do not have much skills in building iOS apps. Before partnering with an iOS developer I want to test out the concept.

Using bootstrap the UI really nicely translates into mobile. The one key feature I am trying to figure out is implementing a camera.

I need users to be able to click on a button that will open the iPhone camera. In the backend I need to write that image to a database. I found this code snippet that I think will do the trick (html - How to access a mobile's camera from a web app? - Stack Overflow):

 <input type="file" accept="image/*" capture="camera">

What I am unsure of is how I pass this image into the dash app? Has anyone done something similar before?

2

I figured it out. You can use dcc.Upload. When you open the device on a mobile site and press the upload button it automatically gives you the option to take a picture or video. You can then access the video through the contents attribute.

I will come back here and post a working example.

3

In case anyone is interested here is the working code:

And here is the code if you do not want to jump into the GitHub repo:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

server = app.server

app.layout = html.Div([
    dcc.Upload(id='upload', children=html.Button('Upload an image')),
    html.Img(id='image', width=500)
])


# Preview image or video after taking without sending to the server. This is
# helpful because the app is much slower if you send content to the server
# first.
app.clientside_callback(
    """
    function(contents) {
        // document.write(contents)
        if (contents === undefined) {
            return "";
        } else {
            return contents;
        }
    }
    """,
    Output('image', 'src'),
    Input('upload', 'contents')
)


if __name__ == "__main__":
    app.run_server(debug=True)python
1 Like