[Question]: Serving MPEG-DASH Stream and Building a Frontend App for Real-Time Streaming

Issue guidelines

[X] I've read the Issue Guidelines and wholeheartedly agree.

Issue Checklist

[X] I have searched open or closed issues for my problem and found nothing related or helpful.
[X] I have read the Documentation and found nothing related to my problem.
[X] I have gone through the Bonus Examples and FAQs and found nothing related or helpful.

Describe your Question

I'm using VidGear to generate an MPEG-DASH stream and save it to a local file. I've successfully created the dash_out.mpd file and chunks, but I'm unsure how to serve this stream and build a frontend app to stream it in real-time.

Here's my Python code for generating the stream:

from vidgear.gears import CamGear
from vidgear.gears import StreamGear
import cv2

print("Setting input source.")
# open any valid video stream(from web-camera attached at index `0`)
stream = CamGear(source=0).start()

ffmpeg_path = r"C:\ps-ust\codes\pycharm\videgear\main\external_services\ffmpeg"

# enable livestreaming and retrieve framerate from CamGear Stream and
# pass it as `-input_framerate` parameter for controlled framerate
stream_params = {"-input_framerate": stream.framerate, "-livestream": True,
                 "-ffmpeg_download_path": ffmpeg_path, "-clear_prev_assets": True,
                 "-vcodec": "libx264"}

output_path = r"C:\ps-ust\codes\pycharm\videgear\main\output\live_stream_chunks\dash_out.mpd"

print("creating streamer.")
# describe a suitable manifest-file location/name
streamer = StreamGear(output=output_path, **stream_params)
print("Done.")
# loop over
while True:
    print("Reading Frame")
    # read frames from stream
    frame = stream.read()

    # check for frame if Nonetype
    if frame is None:
        break

    # {do something with the frame here}

    # send frame to streamer
    streamer.stream(frame)

    # Show output window
    # cv2.imshow("Output Frame", frame)

    # check for 'q' key if pressed
    key = cv2.waitKey(1) & 0xFF
    if key == ord("q"):
        break

# close output window
cv2.destroyAllWindows()

# safely close video stream
stream.stop()

# safely close streamer
streamer.close()

I've also created a sample index.html file using Dash.js to play the stream:

<html>
<head>
    <title>Dash.js Rocks</title>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>
<div>
    <video id="videoPlayer" controls></video>
</div>
<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
    (function () {
        var url = "http://localhost:8000/dash_out.mpd";
        var player = dashjs.MediaPlayer().create();
        player.initialize(document.querySelector("#videoPlayer"), url, true);
    })();
</script>
</body>
</html>

However, I'm not sure how to serve the stream and make it accessible to the frontend app. I've tried using http.server to serve the files, but I'm not sure if this is the correct approach.

Can someone please guide me on how to serve the MPEG-DASH stream and build a frontend app to stream it in real-time? I'm new to MPEG-DASH streaming, and any help would be greatly appreciated.

Expected Answer:

I'm looking for guidance on how to serve the MPEG-DASH stream and build a frontend app to stream it in real-time. Specifically, I'd like to know:

How to serve the dash_out.mpd file and chunks using a web server (e.g., http.server, Nginx, Apache). How to configure the frontend app to access the stream and play it in real-time. Any additional considerations or best practices for building a real-time streaming app using MPEG-DASH.

Terminal log output(Optional)

No response

Python Code(Optional)

No response

VidGear Version

0.3.3

Python version

3.8

Operating System version

windows

Any other Relevant Information?

No response

abhiTronix / vidgear