H.264 streaming

[vitosamson]

This looks really good. I'm kicking around the idea of creating a modern web frontend to replace Foscam's awful plugin-based interface.

Does their API support full video streaming? Only thing I could find in the docs was getMJStream(), which seems like it would be of much lower quality than an actual video stream.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/28055550-h-264-streaming?utm_campaign=plugin&utm_content=tracker%2F24646939&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F24646939&utm_medium=issues&utm_source=github).

[lightswitch05]

I know the camera supports RTSP for video streaming, but I have no idea how this would work in the browser. I know the API docs I have are now outdated. I submitted paper work for access to the latest docs, but have not received a response yet. I would love a modern interface as well and have toyed with the idea of a SPA written in Angular.js. CORS would require a server to still make the API requests unfortunately.

[lightswitch05]

Focam supports ONVIF - after a little research, it looks like that might be one route for browser streaming. There is a node ONVIF implementaion here: https://github.com/agsh/onvif - they have an example but it still rely's on VLC's RTSP browser plugin

[vitosamson]

Cool. I found some resources online to hack together a system that uses ffmpeg to grab the RTSP stream from the camera, convert it to mpeg1 and proxy it to a node app which then proxies it over websocket to a webpage running a script that decodes the mpeg1 video and displays it in a canvas... as convoluted as it sounds there was only a couple second lag which wasn't too bad.

http://phoboslab.org/log/2013/09/html5-live-video-streaming-via-websockets the ffmpeg command that worked for me: ffmpeg -i rtsp://user:[email protected]:88/videoMain -f mpeg1video -b:v 400k -r 30 -s 1280x720 http://localhost:8082/foo123/1280/720

[lightswitch05]

Found an interesting article talking about RTSP -> MJPEG -> WebRTC. Looks like their opensource server is an all-in-one solution: http://www.kurento.org/blog/interoperating-webrtc-and-ip-cameras

[vitosamson]

Looks cool, have you tried getting their server up and running? Unfortunately I haven't had much time recently to work on this.

[lightswitch05]

My local 'server' is a old raspberry pi that doesn't run Java. Mostly just commented on here for tracking

[vitosamson]

I've been playing around with this over the past couple days. I was able to stream to an HTML5 video tag using vlc:

1. in vlc (gui), file > open network
2. enter rtsp://ip:port/videoMain for the URL
3. enable "streaming/saving", click "settings"
4. select "stream", type "html", address "localhost", port 1234 or whatever, encapsulation method "Ogg"
5. enable video transcoding, "theo" format, bitrate 2048, scale 1
6. hit ok, then open
7. enter camera user/pass

drop this into an html doc: <video src="http://localhost:1234" type="video/ogg; codecs=theora" autoplay="autoplay"></video> . video and audio should show up in pretty good quality. sometimes you have to refresh the page a couple times for it to work.

some issues though:

1. vlc ends up using ~90% cpu while streaming
2. there's at least 4 seconds of latency
3. sometimes the HTML5 video just shows a green screen, not sure why

I'm trying to get this working using ffmpeg and ffserver but it's proving to be more fickle. hoping that will give better performance though.

[vitosamson]

I couldn't get ffmpeg/ffserver to work. at best it would stream the first frame and then stop.

went back to VLC. running it on a raspberry pi is pretty much out of the question since the transcoding is too cpu intensive.

streaming with VLC in ogg/theora format works in chrome but browser support isn't there. same for webm. the only widely supported format is mp4/h264, which doesn't work with live streaming as far as I can tell.

I'm not really sure what direction to take at this point.

[lightswitch05]

Yeah, it looks like a flash client is the only feasible option unless browsers decide to support RTSP natively. From what I've read it doesn't look like any browser is interested in supporting it.

The interesting thing is that Firefox and Chrome both support the H.264 video format natively - it is the streaming part that throws a wrench into things.

This YouTube URL will show you what your current browser supports: https://www.youtube.com/html5

This is a pretty great stack overflow answer that talks about some of the issues: http://stackoverflow.com/a/22001830/912563

It looks like there might also be a solution hidden in MSE (Media Source Extensions) - but I don't understand that part.

[vitosamson]

out of desperation I created an mjpeg stream that's pretty performant and streams in 720P. no audio and there's still a ~3 second lag behind the actual camera video, but at least it doesn't kill the cpu with transcoding.

https://gist.github.com/vitosamson/90b547a7fe0ac1c39da0 requires ffmpeg, node 4+, relatively recent browser.

if we could get that down to <1s lag it could be a viable option. also audio transcoding should be a lot less cpu- and network-intensive so we may be able to stream the audio alongside it.

[StefanRu1]

Hi,

i have a problem using server.js. Error is: `/home/pi/mjepgstream/server.js:17 wsServer.clients.map(client => { ^

TypeError: wsServer.clients.map is not a function at Socket.ffmpeg.stdout.on.data (/home/pi/mjepgstream/server.js:17:20) at emitOne (events.js:96:13) at Socket.emit (events.js:189:7) at readableAddChunk (_stream_readable.js:176:18) at Socket.Readable.push (_stream_readable.js:134:10) at Pipe.onread (net.js:551:20) `

Is the node.js to new? pi@raspberrypi:~/mjepgstream $ node -v v4.8.0

Best regards, Stefan