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.
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 am creating application which is having functionality like 1 person can view video live from another iPhone, i.e. one iphone is recording and and another is viewing the same, as we do with FACE TIME, but this things to be performed by our own server.
I come to know to USE XMPP client, and also we can use google Api , but how to use and what else things are required to create such kind of application ?
Also shall we need to create own server side part or we can hire other servers , like google/gtalk or any other which is already ready.
please guide me what other things are required for the same.
thanks.
I believe that for connecting 2 devices together GStreamer is one of the best choices: it's broadly used and there's a lot of materials/docs on it.
GStreamer has a pipeline architecture that inspired by DirectShow and Quicktime, and it provides a command-line tool named gst-launch that allows you to create a pipeline and quickly test several components of the library together.
This message, shares some interesting info on how to stream video directly from the iPhone camera using gst-launch, while receiving the data on a PC through VLC. Which means, 50% of what you are looking for is already done.
Another option, also demonstrated in that message, is to use FFmpeg.
I'd like to advocate ffmpeg, which has been successfully migrated onto iOS.
What you need to do is:
1. rewrite ffserver, use camera input as the video source, and encode it by H.264/MPEG-4 encoder
2. rewrite ffplay, so that it can display video on iOS devices. The network protocol and video decoder part are ready.
Does anyone know if it is possible to save media from the internet on the local device using Sencha Touch? From what I've seen so far, I understand it's definitely possible to save XML or JSON data locally on the device, but I have had no luck finding ways to store media locally.
To be more specific, I am looking to program an app that provides the user with a series of audio seminars - like podcasts, really. The user would be able to stream those audio files directly from the internet, but I also need to provide the user with the ability to save an episode/seminar for later. This will be important for when a user is traveling and does not have a reliable internet connection or data plan.
The primary delivery device would be on iOS (iPhone, iPad, iPod Touch) and I would hope to be able to use the same technology on Android devices - but that would be a secondary phase.
If this is possible, how would I go about saving material? And what, if any, would be the limitations on doing so? Any thoughts on this would be greatly appreciated.
I have done something similar using Sencha Touch 1 and PhoneGap to produce a hybrid app.
Basically, I use Sencha Touch to download the JSON, etc and LocalStorage to hold the data. Downloading media/files/etc to the actual device is not supported in Sencha Touch as the framework doesn't have access to a file system.
I then use PhoneGap's API's to tap into the device's native file system and download files to the app's Documents directory and pass the file names/paths to Sencha Touch for use in the app.
I'm assuming you are looking to create a hybrid app based on your question but if this is strictly a web app then there isn't much you can do.
TO add to the above point, you possibly could base64 encode the file and store it within LocalStorage but this isn't a sustainable model as LocalStorage only gives you 5mb of space. If you go over 5mb, the user is prompted (yes, no) to allow LocalStorage to use more space (in 5mb increments). Since the files your reference have the potential to be 5mb each, you can see how this could quickly become unmanageable for both you and the user.
EDIT:
See http://phonegap.com/ for the native wrapper
http://blog.clearlyinnovative.com/post/2056122828/phonegap-plugin-for-downloading-url-all-the-code for the phonegap download plugin
and https://github.com/aaronksaunders/FileDownLoadApp for the code
Check this website out. Scroll down to storing data offline. They discuss Sencha Touch provides a set of data store and proxy classes that make it very easy to work with data from (and going to) a variety of sources - both server- and client-side... hope this helped, cheers.
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.
I know that i have to use gstreamer for creating an application to capture photo and videos
from web cam. But, i could not find any documentation describing vividly the steps for creating the
same. It will be very pleased,if any one could helped me in this.
Regards,
iSight
There is a GNOME/vala tutorial in the work that shows you how to make a Gtk application to grab pictures:
https://developer.gnome.org/gnome-devel-demos/3.10/magic-mirror.vala.html.en
Saving a video is left for you to do, you'll have to use a tee to have both live preview and recording simultaneously.
Also, there is a high-level object, camerabin, for your case, but I never used it myself.
Camerabin is being used by libcheese, that is even higher level and depends on Clutter (but not Gtk), and allows you to plug effects with cheese_camera_set_effect().
Pick what you need!