I am attempting to establish a high quality RTMP stream using Flash Media Live Encoder and Flash Media Server which is installed on my CentOS VPS Host. I am able to connect to the stream with the following url in the encoder: rtmp://myhost:1935/live/streamname (this is example).
I am using Flash Media Playback and embedding the following html for video playback:
<object width="640" height="480">
<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"> </param>
<param name="flashvars" value="src=rtmp%3A%2F%2Fmyhost%3A1935%2Flive%2Fstreamname&poster=http%3A%2F%2Fsquarestream.ca%2Fpics%2Fframe.jpg&autoPlay=true&streamType=live&optimizeInitialIndex=false"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="480" flashvars="src=rtmp%3A%2F%2Fmyhost%3A1935%2Flive%2Fstreamname&poster=http%3A%2F%2Fsquarestream.ca%2Fpics%2Fframe.jpg&autoPlay=true&streamType=live&optimizeInitialIndex=false"></embed></object>
The problem I am having is that the video is consistently buffering (approx every 5 seconds), followed by a sped up video playback and the audio and video is never in sync. From everything I have read, my encoder settings are fine:
25 FPS, 500 Kbps bitrate video, 128 kbps audio, I am on internet connection averaging 6 MBPS upload, my CPU/RAM usage never above 75% as Adobe suggests. I fear the issue is my hosting, but I am at a loss, I have tried every conceivable encoder setting, and as far as I know, FMS is setup correctly on host, and can verify stream connects in the admin console. Any suggestions would be helpful.
Thanks.
Related
I have spring MVC project where I have kept my video on resource folder (D:/folder/videos/) and same entry is made in my spring servlet xml as like
In my jsp file I have below entry to show video
<div id="groupsign" class="tab-pane fade">
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
</div>
Still it not showing the video when run my application on server. It showing blank and just searching symbol in video area. This same code/video working on android device. If I replace video source by giving any public video link then its working. I am not getting what an issue and how to resolve the same. Any guidance will help me more.
Safari
Used autoplay loop muted playsinline in video tag but not luck
In Spring servlet configure resource folder like
<resources mapping="/videos/**" location="file:D:/folder/videos/"/ >
In JSP written video tag like
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
I had the same issue with the ios mobile devices and solved it.
As mentioned here : Creating Video for Safari on iPhone: "HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests."
So you must check whether your server uses byte-range caching or else reconfigure it (I did it with nginx).
PS: Another secondary reason for ios video incompatibility could be the incompatible codecs of each video. The following compression standards are supported:
-H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile. -MPEG-4 Part 2 video (Simple Profile) -AAC-LC audio, up to 48 kHz
I've setup a Wowza streaming server and am serving Apple HLS video to a web page. I've read the articles on achieving low-latency live streaming and implemented all the details I can find. I have the Wowza server set to low-latency mode for the live stream.
The issue: The live video stream works for hours, but the latency is around 60-90 seconds behind real time. How do I get the latency from camera to web page down to 5 seconds or less?
Here is my html layout for video.js:
<div style="padding:5px;text-align:center;" preload="none">
<video id=example-video width=720 height=405 class="video-js vjs-default-skin" controls></video>
<source src="http://1.2.3.4:1935/live/myStream/playlist.m3u8" type="application/x-mpegURL">
</video>
</div>
Any insights on how to knock the latency down from 60 seconds to 5 or less would be appreciated!
you will need to customise the configuration as recommended below-
Audio AAC encoder – Bitrate:- 96
Video H.264 encoder – Bitrate:- 800
Keyframe Interval:- 2 second
Tune:- Zero latency
Buffer size:- 50
FPS:- 30
Note: I have share based on the assumptions that you'r using FFMG or WBS to capture the live stream and supply that in RTMP format.
I have a standard WiFi h.264 camera that I use as a baby monitor which, in technical terms, means I need it to be as realtime as possible. My initial goal was to encode the stream from the camera as such that the native iPhone hardware decoder can be used so that the result is a direct, clean, sharp, and realtime video from my camera onto my iPhone. I really want to avoid using FFMPEG since its a software decoder, which is slower then a hardware decoder.
I am finidng that the iPhone will not take anything from the camera's stream unless I use HLS as a middleman server. I am desperatly trying to avoid introducing a server inbetween the camera and the iphone, since it means more work, more bandwidth, and more latency on the video.
So my question is: What do I need to do in order to get a direct h.264 stream from my WiFi camera to show up on my iPhone using its hardware decoding? I am currently using base profile. If you need any more details, please let me know.
Again, your help means a lot since I have been beating myself up on this for over 6 months now.
/* Edit (January 24, 2012) */
I'm leaving this answer for historic record, but I have a better answer now..
/* End Edit */
Depending on your brand of camera, the IP Vision app from the Apple App Store should work just fine to establish a direct connection.
See here: http://itunes.apple.com/us/app/ip-vision/id300593485?mt=8
There will of course be some latency, but I can tell you from 15 years experience in surveillance, that latency is just a fact of life.
Most IP cameras offer a reasonable degree of control over bitrate.
If you can sacrifice quality for speed, try getting a bitrate of around 32kbps. With H.264 compression, this will be around 1-2 FPS at QVGA resolution.
As for latency in the app, I cannot offer you any specific advice, but the app is free, and if it provides improved results than you win!
EDIT: Doe not work with stock iOS or Android 4.0. May have some use for the web, so I will leave this for others.
Can you get an RTSP stream from your camera?
Here is a list of IP cameras and their RTSP streams:
http://www.soleratec.com/rtsp/
If you can make a web page, you can use this code to embed your RTSP stream. It works on iOS, and is fairly universal:
<div class="box">
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
width="320" height="240" id="vlc" events="True">
<param name="Src" value="rtsp://76.23.103.200:1935/live/camera.stream" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="320" height="240"
target="rtsp://76.23.103.200:1935/live/camera.stream" ></embed>
</OBJECT>
</div>
Style your box as required. For an iPhone 4, screen width is going to be 320px, and for a typical IP camera, you probably have a 3:4 aspect ratio, so you want a screen height of 240px, just as listed above. Style the containing div any way you want. I recommend to center it, in case you call the web page in a tablet, laptop, PC, etc. Just makes it easier to see.
Example CSS
.box {
margin: 0 auto;
width: 320px;
height: 240px;
}
NOTE: The scope of this answer does NOT address any security concerns. Just like anything on the web, if you put it out there unsecured, anyone can get a hold of it.
Re-addressing your latency issues, this method will result in about a 3 second latency while streaming at 32kbps. May be a bit longer on a 3G wireless network. As I mentioned, latency is a fact of life with video. Even very expensive solutions will have 1-2 seconds of lag.
I hope this helps you some. If you don't have a website, just make a free Wordpress site and stick this code into a static page.
I have been trying to embed some videos on a website I am building, and have come across a snag when trying to stream the videos to iPhone/iPad.
Here's the code I use:
<video width="480" height="360" controls>
<source src="/video/Fire.mp4" type="video/mp4" />
</video>
This displays a thumbnail with a play button on it. However, the play button is crossed out. (The invalid codec button?)
I have ensured that the video has been properly encoded (MP4, H.264, baseline).
Any suggestions on what I'm doing wrong?
I've been having a similar problem. A few things to check off before you assume the codec is the problem:
Ensure the server is sending the video file with the correct MIME type (video/mp4)
The video's bit rate is under ~2MBps, there is also a relationship with the max resolution you can use in conjunction with the bit rate.
I was also encoding mp4 video with the baseline profile using Adobe Media Encoder and could not get the video to play on an iPhone.
I used Miro Video Converter to convert from mp4 to mp4 and can now correctly play the video on an iPhone.
Obviously some part of the encoding I must be setting wrong from the Adobe software but I'm yet to pin it down.
If anyone else can chime in with there experience it would be appreciated.
I'm building a web site that needs to stream video and be friendly for handheld devices (especially the iPhone). Some handhelds don't support Flash so I'm avoiding the use of a Flash player. How does Youtube stream its videos so that they play on both desktops and iPhones? I'm looking for a player, or multiple players, which can be somehow activated based on the user's device.
Your help and guidance are much appreciated. Thanks.
The YouTube website and others use the HTML5 video tag for streaming playback on iPhones. It works like this:
<video width="480" height="360" controls>
<source src="test.mp4" type="video/mp4" />
<source src="test.ogv" type="video/ogg" />
</video>
In Safari (Desktop as well as mobile) and Chrome, the h264-compressed test.mp4 file will be played. Firefox will play back test.ogv. For other videos, you should still have a flash video player as fallback. You can have all the format choosing and flash fallback done automatically using HTML5Media. You might also check out SublimeVideo, which provides video player controls for the <video> tag.