Follow

Hey fedi, what's the simplest way to embed a live feed from a webcam or similar into a locally hosted webpage in this day and age?

I don't want to stream to an offsite host like YT or whatever - I want to keep it all on the local net, but I don't want to install any really heavy/complex streaming apps or anything. I don't need to manage multiple feeds, or load balance or anything. Assume I can transcode to anything via ffmpeg at the source.

@mike I believe I’ve used MJPEGStreamer on a SBC for this before, it was quite simple to set up and run, though I decided to put it behind an nginx proxy to put it on a path on port 80 instead of on a dedicated port

@mike UVC compatible cameras (many webcams) produce JPEG frames directly so it’s got super low overhead, just encapsulating it into HTTP stream. But I think it can also do FFMPEG transcoding

@s0 this won't actually be a webcam source, I just meant that as a kind of example. Does MJPEG allow an audio channel? There'd be one of them too.

I think I kind of need some level of sophistication in this, but everything I've looked at seems super elaborate and designed for much more complex cases than I want.

@mike ah, in that case, not the right tool. MJPEG is video only and more for slow video feeds. You want an RTSP server.

@s0 I think I want some kind of middle piece to consume an RTSP feed (I can generate that with FFMPEG on the capture host easily) and generate the embed which it looks like all the cool kids use WebRTC for.

There seem to be lots of options for this but at a crazy level of complexity for what seems like a simple task - but maybe it's inherently complex and my expectations are wrong.

I mean, I could just publish the RTSP feed details directly but I want something a little slicker than that.

@mike huh, this really does seem weirdly overcomplicated. Ant media server community edition seems to be the simplest option around. github.com/ant-media/Ant-Media

@s0 yeah honestly, if it comes to installing a bloody Java app, I think I'll just stream it to YouTube and embed that.

Cos, yeah, I honestly thought there'd be some really lightweight path to this but I don't think there is.

@mike @s0 What's wrong with simply using Java?

Sure, it's pretty heavyweight, so hopefully you'll find something better.

However, OpenJDK is open source and unlike in the old days, it's a first class citizen. New development on the JVM actually happens on OpenJDK and Oracle's proprietary offering is now just long term enterprise support (and some added features that are really only relevant to companies heavily wedded to Java).

@mike @s0 Oracle's strategy for milking Java isn't particularly relevant to home users.

Oracle has a huge sway over OpenJDK, because Oracle's continued cooperation benefits the project immensely. After all, there's no longer any conflict between Oracle's version and the open version that we saw in the old days, now that they're the same.

The main thing Oracle seems to get in return is OpenJDK's release cycle. It's fast and OpenJDK doesn't provide much long term support.

@FiXato you've described the problem pretty accurately, but I'm not sure about any solutions page that opens with "Flash Player" as a viable option.

@mike
I had my doubts too, but the later webrtc and websockets solutions sounded fairly sane to me. :)

Alternatively have a look at github.com/mpromonet/webrtc-st or github.com/ant-media/Ant-Media

@mike
but your posts remind me that I still have an article to write about my own solution for transcoding and streaming Twitch streams with embedded chat overlay to my PS3...
I might also look into the aforementioned solutions and see if I can combine that and include it in the same article. :)

@FiXato all the solutions on that page are examples that require their proprietary software to work, that's the core of the issue. All these middle pieces seem overly complex or cost a small fortune.

@mike
okay, missed the proprietary part.

How about github.com/deepch/RTSPtoWSMP4f?

Seems to only need:
- rtsp source
- GoLang to run the standalone server component
- a simple JSON config to configure the preferred port and stream URLs
- web browser that supports MSE (media source extensions), websockets and MP4f segments.

Don't think you can get much less complex than that.

@mike
What you're looking for is either Real Time Streaming Protocol or an alternative to RTSP. Either way, a search for "RTSP plugin" is probably the place to start

@mike have not used it, but came across this service on HN mux.com/

@mike I've been tinkering with fruitnanny for webrtc streaming. It uses gstreamer to capture audio and video and feed them to the janus webrtc server. Then a nodejs app to serve the pages. It would be pretty trivial to replace nodejs with the janus js API and some static HTML served by nginx or whatever.

It's pretty lightweight, and I think it's a good working example of a simple streaming webrtc app that you can adapt to your needs.

https://github.com/ivadim/fruitnanny

@stibbons looks OK all up, but I'm not sure I fancy trying to separate out the bits that are relevant from all that.

Everything you wrote after "it would be pretty trivial to ..." is kind of where I'm hoping for something simple off-the-shelf because JS is just is not a thing I have ever been into. 😀

@mike yep yep. I forget that I've spent a bunch of time working on it. 😅

I've never been able to find a simple barebones webrtc streaming project. The best I could suggest is to look at the streaming demo at https://janus.conf.meetecho.com/streamingtest.html (and grab the streamingtest.* files from https://github.com/meetecho/janus-gateway/tree/master/HTML and strip as much as you can from the HTML)
@mike if you're fine with running nginx for this, i have previously used nginx with the rtmp plugin for this - taking an incoming rtmp stream and making it available to web browsers via DASH.

I can dig out my config later if you're interested

@NHG that looks super promising - yeah I already use Nginx for everything anyway, just having those terms to search for has already helped, I think.

@mike https://p.nnev.de/9573

here's my nginx config from when i did a livestream once. creates both hls and dash streams from rtmp sources.

@NHG thanks heaps, I got it working in a basic form so I can easily get it tweaked and running right from here!

@mike you might be able to use a <video> tag and just point to the machine with the webcam (assuming it is directly accessible to clients). I haven't done this myself, but I know VLC can act as a video server. Maybe that can stream HTTP?

@mike "IP Webcam" running on that old Android phone in your drawer.

@mike I was able to stream a RTSP security camera on a page with a ffmpeg command like

ffmpeg -v info \
-i rtsp://my-camera/rtsp-url \
-c:v copy \
-c:a copy \
-bufsize 1835k \
-pix_fmt yuv420p \
-flags -global_header \
-hls_time 10 \
-hls_list_size 6 \
-hls_wrap 10 \
-start_number 1 \
camera.m3u8

then using video-js like this:

<video class="video-js" controls width="640" data-setup="{}">
<source src="camera.m3u8" type="application/x-mpegURL" />
</video>

Sign in to participate in the conversation
Chinwag Social

Consider this a friendly, local pub. Make yourself at home, bring your friends, have a good time! Meet new people, have a laugh, enjoy the ambience, and the Oxford commas.