I'm looking for a dead-simple way to convert an RTMP stream (from an IP camera) into something I can use in the browser. Ideally this server would read from the rtmp:// URL of my camera, re-encode the stream, and then server the stream in a format I can use in a <video> tag on a web page.
However, my understanding is that HTML5 and the <video> tag does not support live streaming. Therefore, I'm left using HLS or DASH. My understanding is that HLS is supported by almost all devices (I only care about the Chrome browser on both my Linux desktop, and my Android device).
So what is the easiest way to convert from a rtmp:// stream to HLS? I've tried using the nginx-rtmp-module (https://github.com/ut0mt8/nginx-rtmp-module), but after re-compiling Nginx, I cannot get the configuration file to work correctly. I also run into the problem that my rtmp:// URL doesn't seem to fit the "standard" pattern of rtmp://localhost/$app/$name I see in most of the documentation. Mine looks like: rtmp://192.168.1.103:1935/flash/1:YWRtaW46YWRtaW4= where the last part is a the username and password (admin/admin) encoded in Base64.
Ultimately, I have multiple cameras, and I'm looking to make a simple page where I can display them all. What's the easiest way to go about this on Linux?
For those who might be searching for something similar, I was able to use ZoneMinder. It configures a server that does exactly what I want: convert an RTSP stream to something that can be displayed in the browser via an img tag. You can figure out the URL for the image source by simply inspecting the element in the browser.
The code for the ZoneMinder server is on GitHub: https://github.com/ZoneMinder/zoneminder It would be nice if one could easily extract just the server that translates RTSP into the image data, but the easiest way to get up-and-going was to simply configure the whole service.
My suggestion would be to use https://github.com/aler9/rtsp-simple-server. It fulfills your requirement of being “dead simple” and can convert from RTMP to HLS in about 2 to 10 lines of YAML config.
Related
I need to display a live camera on a webpage, and this camera uses rstp protocol. I've just found out that browsers do not support rtsp protocol, so I need to create a nodeJS server to serve to the client(react) in order to make it work. I came across multiple information articles on the internet but nothing seems to work properly.
How can I accomplish this mission?
I too was researching on the same thing. What I found out was that we can convert our RTSP URL to HLS using FFMPEG and pass the HLS master file (.m3u8) to video tag in HTML to stream.
Let me know if it helps.
Example:
<video id="video-player" controls preload="none"><source src="/output-directory/index.m3u8" type="application/x-mpegURL"></video>
Is there any way to stream mkv files on webpage using javascript/html or any other technologies? I found many questions about this, but I really want to know the answer - is this possible in any way? Maybe ajax, javascript, php, html? Maybe some external libraries? Anything?
I was wondering how youtube works. Is there possible to upload mkv file? Is so, how that videos are streaming to end user?
I know that browser doesn't support mkv natively, but maybe is some way to forcing html to do that?
Any help will be appreciated.
YouTube most probably works using the DASH protocol format. On the server side, the source audio and source video are separately divided into segments of different bitrate/quality. A manifest keeps an index of all possible segments values and their location. This allows to switch quality during playback in the player.
On the client side, the DASH (should be the same with the other main technology: HLS) manifest is used by the player to locate the segments to load in order to feed the content in two separate SourceBuffer, one for audio and one for video and both are being played synchronously together in the MediaSource. For an example player that handles this, see the Shaka Player developed by Google.
Conclusion, there is no need to use a container like mkv but each channel (video, audio) needs to point to a browser supported codec encoded segments.
You don't need anything special for streaming pre-recorded media files. A normal HTTP/1.1 or HTTP/2 server will work just fine. The browser is generally capable of seeking into the file using range requests.
Matroska (MKV) is a container format, and it actually is widely supported because it's basically the same as WebM. WebM is a subset of Matroska... the key differences being that there are suggested codecs for use. (Matroska itself supports almost anything.)
Your audio and video tracks in the file can use a variety of codecs... the key is to use codecs compatible with browsers. Opus for audio and VP8 for video will take you far.
From there, simply reference your video file in a <video> tag.
Currently I am using a flash player to play my shoutcast stream. I would like people on mobile devices to be able to listen as well, and it seems HTML5 is the way to go. How would I go about getting this shoutcast stream "stardust.wavestreamer.com:3353" working in HTML5?
I tried using
but that does not seem to be compatible with shoutcast.
If you connect to a SHOUTcast server with a web browser, it will detect your browser because it has Mozilla in the User-Agent header, and send you to the admin page for the stream anyway. You can test this yourself by simply going to http://stardust.wavestreamer.com:3353/.
Fortunately, SHOUTcast servers provide a way to force the loading of the stream. Just add a semicolon ; to the end of the URL.
http://stardust.wavestreamer.com:3353/;
Internally in the SHOUTcast server, it will now see your User-Agent string as MPEG OVERRIDE, which no longer contains Mozilla, so you get the actual media stream.
I use JWPlayer to play videos from the server. Videos are encoded using h.264 codec. If i open them in browser with h.264 support - video plays nicely and i can seek it, because server returns 206 header browser understands that its partial content. But if i try to play same video on Opera, for example, flash player is being used and it receives 200 OK! 2 problems here:
I can't seek the video, until part of it is downloaded
If the video is not "properly" encoded player can't even start playing it, until file is fully downloaded.
Is there something wrong with flash properly asking/understanding http headers?(i've never worked with flash before, so maybe my question is a bit silly and i just don't know flash's limitations)..
1) You need to have pseudo streaming enabled, for Flash - http://www.longtailvideo.com/support/jw-player/28855/pseudo-streaming-in-flash, if you can provide a link though, I will take a look at exactly what is going on here, I am more or less guessing about this one. HTML5 does not require a pseudo streaming module to be installed on the server side, though. In Flash, the default is progressive download, so you can only seek to downloaded parts, and in html5, this is not the case.
2) Yes, that is because of encoding. If your MP4 files cannot be seeked before they are completely downloaded, you will have to fix the MOOV atom (it contains the seeking information) located at the end of your video. Use this little application to parse your videos and add the necessary cue points - http://renaun.com/blog/2010/06/qtindexswapper-2/
Also, encoding via HandBrake - http://handbrake.fr/, can fix this as well, so the above tool wouldn't be necessary. You can encode using HandBrake, and enable "web optimized", which does the same this as the Index Swapper Tool. HandBrake also has command line encoding options as well.
I have several MPEG2 Transport Stream videos with KLV metadata embedded in them. I would like to display the videos in a web browser. Is it possible to use the HTML5 <video> tag to play a video of this type in a web browser?
If I use a converter to pull the video out of the MPEG-TS container and create an MPEG4 file encoded with H.264, then I can get the video to show up in a browser. But is there any possible way I could display these videos without having to convert them into a different format? I need to keep the KLV data around so I can do other stuff with it.
The actual video codec support is still up to the browser, but some support MPEG2-TS natively as a transport, and if they don't you can do software demuxing using hls.js. Reading KLV is an unresolved issue but you "should" (per that issue) be able to access the raw binary stream and parse out the values yourself -- not trivial, as such, but doable.
There is no browser that support mpeg2.
You can use service like: vid.ly and have all the formats you need.