I need to implement some kind of audio/video chat.
Customer wants maximal cross browser compatibility (ChromeFrame is not an option).
I've read about WebRTC, it's new and cool, works in Chrome and Firefox, but IE is problem.
Any ideas on implementing this chat for IE ?
WebRTC is not well supported, thus it is not "maximally cross browser compatible".
For maximum compatibility you'll need to either write a browser plugin or use Flash. The fact Google Hangouts require a plugin download is a pretty good indication that this is probably the best solution for supporting the maximum number of users. But it's also non-trivial.
Honestly, implementing audio/video chat from scratch is hard. Really hard. So you should probably avoid it. Instead, consider using a third party solution that you can embed. Assuming that's the route you want to go, you should probably head over to Which service to embed a videochat easily on a website? .
Related
HTML5 audio on mobile devices has many limitations and actually I would call them bugs.
My app implementing something like audio player.
Actually all it works fine for desktop but in mobile version I encounter many bugs and have to do many workarounds different for different browsers and os to get it work, and still it sucks.
I haven't dived into web audio api, but it seems to be designed for slightly different tasks.
So my question is, is it make sense (and is it possible?) to replace HTML5 audio with Web Audio API, if I need just to load files and play them (partly, sprites) just to avoid limitations and bugs of HTML5 audio?
I think you're probably going to find at least as many bugs or edge cases with Web Audio on mobile as you're seeing using the <audio> element. Plus, support for Web Audio on mobile platforms isn't great. If it were me, I'd be inclined to stick with <audio> unless you have a specific use-case that can only be addressed by the Web Audio API.
Actually, I'll disagree - if your goal is to play short snippets of sounds, particularly simultaneously - e.g., providing sound for a platform jumper game - Web Audio is going to be a lot easier to use, including on mobile. has issues managing multiple files/instances. On the other hand, if the problems you're running in to are due to decoding issues, or you're using mostly long files, it's not going to help, as Kevin and Brad said.
I recommend SoundJS which I develop, it takes a lot of the pain out of supporting audio on multiple devices. Basically it lets you write a single code base that works everywhere and already deals with edge cases where it can.
HTML Audio element implementation on mobile devices is really terrible, so if not SoundJS I would at least recommend switching to Web Audio which works well on iOS and Android Chrome but is not supported in Android Native browser.
idbehold's comment is accurate, the most common problem with mobile devices is having to play audio inside of a user initiated event (touch). I've developed a solution to this problem, shared in the Mobile Safe Approach tutorial.
Hope that helps.
I'm working on kind of an educational site, where there are teachers and students around the world (potentially). Since it's a non-profit site, and I don't have the need for it to be done tomorrow (kind of a side project of something bigger), I wanted to know the best way to figure out how to do this. I'm not a programmer by trade, I've been on the systems side of things for years, but I understand most technology and the question here is more how to gauge what to do so I can get the right resources in place.
That said... here's what I am looking at. I figure the future is HTML5, and that's probably where I'd rather spend my efforts given that it will be cross platform and without the need for plugins. It will work on mobile as well. Question is, how well does HTML5 handle input media, say desktop capture and camera, or on mobile perhaps, where I'd want to use the user's phone camera, etc.
Second question is dynamic streaming... I've read about MPEG DASH, then there are technologies like Smooth Streaming (which I think given the way Silverlight is going is going to be gone or useless), then also Apple and Flash, but if I'm doing HTML5 it doesn't benefit me. Any ideas here would be really helpful, and the more detail the better! :)
That's about it... there are free chat services out there like using the MSN Web Chat controls (how good they are, I don't know, but worldwide most people have a Hotmail/MSN account) so I can use that for chat. I don't know its limitations of course, but that's something if people know or have suggestions, then I'm all ears.
As far as I know the video tags doesn't support input media as such, all it does rather well for the moment is play video files IF the file formats is supported by the given browser (different browsers different extensions) Also I have seen out there a solution where someone stream their own webcam into the video tags but that was on Mac only and using other technologies to help out.
The video tag is not supported by all browsers either, recent modern one will but if you need to support IE flash is still a better alternative way to provide videos across all platforms.
Streaming is only partially supported by some browsers and is not an easy task to achieve.
Here is few links that might help.
http://ishtml5readyyet.com/
http://html5readiness.com/
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
There are actually several posibilities to do this since HTML5 makes it super easy to stream most the basic input using video tags is however very much limited because you won't have actual access to the bytes like you would want.
But to convert something basic like mp4 to html5 compatible video just use this converter tool:
http://easyhtml5video.com/
My team is writing an HTML5 app that uses the appcache and localstorage heavily. Our target platform is ipad and android tablets (and design time we work extensively in desktop browsers, though that's not necessarily a must-have).
Now we want to add some offline-available features that will be beyond what the browser-based storage can support-- namely a library of video & binary content that will be bigger than the appcache can handle.
Without the major mobile browsers implementing the html5 filesystem api, it seems very much like some kind of native app approach will be required (PLEASE correct me if I'm wrong here... I'd love to be wrong on this!). So, I'd love to hear opinions/experiences folks have had. We're noodling around with a few different ideas involving one or more of the following:
Compiling in phonegap + using their file apis
Using the Dropbox sdk (which would also require some kind of native support, not sure if phonegap would work)
writing per-platform custom native apps that host webkit controls, then providing the majority of functionality with our existing, cross-platform html5 app (basically we'd be writing a per-platform custom browser using the standard webkit controls).
Note that I'm a fan of #3 because I feel like we could release a relatively stable shell but then preserve the html5 cross-platform goodness & ease of distribution of our app. However, I don't know if this approach works (and/or if Apple frowns upon this type of approach-- seems like a bit of an App Store loophole).
Very interested to hear what you've tried and/or heard about.
This might be a completely stupid idea but, if you're looking for a cheap way to get extra storage, why not just use an html or js file to contain the data? You could even, for whatever reason, store it as a 64-bit data uri and run the media natively. I think you could even save data to it by just manipulating the manifest to be reflective. It'd take a bit of tom foolery, but it should work.
If you use approach 1 you will be well positioned to move to a web app once the major browsers support the File API. You see the File API in PhoneGap is based on the W3C spec that the browsers will implement.
2, I started working on a Dropbox plugin for PhoneGap Android but I need some "spare time" to finish it.
3, Apple will probably reject your app if it is just a wrapper around your web site. They've done that in the past.
Simon
I'm currenlty desigining and building a website where I need to embed some audio files (some 60sec extracts from various tracks from a band's album) so people can listen to their material quickly without having to download any files to their desktop etc.
I know QuickTime was a favourite in the past (perhaps it still is?) but I've had some experience with lag and poor load times of a web page because of this. Also, I understand there's an tag in HTML5 but I wonder about compatibility?
Really I just wondered if anyone had any recommendations on the a tried and tested approach to accomplish this?
Not an ideal solution, but I went for a Flash based plugin in the end - seems to work resonably well on compatible devices (shame it's not particularly well supported on mobiles/tablets etc. though).
Give 'dewplayer' a Google if you're interested...
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.