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>
Related
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.
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.
I have a backend streaming video to web browsers using RTMP. On the browsers we use jwplayer.
As everybody know flash player is going to be deprecated soon.
Im looking for options to modify the backend using another streaming solution.
We have made some test using DASH but it has too much delay for live streamining compared to RTMP.
What are the options for anyone using RTMP ?
I'm playing around with Spydroid a bit and wants to display the RTSP stream in an web browser, preferably in HTML5 to be able to view the stream on mobile devices. I've been looking around quite alot and it seems that RTSP works great with HTML5, the problem is that most RTSP URLs look something like this:
rtsp://xxx.xxx.xxx.xxx/videofile.mov
So my question is, how can I point to a similar RTSP URL using Spydroid or is there another solution?
(The RTSP URL that works e.g. in VLC for me is rtsp://xxx.xxx.xxx.xxx:XXXX but can't figure out how to use that URL with different HTML5 video players...)
I understand you can feed the HTML5 <video> element RTP/RTSP video streams.
Streaming via RTSP or RTP in HTML5
Great! Now how would one go about setting up the stream?
To be clear, I'm not looking to stream live video, just encode and stream existing media/video files. Think Flash Media Server (I have a working example of the Flash route already). I'm wondering how to approach setting up the streaming server backend to serve up all the right codecs for HTML5 video in all different browsers (H.264/Ogg/WebM)
I'm looking at maybe FFServer? Or possibly the new VOD feature for VLC for streaming in H.264 (Safari, Flash) over RTSP. Possibly Icecast server for the Ogg video? Is this even possible? Are there currently any working examples of this type of html5 VOD true streaming in the wild?
This is no answer, however I would suggest trying to solve one problem at a time.
Example:
Q: Can I stream from Flash Media Server via HTML 5 "video" tag?
A: No, but progressive download is possible. (Reference: http://forums.adobe.com/thread/855764)