HTML5 and a sample RTP Stream? - html

I'm making a website in html5 that needs to play an rtp stream, but When I run it, I dont get anything, and I'm not sure if its my browser (safari 5), my rtp server, or the html code that is the problem. :P does anyone know of a sample rtp stream I could use to test the HTML and my browser? Thanks Beforehand!
Cheers,
Lukas

If you want help with some code, you'll need to show it to us!
Regardless, understand that HTML5 support is browser specific. You will run into issue. Beyond streaming protocols, there are also CODEC specific issues, which is what I would guess you are experiencing--a common problem.
Ensure you are encoding the stream with h.264 "Baseline Profile".

Raw RTP support is not likely to be included in the implementations of the web browsers as for example discussed in the Chromium Bugs. The status of that issue is now WontFix (Closed).
But instead it looks like the web browsers support it in a form of WebRTC RTCRtpReceiver
and it's support looks quite promising
So I guess if using HLS is not an option for you, you should consider switching to WebRTC instead.

Related

Pure HTML5 videoconference

I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.

encoding video for html5 playback

I am creating a video portfolio website with a large quantity of videos and I am wondering as to the best way to go about encoding the videos for web playback. I am using the html5 video for everybody methodology, so I need the video encoded in the following 3 formats:
h.264
Ogg
WebM
I don't necissarily NEED WebM, but it would be nice.
Up until now I've been using a combination of Handbrake and ffmpeg2theora, but I am looking for some sort of all in one solution, as Handbrake seems to have trouble with large sized videos, and ffmpeg2theora is just a pain in the ass. Does anyone have any suggestions?
Thanks!
Miro Video Converter works really well for all those formats.
It's essentially a wrapper UI for ffmpeg and has limited options but does a good job.
You can also display the ffmpeg command log and tweak the command if the default output doesn't satisfy you.
It's also free.
You might want to take a look at VLC's conversion functionality. It can export in a number of different formats using export plug-ins, and has a handy encoding queue as well. As of right now I know it can do H.264 as well as Theora ... I'm not sure about WebM ... my version doesn't, but there may be an encoding plug-in coming that will do that as well.
Best of all, VLC is free.
Hope this helps,
Jason
FYI I tried Miro, and ran into some odd conversion issues. My .ogg files were fine, but my .webm files were a bit wonky. They'd play/run fine locally, but I'd get an error with the file when I uploaded it to my server (it would play once, and then hang every time thereafter).
I had some luck with Firefogg, which I ended up using without problems.
However, both Miro and Firefogg are more of a one file, click, convert approach. If you're wanting to do a large batch, here's a guide that a friend sent to me, from Brett Terpstra: Automating HTML5 Video Encodes. It's way over my head... but perhaps of some use to you.

HTML5 and RTSP to develop a browser based web conference app

Greetings to you all!
I want to develop an application that would be able to hold web conference without the users having to download any installable files. After doing some research I have found that flash is perhaps the only option I might have as JMF needs access to registries.
I would like to know if you have any suggestions.
Is it possible to use RTSP with HTML5 to develop the required application.
P.S The application shall be free for all, so I hope you would take the pain to answer. Thanks in advance!
In theory, yes, but is it browser specific.
HTML 5's <video> tag is protocol agnostic—it will not care what you have there. You place the protocol in the src attribute as part of the URL. E.g.:
<video src="rtp://myserver.com/path/to/stream">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
The problem is that the implementation of the <video> tag is browser specific. Since it is still early days for HTML 5, I expect frequently changing support (or lack of support).
And then you still have to worry about browser specific CODEC support! Flash is, at least today, the "more universal" approach--you'll cover a larger percentage of the web browsing public.
My suggestion is to either
User Flex/Flash
Become an expert on web browsers and enjoy coding on the bleeding edge

HTML5 live video "hack"

For the last two month I have been trying to "fool" safari into thinking that it's looking at a file on the server, which in fact is a live video stream from a camera encoded and muxed upon request using Gstreamer into a format that is supported by the browser. Since HTML5 supports progressive video downloads this should at least be possible in theory.
My conclusion is that this gets quite complicated considering that browsers make a partial content request when downloading video files in HTML5, mainly for the sake of seeking. If the server lacks support for this feature the video is not played until the file is completely downloaded.
Have anyone else tried this approach with more success? Or should I just give up and wait for true live video support like RTSP to be integrated into browsers.
Cheers.
This article provides some useful tips: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
Are you serving the X-content-duration header?
You have two possibilies.
With H.264 you can emulate a file with fragmented structure: ISO container (.mp4) with movie fragment atoms (MOOF's).
The other option is Google's WebM. Clients can "join in" the stream any time thanks to MKV file's structure. For best results the first frame transmitted to the client should be akeyframe.
If you only need video but not audio, "Motion JPEG" can do it. It's not HTML5 but a Netscape-era feature.
http://en.wikipedia.org/wiki/Motion_JPEG#M-JPEG_over_HTTP

Is there a compatible way to serve videos to mobile devices?

I was wondering how to embed a video on a webpage to have it compatible with mobile devices. I am kinda new to the whole mobileweb. So I set up some testing pages and tried them out with some devices of my friends. Flash is obviously not the way to go. Embed tag neither. html5 video tag neither. I also tried to nest them for fallback compatibility but just didn't get it right.
So I had a look at youtube. They are using rtsp streams and they just let the device handle the rtsp:// links. This seemed to be working everywhere, and I think they do it for a reason. So I had a look at rtsp protocol the possibilities to serve such a stream.
Turned out its really simple and doesn't really differ much from the http protocol. There is e.g. ffserver out there for that.
But every free/os implementation seems to be testing/buggy ...
So I ask you guys. I cant be the first stumbling across this problem.
Isn't there a nice tested way to embed videos with nice compatibility for mobile devices? preferably served from a http source!
looks like html5 is the way to go but important are the correct encoding settings.
h264, baseline 1.3 seems to work fine with iphone4 and android 2.1 ... rest untested.
I've been collection information about mobile compatible video players, you can find it here: http://blog.jsethi.com/media/html5-video-players/
The solution would be to use Kaltura open source platform. If you have have the knowledge to set it up it's the winning solution.
Here is my kaltura running HTML5 with flash fallback. http://cdpn.io/DeKuo
Read more here http://www.kaltura.org/
and here http://html5video.org/
Good Luck !