Capturing photo , audio and video from web application - javascript

I am making a web application which has the functionality of capturing the photo, audio and video. Till now i have considered the JQM and Sencha framework.
For photo i am able to directly open a camera using Sencha and it works great. But for audio and video i am not able to find solution like photo. Does anyone has done this? or have an idea how can this done?.
I am aware this can be done via Phone-gap but that is for the Hybrid App (native + html5) app i want to do it for browser.

There is no API in html 5 that will allow you to acces the camera/microphone directly in iOS.
Since iOS 6 there is only the option the upload an photo via the input tag.

You could try getUserMedia.
Supports is still sparse though - see here
Tutorial - see here

I highly recommend using Media element. I've built entire JQM mobile solutions using the video player capabaility, and audio.
http://mediaelementjs.com/

Related

How to download/save HTML5 Video on IOS to device

I'm building a web application that creates a slideshow mp4 video. It will be uploaded to S3 and viewed through HTML5 . The goal is to share it on instagram but instagram doesn't allow direct sharing through web. Hence, the alternative is to get the user to download it to their mobile device and upload it manually through the app.
On Android, I'm able to download the video using it's video controls or through <a href='s3-video-link.mp4' download>
However this doesn't work on IOS. How can I download a html5 video onto the mobile device? Can I download directly from s3 somehow? Or is there any possible option to get it to upload to instagram?
The sandboxed nature of iOS means that while Safari can access and download a file unless there is an app registered to handle that filetype that immediately accepts it then it is lost to the user.
If the user has the Instagram app installed, then you could use their custom URL scheme to reference the asset, but the documentation seems more targeted to images than video so YMMV.
There have been some attempts to reverse engineer the APIs that their app uses, and create ways around their current limitations, but nothing that would address your requirement (the various sharing widgets that target Pinterest, Facebook etc don't seem to support Instagram so it's a common problem). Might be worth reaching out to their developer support folks?

iOS streaming user camera on html5 without WebRTC

Does there have any way to help me streaming devices's camera on web page?
I need to keep show it on html5's video tag can't use like <input type="file" capture="camera">this code or Native Code.
thanks for answer.
Unfortunately, like you states, WebRTC is not supported on iOS devices (keep yourself updated using this page). streaming a video from a web page on an iOS device is not possible using conventioal HTML or Javascript methods. You can upload a video element, but not stream it. That would require access to navigator.webkitGetUserMedia or navigator.GetUserMedia, which again, is not supported on iOS browsers (yet).

HTML5 and javascript in xcode

I'm quite new to xcode, because I mostly work with JS and HTML5. I've decided to create a simple webview app that enables me to work with JS and HTML5 (going to put it on Github asap)
Now my question is about accessing certian iPhone features that I cannot use in Safari or Chrome (the reason why I'm creating this).
So the question is: is this possible? for example, I can't access the camera (as a fullscreen background I mean) in an iOS browser, but can I use it in webview?
You need any method of communicating between UIWebView and the containing app. There are libraries out there that do just that, some better some less. In case you do not want them... So to outline the techniques to do that:
App talking to the webView - using [webView stringByEvaluatingJavaScript:...]
Webview talking to the app - using url directives. Which is essentialy window.location = ... with custom fake urls, and then parsing the NSURLs in the delegate method webView:shouldStartLoadWithRequest:navigationType: and of course returning NO to prevent actually navigating to your fake urls.
If you find that you are missing consecutive URL requests, you could write a JS function that takes the URLs, puts them all in an array, pops one by one and sending them to the browser in a setTimeout(..., 0).
You need to use something like this - Cordova or PhoneGap ( Both are the same thing )
"Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript."
Here is a description of all the device features cordova or phonegap allow you to use - Plugin API's
Yes, is it possible, but using a web app container like Phonegap.
If you need more info how install it visit this web.

Capturing image with webcam

I'm working on a project with Asp.net MVC4. I need to take pictures with a webcam. This application should be configurable with any tablet.
Currently runs the application on desktop, on tablets no.
I am using jscam.swf and jscam_canvas_only.swf.
On tablets I use this the Samsung Galaxy on these devices install adobe flash player to a well does not work ... someone knows some other technology to take pictures or if someone can help me solve this problem I'll be grateful
Flash has limited support on Android tablets and no support on iOS devices.
A better solution may be to move to 100% HTML5. When using HTML5, your browser has access to your webcam. Below are some links showing HTML5 accessing your webcam:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas
https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia
Latest method as of 2020
const userVideo = await navigator.mediaDevices.getUserMedia({ video: true })
const userVideoTrack = userVideo.getVideoTracks()[0]
const photoBlob = await new ImageCapture(userVideoTrack).takePhoto()
You can then proceed the blob with something like the FileReader or URL API.
Have you tried with Silverlight? Since you are using .NET this might be helpful. http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/
SL is a simple plugin it runs on every browser, you just need to embed your Silverlight component within your view code and the browser will handle it as an object tag.
Hope it helps.
I found the way to enable the camera and audio using HTML5 Chrome using Android for tablets.
We connect to chrome://flags/ and look for WebRTC.
After we enable this flag.
Restart the browser or tablet and working properly.

Audio recording with HTML5

I'm trying to implement audio recording in a website. Basically the user should be able to press a button and speak something into the microphone. The recorded audio should then be sent to the server for further processing. I realise that you can do this with Flash, but for now I'm trying to avoid that.
I found several resources on the internet about it (i.e. link) but as it seems, this functionality is not widly supported yet. I experienced differences betweet the used browser and between the used operating system. For instance, the Chrome Browser doesn't seem to access any microphone on Linux correctly. So i was wondering if anyone knows a good resource to dive into this. Or maybe someone tried to set up something like this himself, and can help with some suggestions about where the limitations of HTML5 and the JavaScript Web Audio API are right now.
Thanks!
As of Chrome Version 27.0.1453.56 beta Mac, audio recording works with this demo application https://github.com/mattdiamond/Recorderjs
This app returns back a WAV file for the user which can be uploaded to the server.
If you want a truly robust solution that works on most desktop web browsers, you may need to resort to Flash.
This article covers up pretty well the current state of audio video capture possibilites using HTML5:
http://hdfvr.com/html5-video-recording
Also for just audio capture, here's a gitHub project that records audio to mp3 directly from the browser:
https://github.com/nusofthq/Recordmp3js

Categories

Resources