I am trying to build a website which allows uploading of images and videos from a normal browser. This portion is easy. The tricky part which I am unfamiliar with is allowing mobile users to submit images/videos. The goal is for a mobile user to easily upload the image. Any ideas/suggestions on how to tackle this? Thanks!
*I should mention I already have a functioning website that allows image/video uploads using simple html file form. Also, I am using PHP to develop.
It is not very difficult as you may think.
There are several approaches to this:
1) You can build a mobile version for your website that fits mobile screen.
2) Build a webservice and doing a post form request from your mobile application(e.g Android).
You can have a look at mobile version to get the idea behind this.
Android: Sending an image through POST
Related
I need to know a method to upload a video to a VIMEO PRO account using a form and PHP (to get auth). Currently I can send a video directly to Vimeo, using the panel, as was to be expected. But I have some clients that want to upload your videos directly from my their control panel (created by me), outside of vimeo, and I have only a unique PRO account, and I can't share the account data.
Seems that I can do it, based on the page API https://developer.vimeo.com/apis/advanced/upload#post (Uploading via POST).
My doubts are:
Can I really do that, without pass to my clients the Vimeo PRO account data?
It's a secure method (considering that clients respect the agreement with Vimeo)?
I need to upload DIRECTLY to Vimeo, without pass to my server, because I'll have two works: one to upload to server, other to upload from server to vimeo.
Off-topic: I believe I will not have problems with Vimeo, since they are customers of one company, and the account belongs to the company, and the videos will be her responsibility.
How should work
User access my panel, with your credentials;
User access the video upload page;
Probably the server will contact Vimeo to get an uploader auth;
User will select your vimeo file and submit form;
System will receive the vimeo ID and everyone will be happy forever.
Thanks!
Edit: This feature is now supported by Vimeo's (in beta) API3. You can request access at https://vimeo.com/help/contact
The below information is still accurate in regards to the Advanced API
This feature is not reliably supported by the advanced api.
The primary issue is that with client side uploads, there is no way to tell the upload server what to do once the upload is complete. Additionally, there is no client side technique to find out whether the upload has completed
You might be able to cheat and have the user upload through an iframe, and have the primary page perform a verify chunks call every couple of seconds. I have not tried this, at the moment it is just a theory. If you attempt this hack, Vimeo would love to know more via their contact page https://vimeo.com/help/contact
The feature you are discussing is on the roadmap for the next version of the API, and an early imperfect version was available at their API Hackday. It might be a better idea to hold off a bit and wait for the official feature.
NOTE: This observation does NOT apply to server side uploads. Because the whole upload process is handled via code on the server, it is extremely easy to tell when an upload is complete.
Answering in 2016: Assuming you have already retrieved an access token from Vimeo (OAuth2) this is a good piece of code to help you create an upload form:
https://github.com/websemantics/vimeo-upload
This gives you the code for the form with a place to drag-drop your video file and calls the upload API:
If you're using WordPress, there is a plugin available that allows you to do just that
http://vimeography.com/add-ons/vimeography-upload/
Source: I made it :)
How to record user's voice from the website without Flash? I want to use HTML5 but I found it will be hard to implement that. This site says this functionality is now only supported by the latest version of Chrome and Opera.
After searching the articles both here and the other site, I decide to find an alternative approach.
The scenario is: users will use different sort of platform (Android/iOS and other OS), but they access the same website and record their voice in their device and upload it later.
BTW: My purpose is that, as the users press the "Record" button on my web-page, the recording starts with his microphone. And as he presses the button again, the process stops. This can be on an iPad or a mobile phone so that he can't record his voice by some other software and store in his device then upload. They use their device to link my web-page to record voice. The webpage is not just for the users who operate on a PC.
Can I implement this function in client side via javascript? Or I should refer to Server side? What language and method should I adopt?
You can check google's web fundamental article on recording audio here : https://developers.google.com/web/fundamentals/media/recording-audio/
Its pretty easy to follow and it is device independent, obviously given correct browser support. You can get the audio recorded and saved on the local device or upload it to a server. Hope it helps.
oh, and on a note, its based on HTML5 and js. I don't know why you think implementing it using HTML5 is difficult but I hope this helps.
If it was up to me, I'd go for something like the link mentioned above and just use a fallback to Flash applet if its not supported in the users browser.
When it comes to the mobile platform, you'll have a big problem at least with the iPhone. I dont think you can upload files, and Iam pretty certain that you cannot record audio from their microphone. The best approach would be an application to do such a thing on mobile devices. Iam pretty sure that this can be done with PhoneGap - http://docs.phonegap.com/en/1.0.0/phonegap_media_capture_capture.md.html
If your not familiar with PhoneGap it allows you to write cross platform applications for mobile devices in HTML/CSS/JS and still get access to some core components. Like capturing audio.
Unfortunately no, you can't record from the browser, however, if you have an app (you can use Phonegap/Cordova (which use HTML5, JS and CSS to build your app for many platforms)) to record whatever you want to record, you can easily upload what you want to your server. It is currently impossible to use pure HTML5 in the mobile web browser to do this.
If you want to learn more about this, the API reference is a good start: http://docs.phonegap.com/en/2.1.0/cordova_media_capture_capture.md.html#capture.captureAudio
Is there a way to scan a UPC or QR code from a mobile website (html5 + php)? I'm looking for a solution that would work on both iPhone and Android devices. From what I have found, it seems that there are possibly some ways to do this on an Android by calling an installed Scanner app and using a passback URL that would pass the data back to the web app. Any help is much appreciated!
For Android, I would recommend using the zxing barcode library. It's open source, and I am pretty sure it is what Google Goggles is using:
http://code.google.com/p/zxing/
Then, you just load your website/application via a webview in Android:
http://developer.android.com/guide/webapps/webview.html
You can attach an API to the Webview that allows you to call Java code with javascript:
http://developer.android.com/guide/webapps/webview.html#BindingJavaScript
I can't help much on the iOS side. Though, I do know they have a webview available and you can probably find an open source barcode scanning library to use.
Once you write the webview "wrapper", future updates can be mostly delivered via the web since the user will just be loading your webpage, even if they think the app is native.
I did it in iOS (I can't answer the android portion) using a set of plugins, plus I inserted my own additions to make it a 1-stop setup.
unzip the attached zip file into your project ( https://github.com/chwagssd/qr/archive/master.zip )
point to <script src="path/to/decoder.js"><script>
Create a file input in your HTML page that has an id, say "xxx"
<input type="file" id="xxxx">
Then tell the page on load to QRIfy your field! Make sure to include your callback function, which will be called with a single argument (the FULL TEXT that was scanned): QRIfy('qrCode', onQrCode);//where qrCode is the id of your
<input type="file" id="xxxx">
I have setup a GIT repo here, grab the code (you can download the zip and put it in your javascript folder)
https://github.com/chwagssd/qr
I'm trying to allow users to take pictures with their webcams and save it. How can this be done? I am looking for something similar to Facebook or dailybooth in terms of their UI. I know smoe PHP/jQuery but I'm also wondering how I could save the pictures once "taken"?
The Facebook webcam thing is made using flash as you can see here:
This is all pretty easy to achieve with Flash (the actual capturing of what the webcam can see). I'm not sure how developers get from there to uploading the image to a server, though.
If you have knowledge in Flash / ActionScript 3, then this will get you started:
Camera.getCamera()
I need to upload video files through Facebook application and later visualize all uploaded videos so that people can vote for a video they like. I searched and read some articles, but I still have questions that are not completely clear for me:
Is it better to use iframe or FBML
If I use iframe is it possible to use input type="file" and PHP to handle the uploading just like on a normal page (not with Facebook PHP SDK)
Please give me an advice what direction to take.
Uploading to Facebook using their API is notoriously difficult; first of all check out the thread on the faceboook dev forum.
I would recommend doing it in an iframe, and you'll need about 60 cigarettes and several large whiskeys to get it working.