I would like to display IP cameras streaming in RTSP into a web page.
I've tried many solutions, like using VLC to transcode the stream, but none of them seems to be reliable enough to create a real web service.
I'm thinking on using some media server like flussonic or Red5. But I don't know if it will work.
This is why I would like to know what is the best (and the simple) solution to display RTSP streams on a webpage.
...to create a real web service.
I've been looking for an answer for the past two or three days (I need support on as many browsers as possible, and latency as low as possible, so WebRTC was the way to go (is there anything better?)) and I've finally found it.
Check out this repo.
From the repo's readme + the additional steps I had to take (on Ubuntu 18.04) to make this work:
Install go
$ sudo snap install go --classic
Get the code on your local device (Could someone enlighten me on what the export is for?).
$ export GO111MODULE=on
$ go get github.com/deepch/RTSPtoWebRTC
This step didn't work for me, so I just downloaded the code in a .zip file and extracted it in the given directory and proceeded. (What did I miss? The src directory was not there before I made it)
$ cd ~/go/src/github.com/deepch/RTSPtoWebRTC
Run from current directory.
$ go run .
Then I opened the link below a web browser ( I tested on Chrome, iOS Safari, but it also works on Firefox).
http://127.0.0.1:8083
This took me very little time to implement. Big thanks to the guys making this. All the other stuff I've found is either 5-7 years old and not working or non-WebRTC or a marketed paid service asking for unreasonable amounts of money.
I hope I answered your question.
After tried the "plugins" way suggested in
How can I display an RTSP video stream in a web page?
And the "conversion" way suggested in
https://www.npmjs.com/package/html5_rtsp_player
I finally found a really straight forward solution using this plugin, works for Chrome only which is ok for my project.
https://www.videoexpertsgroup.com/vxg-chrome-plugin/
This is how the html code look like
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.js"></script>
<link href="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.css" rel="stylesheet" />
</head>
<body>
<div class="vxgplayer"
id="vxg_media_player1"
width="640"
height="480"
url="rtsp://admin:admin#192.168.1.117/defaultPrimary0?streamtype=u"
nmf-src="/assets/vxgplayer-1.8.31/pnacl/Release/media_player.nmf"
nmf-path="media_player.nmf"
useragent-prefix="MMP/3.0"
latency="10000"
autohide="2"
volume="0.7"
avsync
autostart
controls
mute
aspect-ratio
aspect-ratio-mode="1"
auto-reconnect
connection-timeout="5000"
connection-udp="0"
custom-digital-zoom></div>
</body>
</html>
You can integrate VLC library into your website and VLC will take care of everything you need for playing RTSP stream:
https://wiki.videolan.org/index.php?title=HowTo_Integrate_VLC_plugin_in_your_webpage&action=edit&oldid=19150
Related
I am trying to display a TVHeadend stream in the browser as a pre-cursor to get this running on my TV. So I whipped up this sample HTML code where 192.168.0.4 is my server running TVHeadend and the channel UUID is 3df2b09783d8afeb8a323f5025431df7:
<html>
<body>
<video width="720" height="567" autoplay="true" controls>
<source src="http://192.168.0.4:9981/stream/channel/3df2b09783d8afeb8a323f5025431df7?profile=webtv-h264-aac-matroska" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Whether I show the HTML page locally on my computer or served via a local Apache webserver, the result is always the same: I get an emtpy video player control. The network tab does not show any errors, neither does the console. It does bring a warning however:
"Empty src!"
However the src is clearly not empty.
When I copy the src URL to my browser (Chrome) and call it, it starts downloading the stream (instead of showing it, but that might be expected). Why does the video control not seem to be able to show the video?
Do I have any other debug options I can check out? This problem has bugged me for a while now and I have tried to drill down to the source of it by removing the TV SDK and all other side code just to see if the actual video will play (which it does not).
At first I thought it might've been an authorization issue but then why does Chrome seem to be able to download the stream just fine? I have logged on to TVHeadend in the same browser (in a different tab) to make sure that a missing logon is not in the way of things.
I have also tried putting : in between the "http://" and the IP address to pass the parameters required for basic auth - but to no avail.
Does somebody have any hints as to what might be the roadblock here?
Is HTA supposed to work on Windows 10 phones? It seems like it knows it's supposed to launch it, but something isn't right.
The HTA file that I tried to run, looks like this:
<html>
<head>
<meta charset="utf-8"/>
<title>Test HTA app</title>
<hta:application id="myApp"
applicationname="monster"
border="none"
caption="no"
showintaskbar="yes"
singleinstance="yes"
sysmenu="no"
windowstate="maximize">
</head>
<body>
<p>If you can read this, HTA works!</p>
</body>
</html>
And, before I tried to launch it, I went to Security > For developers, and set the Developer features to "Developer mode" instead of the original option "Windows Store apps".
Then I downloaded the HTA file, clicked on it from my Downloads app, and all I get is a message saying
LAUNCH FILE
Something went wrong. Could not launch the file.
Is there something I can do to make it work?
And just to avoid possibly having another question later; is Javascript going to work?
No, I believe HTA will not work for Windows Phone 10.
Edge (Windows phone 10's browser) does not support it.
See this link: https://connect.microsoft.com/IE/feedback/details/785055/hta-application-tag-does-not-work-in-ie10
I am just creating an html file to test out the google +1 button. I guess the problem my html is not deployed on a server. How can you test the google+1 button on your local machine. This code doesn't render anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google+1</title>
<!-- <link rel="stylesheet" href="css/main.css" type="text/css" /> -->
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>
</head>
<body >
<g:plusone></g:plusone>
</body>
</html>
I assume it can't be done because Google's API check the source of the request, otherwise many security holes would be exist.
Why won't you check it online? Just upload the site to it's domain and try to +1 from your account.
Another option for design purposes only: download an image of the +1 button and use it in the offline version.
You're probably just opening the HTML file locally. You can run the Google+ widgets on your local machine and will need to have internet access to load the external scripts. What you need to do is start up a web server and open the file from there. This is due to permissions for JavaScript required from the +1 code.
If you are on a Mac, you can do this either through the built-in Apache server (copy the file to /Library/WebServer/Documents and navigate to localhost/filename.html) or by spinning up a Python web server in the same folder as the file with the following command:
python -m SimpleHTTPServer 8000
After starting the Python web server, you can navigate to localhost port 8000.
If you are running on a Windows PC, you can find a number of web servers and install them, WAMP is a pretty simple option. Again, you would just install WAMP and then put your HTML file in the web/www folder that WAMP created and navigate there from localhost. You can also install Python and use the built-in web server as mentioned before.
So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).
This is my html file, it can play at Safari 5.0.5 (Mac OS X 10.6.8), but when I update the Safari to version 5.1, it can NOT play, can anyone tell me why, and how to solve it in Safari 5.1? Thanks.
<html>
<head>
<title>HTTP Live Streaming</title>
</head>
<body>
<video controls src="http://mysite/index.m3u8">
</video>
</body>
</html>
Updated: I found the solution! When I set in the System Preference > Network > Advanced > proxies > Automatic Proxy Configuration with the proxy I use, I found the HTTP Live Streaming can NOT play, when I remove proxy, it can play now! How does this happen? Why it play well in Safari 5.0.5?
In Safari 5.1, open the Activity window with the Window->Activity menu. That will show you all the URLs it attempts to download as well as whether it downloads successfully. Maybe this will give you a clue.
Also look at the system console by running the Console app that you will find in /Applications/Utilities.
Try it in FireFox, Chrome, and on Windows, Internet Explorer and Safari for Windows.
If all those other browsers play your video OK, and neither the Activity window nor the console yield any insight, file a bug report. The chances are pretty good that, if it is a bug, Apple will fix it in the next release, or if it is not a Safari bug, an Apple engineer will give you a clue as to what you did wrong.