Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom IP camera #3415

Merged
merged 2 commits into from
Jan 14, 2024

Conversation

stuomas
Copy link
Contributor

@stuomas stuomas commented Jan 1, 2024

This allows adding a custom IP camera source from the camera settings popup. Camera stream is shown in a WebView widget with native controls and possible scrollbars stripped away. Original bambulab camera also remains functional if one exists, and a button is added to toggle between them.

Tested on Windows with Bambu Lab P1S.

Demo:
pr_gif

@Eldenroot
Copy link
Contributor

Good job, not possible to display both together or the external camera in popup windows?

@stuomas
Copy link
Contributor Author

stuomas commented Jan 2, 2024

Good job, not possible to display both together or the external camera in popup windows?

HTML5 video has picture-in-picture out of the box so should be easy to implement. It's available in the native controls that I hid to get more integrated look, but it could be called via its API.

Showing both at the same time shouldn't technically be hard either, but I don't know what is the best way to arrange the videos, or maybe the arrangement should be user adjustable, and then it becomes a hard UX task :)

Both if these could be future PRs though

@Eldenroot
Copy link
Contributor

HTML5 video has picture-in-picture out of the box so should be easy to implement. It's available in the native controls that I hid to get more integrated look, but it could be called via its API.

I am asking because I have 2 cameras on my printer - one is stock from Bambu, the second one is IP camera attached on the frame. I would like to see both pictures on one screen or at least the second IP camera in the popup window.

@stuomas stuomas force-pushed the custom-camera-source-webview branch from d49b0af to ad1253c Compare January 3, 2024 07:50
@stuomas
Copy link
Contributor Author

stuomas commented Jan 3, 2024

HTML5 video has picture-in-picture out of the box so should be easy to implement. It's available in the native controls that I hid to get more integrated look, but it could be called via its API.

I am asking because I have 2 cameras on my printer - one is stock from Bambu, the second one is IP camera attached on the frame. I would like to see both pictures on one screen or at least the second IP camera in the popup window.

Added partial support for viewing the custom camera in a popup window, only works for videos that are in a <video> HTML element, like *.mp4s but not for example MJPEG streams. You can try if it works for you (by right-clicking the camera switch icon). I can later drop the commit from this PR if it's deemed too unfinished.

@Eldenroot
Copy link
Contributor

Great, thank you

@stuomas stuomas force-pushed the custom-camera-source-webview branch from ad1253c to aeee23c Compare January 3, 2024 10:40
@stuomas
Copy link
Contributor Author

stuomas commented Jan 3, 2024

Builds from this branch can be found from my fork here https://github.com/stuomas/OrcaSlicer/actions/runs/7396272554 (not sure why mac build has failed) in case someone wants to test it out.

EDIT: rebased and now also Mac build works: https://github.com/stuomas/OrcaSlicer/actions/runs/7413929430

@stuomas stuomas force-pushed the custom-camera-source-webview branch 2 times, most recently from b99ccf0 to 52c5dfb Compare January 6, 2024 07:56
@SoftFever
Copy link
Owner

Thank you!
This is cool.

@stuomas stuomas force-pushed the custom-camera-source-webview branch from 52c5dfb to 98f0f94 Compare January 12, 2024 13:10
@stuomas
Copy link
Contributor Author

stuomas commented Jan 12, 2024

(rebased)

Thank you! This is cool.

Thank you, let me know if you want some changes!

@stuomas stuomas force-pushed the custom-camera-source-webview branch from 98f0f94 to 528aaae Compare January 13, 2024 16:58
Allow adding custom IP camera source while keeping possible
built-in bambulab camera also functional and add button to
switch between them.

This uses WebView widget to show the stream. Upon loading the
page, javascript is used to remove native controls and scroll-
bars for aesthetic reasons.
HTMLVideoElement supports picture-in-picture video
but the dedicated control is hidden in this implementation
to have more integrated look in OrcaSlicer. Add right-click
listener to the camera switch icon that opens the video element
in a PiP window.

Only works when the video is in <video> HTML element, so for
example MJPEG streams in <img> element won't work.
@stuomas stuomas force-pushed the custom-camera-source-webview branch from 528aaae to 52b2f6d Compare January 14, 2024 05:53
Copy link
Owner

@SoftFever SoftFever left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

@SoftFever
Copy link
Owner

(rebased)

Thank you! This is cool.

Thank you, let me know if you want some changes!

I don't have IP cam so I can't test it by myself.
But the changes look good to me.

@SoftFever SoftFever merged commit b7b22eb into SoftFever:main Jan 14, 2024
12 checks passed
@mysticprysm
Copy link

Awesome to see our idea come to life! Of course all credit to stoumas for the work, but I knew there had to be someone that was interested in it as much as me when I first brought it up!

@Nightshade09
Copy link

Would it work with ONVIF or RTSP camera feeds?

@stuomas
Copy link
Contributor Author

stuomas commented Jan 23, 2024

Would it work with ONVIF or RTSP camera feeds?

wxWebView is basically a web browser, so any URL that plays in your browser should work in here. If you're stuck with RTSP, you could use some intermediate media server (like Node-Media-Server) to create a webpage that plays that stream

@jesster14
Copy link

Could this work with a web security camera, like the Wyze?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants