Displaying a video stream

Anvil Q&A
1

I’m trying to display a video stream from my Raspberry Pi camera onto my Anvil webapp.

I can do the following to display a static image from the camera:

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    self.image_1.source = anvil.server.call('takepic')

And the corresponding server code on my Pi is:

@anvil.server.callable
def takepic():
    camera.capture('foo.jpg')
    return anvil.media.from_file('foo.jpg')

What I would instead like to do is something like:

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    self.image_1.source = anvil.server.call('startmovie')

And on the Pi:

@anvil.server.callable
def startmovie():
	my_stream = BytesIO()
	camera.start_recording(my_stream, format = 'mjpeg')
	return my_stream

But of course Anvil is expecting to receive a file from the startmovie() function, rather than a BytesIO object, so I get the following error:

anvil.server.SerializationError: Cannot serialize return value from function. Cannot serialize <class '_io.BytesIO'> object at msg['response']
at Form1, line 12

And now I’m stuck.

2

I’m not much help, but looking to create something similar. Did you ever find a solution to this?

3

Did you ever find solution for this ? I am also trying to video stream on anvil but stuck with same error.
If you found a solution to this can you please share code

4

Making this work from the server-side is not possible. You need to use javascript on the client-side to make it work.

I recently made this app which does the job of recording audio Anvil | Login

You can similarly try to adapt this example for videos as well. This link might be of some help Record Video From Camera using Javascript (usefulangle.com)

5

Thank you for this.
Actually I am trying to make a face recognition app on anvil . I am trying to capture frames using cv2 and then using face recognition library for face comparing and detection and I want to stream those frames in anvil in continuous series but problem I am facing is that it is taking a lot time to switch from one frame to other . It is not displaying as a face detection app but rather displaying those detected frames one by one after some interval.

Is there a way to make this continuous and fast ?

6

I am still not completely sure what you mean but I think you will benefit from storing the video as a media object in a data tables.

I will also suggest that you create a separate post for it.

7

One of the reasons why open-cv / CV2 is fast is that it is written in C++ and accessible in python through CPython, in your search for a solution keep in mind that:

  1. The more round trips and conversions between physical systems you have, the greater lag your code will experience.
  2. Most browsers only natively run javascript, html, php, and WASM / webassembly . (I’m sure i’m forgetting some less used ones, JAR containers I dunno?)
  3. So if you want to skip sending streaming video back and forth or at least use the browser to draw bounding boxes directly on the screen, I would research implementations of CV2 support in the browser, I think Rust compiles to WASM? Not sure if it has implemented CV2.

Edit:
Maybe this is even an option to be used with anvil:

8

I have created a post for this doubt. You can clone my app and look at the python code

9

Can I use cv2 on browser?

10

I will answer in that other post you created.