Notebook

In [ ]:

import panel as pn
pn.extension()

The VideoStream widget displays a video from a local stream (for example from a webcam) and allows accessing the streamed video data from Python.

Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.

Parameters:¶

For details on other options for customizing the component see the layout and styling how-to guides.

format (str): Format of the captured images, either 'png' (default) or 'jpeg'. Choose jpeg if you want the VideoStream to take high frequent snapshots as the image size is much smaller.
paused (boolean): Whether the video stream is paused
timeout (int): Interval between snapshots (if None then snapshot only taken if snapshot method is called)
value (string): String representation of the current snapshot

The VideoStream widget by default simply displays the video stream:

In [ ]:

video_stream = pn.widgets.VideoStream(name='Video Stream')
video_stream

To sync the state of the stream with Python we have two options. First, we can call the snapshot method, which will trigger the value of the widget to be updated:

In [ ]:

video_stream.snapshot()

html = pn.pane.HTML(width=320, height=240)

def update(event):
    html.object = '<img src="'+event.new+'" width=320 height=240 />'
    
video_stream.param.watch(update, 'value')

html

Alternatively, we can create a video stream with a timeout that specifies how frequently the video stream will be updated:

In [ ]:

video = pn.widgets.VideoStream(timeout=100)
html = pn.pane.HTML()
pause = pn.widgets.Toggle(name='Pause')

pause.jslink(video, value='paused')
video.jslink(html, code={'value': """
target.text = `<img src="${source.value}" width=320 height=240 />`
"""})

pn.Column(pause, pn.Row(video, html))

Lastly, the video stream can also be paused from Python:

In [ ]:

video.paused = True

Controls¶

The VideoStream widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

In [ ]:

pn.Row(video_stream.controls(jslink=True), video_stream)