Recently a client asked me to make their site "work on smart phones", which normally wouldn't be too much of an issue... However it's a video site, and I have absolutely no idea where to even begin. Right off the bat I'm not even going to consider allowing the site to even function in anything other than Android (Maybe even 2.0+) and iPhone, maybe Blackberry and WinMo. But beyond that... What do I do? I'm looking at using the tag, however I'm unsure what, if any, codecs which phone uses. Is HTML5 even adopted in their browsers yet?
Could someone please point me in the right direction? Am I going about this the right way, using the tag? Or is there some magical html element both iPhone and Android (And BB and WMo) that lets them run video in their native video players (Like on youtube).
I have glossed over this book (Beginning Smartphone Web Development) - it looked very good re: what's special about small form factor browsers
Related
I ran into this problem in Safari where it appears that WebRTC is not fully supported. So when I call
navigator.webkitGetuserMedia()
I get an undefined error.
So my question to the community is what is the best way to write a Meteor app that captures Video on a mobile device and saves it on the said device.
If you have done this, I would appreciate it very much if you could share with me and the community how you went about this.
Specific Answer
The modern API is: navigator.mediaDevices.getUserMedia(constraints). See the docs here.
In the past, I've been unsuccessful with getUserMedia on iOS, but according to this post it can be done on iOS 11.
As for saving it, you can write to the browser's file system, but that API is only supported in Chrome. If you want to write to the camera roll, you'd need native code in the mix.
General Advice
I've spent several years of my life dealing with recording, uploading, and processing video using meteor. If you are doing anything more than trivial web recording, these observations may save you some time:
Chrome (on everything but iOS) has the best API for web recording. If you can require chrome for recording, that's ideal. Firefox is a close second, only because it doesn't support the file system API.
If you need to record and upload long videos on iOS, build a native app. Don't consider any kind of hybrid - that's a serious trap. The number of corner cases and things you need to check is pretty astounding, and the only way to get over those hurdles is with native code.
I want to build a facebook app featuring a personalized video which imports content assets from the user's facebook profile and their extended social graph and integrates these assets within the timeline. I am thinking of using Flash however a key stipulation is that the app works on mobile - and so I would need to use HTML5. My question is: Can I use Flash to build the application and then compile the app as HTML5 - or is there an alternative solution in the form of a HTML5 video toolkit with a programming layer that would allow me to build a web app / access the Facebook API?
I have done this a few times over the years and yes flash was the easiest however there are a few options which you have available to you that I know of which will be purely HTML5 based, personally I'd stay away from flash here as it will end up just getting int he way:
1- The cleanest method is to use a video compositing tool on the server side which can be programmed to accept variables. Personally I have only ever done this using ffmpeg however there a couple of alternatives which are out there.
The basic process would be to grab the media from FB then to composite them at certain point on top/below/around a base video which is sitting on the server using a shell script which you then pass the media assets to as variables. There are so many options as to how you might want this to be done, probably best id to have a look at some of these examples:
http://broadcasterproject.wordpress.com/2010/05/18/how-to-layerremix-videos-with-free-command-line-tools/
http://graphcomp.com/ffmpeg/
ffmpeg watermark without vhook?
note that last time I did this I used vhooks and custom filters, vhooks are now deprecated
This method will mean a reasonably heavy server load if your app is popular but it's probably the most robust across devices etc.
2- Use Popcorn.js, and let the processing be done on the client side. you could hard code it using css/js/html but popcorn is pretty stable although I havent seen how it runs on devices but in theory it should work (all standardized technologies). Basically the process would be to use javascript to fire the display of images overlayed on the video base file at preset cue points. Popcorn has all of the methods and means for you to do this already.
Hope this helps a bit. Good luck, sounds fun.
we realised some interactive video apps and one recent project was quite like your question describes.
We used adobe flash to track the motion - and published the project via create.js. You could have an image sequence from within create.js or put a video in a layer behind. This video would then control the player head time of the create.js motion tracked sequence via jquery.
worked fine - here a link to a testsetup with an image sequence.
Video Integration would be the next step.
http://www.jungeroemer.net/projekte/testpersvid/elftest01.html
(German text, sorry but it's nothing important to read there.
Just click the images and go for it)
you can download the sources from the link, if you need i can also upload the flash file to show you the motion tracking.
Ok, so I'm working on a project that will allow users to record themselves within a browser and have the video save to the server for later watching.
Right now I have an implementation where I'm using Red5 server with Red5 Recorder and that is working fine, but I'm wondering how exactly you could go about this on an iphone as that is expected to be a large user base.
As far as my research has shown there is no universal way to gather this video within the browser as there is no HTML5 solution and Flash seems to be by far the best way to record webcam to a server.
So what I'm wondering is has anybody encountered this issue and found a solution, whether it be for Iphone only, or a universal solution that would work across all platforms.
At the moment, the only way to accomplish this on the iPhone would be to write a native application. The web browser doesn't give access to the camera, and it doesn't support Flash, Java etc.
Firstly, as this is essentially a multi-disciplinary question, please feel free to submit answers which only answer one part of the post - I will upvote answers which satisfy any of the questions below.
Hi, we are putting together an installation in which:
Audio comes in through a microphone to an FM transmitter
Transmitted to receiver
Receiver is plugged into computer's Line In
Audio is recorded/streamed as an .m3u stream, or recorded, and then uploaded(?)
Stream is accessible by scanning QR code on iPhone/Android.
I have a few questions around the subject that I was wondering if people could help with.
This is kind of a minor first question, if you are able to answer the second question, but is the best way to deal with incoming audio to record it 'before' uploading it, resulting in a delay, or is it to stream it?
I'm not sure of the best way to host the upload, as I suppose that it would be either an .m3u stream or some kind of progressive .mp3 that would need to be uploaded somewhere that supported this. Any advice? Is this kind of thing possible with free webhosting solutions? It would preferably be above 128kbps, too.
Initially, I presumed that the easiest way to have an audio stream linked to a URL that allowed for QR code linking was to build a very simple webpage with a media player on it, so that the end user wouldn't have to download any external application, and it could be done through the Android/iPhone browsers. Is this the case? Is the easiest way of doing this with something like <video> or <audio>, or is the HTML5 support for the mobile browsers not yet good enough? What are the alternatives? Something like jPlayer looks like it would work?
Thank you for your responses, I can give any necessary technical information you may find relevant, but these are quite broad questions. We can run the stream from either OSX 10.7 or Windows 7, as we have both, so recommendations for suitable software for either platform are welcomed.
Thanks again!
EDIT: Information from jPlayer.org -
HTML5 Audio Streams
HTML5 browsers and their support for audio streams. (Note that, jPlayer's Flash fall-back for non-HTML5 browsers works with MP3 streams.)
Audio streams work on:
Firefox (OSX, Win): OGA
Safari (OSX): MP3
Mobile Safari (iOS4 iPad/iPhone/iPod): MP3
Opera (OSX, Win): OGA
Chrome (OSX, Win): MP3, OGA
IE9 (Win): MP3
No mention of iOS5 or Android, but I used my android phone to check out the jplayer 1.2 stream demo they have up on their site, and it works. Seems like this could be the answer, but I need to know a little more about hosting, and perhaps iOS5 compatibility, though I'm sure it must work going forward. Anyone?
I recommend going with a standard SHOUTcast/Icecast setup.
First, you need an encoder. I recommend Edcast if you're doing this under Windows. The encoder is responsible for listening to your sound card, and encoding/compressing the raw PCM data into MP3, or whatever format(s) you need.
Next, you need a server. Again, SHOUTcast or Icecast will work great for you. No, you typically cannot host this on any free web hosting provider. Fortunately, hosting for SHOUTcast streams is cheap, and readily available. You can also host the server yourself, if you have the necessary bandwidth. It doesn't take much CPU/RAM.
Finally, you need a player. Your jPlayer will work just fine. For iOS, I usually just link to the playlist file and let it play. On Android, you can do a Flash player. HTML5 compatibility is there though, and jPlayer would be the way to do it.
Also note that there is no such thing as a ".m3u stream". A .m3u file is nothing but a playlist file, that contains the URL to the streaming audio. That's all.
For the QR code, just link to a web page URL that contains your player. That's all you have to do.
If you have more specific questions as you go, you should post them as separate questions here.
I need to have an intro video for a site which I need to work on all browsers including safari on the iphone and IE6. I am thinking of trying to do flash with a html5 fallback or vice versa.
Has anyone had any experience of attempting this? I need to try and get a smooth a transition from the video into the content of the website as possible. Am not sure what limitations exist on the iphone?
I know intro videos aren't well liked but this is a requirement for the site.
EDIT -
One thing I would really like to be able to do is play video in page on an iphone automatically, while it is looking like it isn't possible I need to know for sure as I have been told it may be using some combination of canvas and video elements or wrapping the video element in some way. I was sent the following link
http://html5doctor.com/video-canvas-magic/
You need to stop and determine what's more important: Supporting a browser that is over a decade old or supporting a platform that is growing rapidly. That's really it. But if you continue on that line of thought, you'll learn quickly that you can't do HTML5 animations in any stable version of IE currently anyways.
So, you have two options. Develop in HTML5 and place alternative text in it's place for all IE visitors or develop in Flash and place alternative text in it's place for all iOS devices. Honestly, doing the same video twice (Flash and HTML5) seems like wasted effort. (Even with Google's new "Swiffy" SWF -> HTML 5 convertor, it's good, but it's not perfect and it doesn't support audio.)
If it was me in your shoes, I'd go with HTML5. IE10 is right around the corner and it supports animations. HTML5 is the new standard and that's the way everything is going. It seems like the logical choice to me.