Adding Video Player

Dash Python
1

Hi,
I am trying to display web cam live feed as well taking a snapshot when needed.
I started with html.Video(src=’ '), but what should be the source and how to add the button to take the photo.
Thanx in Advance.

1 Like
2

For the src, it depends where the video is hosted. If it is hosted externally, you should be able to just supply the URL:

html.Video(src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm")

If it is saved locally, you’ll need to serve the file locally. In this case, save it in a folder called static:


app.layout = html.Video(src='/static/my-video.webm')

server = app.server

@server.route('/static/<path:path>')
def serve_static(path):
    root_dir = os.getcwd()
    return flask.send_from_directory(os.path.join(root_dir, 'static'), path)

I’m not sure how this would work. Have you built something like this before or do you have an example? I suspect that this would need to be some type of custom Dash plugin (Build Your Own Components | Dash for Python Documentation | Plotly)

4

I’m trying to make a dashboard where in one panel I like to display webcam live feed or any external video cam feed, and there be a button after pressing that a snap will be taken which I want to display in other panel.
Is it possible with dash?

5

You can likely display the video in the Dash app, however I’m not sure if taking a snapshot of that video would be possible with the components that exist.

7

If dash is for simplicity then why I’ve to go for all the server sort of thing to display some Image or video?

8

For security. Dash doesn’t serve files from your files system by default, you have to set that up manually. Otherwise, users might not be aware that their (potentially private) files on their filesystem are accessible.

1 Like
9

Is there any reference from where I can learn about all possible Dash thing?
Something like “https://rstudio.github.io/shinydashboard/structure.html”

10

The docs are here: Dash Enterprise: The Premier Data App Platform for Python

11

hi guys,

I have added a video that I had locally via the method provided by @chriddyp and the video shows up however it has no controls? no play button or scrubber. do these need to be added as attributes of html.Video? thank u

12

Try adding controls=True Here’s what the official html markup should look like: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video, you’ll just need to translate that html markup into dash_html_components markup.

Also, the earlier stuff about the static folder is no longer true - place the video in your assets/ folder and it will be automatically served.