mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-05 01:49:23 +08:00
128 lines
3.6 KiB
Markdown
128 lines
3.6 KiB
Markdown
# Video Streaming
|
|
|
|
## Input/Output Streaming
|
|
|
|
We already saw this example in the [Quickstart](../../#quickstart) and the [Core Concepts](../streams) section.
|
|
|
|
=== "Code"
|
|
|
|
``` py title="Input/Output Streaming"
|
|
from fastrtc import Stream
|
|
import gradio as gr
|
|
|
|
def detection(image, conf_threshold=0.3): # (1)
|
|
processed_frame = process_frame(image, conf_threshold)
|
|
return processed_frame # (2)
|
|
|
|
stream = Stream(
|
|
handler=detection,
|
|
modality="video",
|
|
mode="send-receive", # (3)
|
|
additional_inputs=[
|
|
gr.Slider(minimum=0, maximum=1, step=0.01, value=0.3)
|
|
],
|
|
)
|
|
```
|
|
|
|
1. The webcam frame will be represented as a numpy array of shape (height, width, RGB).
|
|
2. The function must return a numpy array. It can take arbitrary values from other components.
|
|
3. Set the `modality="video"` and `mode="send-receive"`
|
|
=== "Notes"
|
|
1. The webcam frame will be represented as a numpy array of shape (height, width, RGB).
|
|
2. The function must return a numpy array. It can take arbitrary values from other components.
|
|
3. Set the `modality="video"` and `mode="send-receive"`
|
|
|
|
## Server-to-Client Only
|
|
|
|
In this case, we stream from the server to the client so we will write a generator function that yields the next frame from the video (as a numpy array)
|
|
and set the `mode="receive"` in the `WebRTC` component.
|
|
|
|
=== "Code"
|
|
``` py title="Server-To-Client"
|
|
from fastrtc import Stream
|
|
|
|
def generation():
|
|
url = "https://download.tsi.telecom-paristech.fr/gpac/dataset/dash/uhd/mux_sources/hevcds_720p30_2M.mp4"
|
|
cap = cv2.VideoCapture(url)
|
|
iterating = True
|
|
while iterating:
|
|
iterating, frame = cap.read()
|
|
yield frame
|
|
|
|
stream = Stream(
|
|
handler=generation,
|
|
modality="video",
|
|
mode="receive"
|
|
)
|
|
```
|
|
|
|
## Skipping Frames
|
|
|
|
If your event handler is not quite real-time yet, then the output feed will look very laggy.
|
|
|
|
To fix this, you can set the `skip_frames` parameter to `True`. This will skip the frames that are received while the event handler is still running.
|
|
|
|
``` py title="Skipping Frames"
|
|
import time
|
|
|
|
import numpy as np
|
|
from fastrtc import Stream, VideoStreamHandler
|
|
|
|
|
|
def process_image(image):
|
|
time.sleep(
|
|
0.2
|
|
) # Simulating 200ms processing time per frame; input arrives faster (30 FPS).
|
|
return np.flip(image, axis=0)
|
|
|
|
|
|
stream = Stream(
|
|
handler=VideoStreamHandler(process_image, skip_frames=True),
|
|
modality="video",
|
|
mode="send-receive",
|
|
)
|
|
|
|
stream.ui.launch()
|
|
```
|
|
|
|
## Setting the Output Frame Rate
|
|
|
|
You can set the output frame rate by setting the `fps` parameter in the `VideoStreamHandler`.
|
|
|
|
``` py title="Setting the Output Frame Rate"
|
|
def generation():
|
|
url = "https://github.com/user-attachments/assets/9636dc97-4fee-46bb-abb8-b92e69c08c71"
|
|
cap = cv2.VideoCapture(url)
|
|
iterating = True
|
|
|
|
# FPS calculation variables
|
|
frame_count = 0
|
|
start_time = time.time()
|
|
fps = 0
|
|
|
|
while iterating:
|
|
iterating, frame = cap.read()
|
|
|
|
# Calculate and print FPS
|
|
frame_count += 1
|
|
elapsed_time = time.time() - start_time
|
|
if elapsed_time >= 1.0: # Update FPS every second
|
|
fps = frame_count / elapsed_time
|
|
yield frame, AdditionalOutputs(fps)
|
|
frame_count = 0
|
|
start_time = time.time()
|
|
else:
|
|
yield frame
|
|
|
|
|
|
stream = Stream(
|
|
handler=VideoStreamHandler(generation, fps=60),
|
|
modality="video",
|
|
mode="receive",
|
|
additional_outputs=[gr.Number(label="FPS")],
|
|
additional_outputs_handler=lambda prev, cur: cur,
|
|
)
|
|
|
|
stream.ui.launch()
|
|
```
|