I am looking to find a way to shoot and record video using the iPhone's camera using HTML 5. I referred this document.
http://www.w3.org/TR/html-media-capture/
I have tried using the HTML Media Capture API as told in several posts. But I cannot access the camera. I'm using the following code in my HTML file which is rendered in an UIWebView.
//A choose file button which is actually disabled came up.
<input type="file" accept="image/*" capture="camera" id="capture">
which didn't work.
And this code,
//Didn't worked
window.navigator.getUserMedia('audio, video', function(){
alert('Success');
}
, function(){
alert('Error');
});
and finally this one,
//This came up as [object Navigator]
alert(navigator);
//This came up as undefined.
alert(navigator.device);
Is video capture in iPhone actually possible via HTML 5? Does this means that Media Capture API of HTML 5 is not yet fully deployed? If so will it be in near future? Could someone point me in the right direction?
Not currently. You will have to use a framework like AppMobi or Apache DeviceReady(Phonegap) to get access to the native camera via JavaScript in a UIWebview.
Related
I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.
I've found this so far:
Using Drag and Drop From JavaScript
Safari, Dashboard, and WebKit-based
applications include support for
customizing the behavior of drag and
drop operations within your HTML
pages.
Note: This technology is supported
only on desktop versions of Safari.
For iPhone OS, use DOM Touch,
described in Handling Events (part of
Safari Web Content Guide) and Safari
DOM Additions Reference.
Here. But it's outdated (2009-06-08).
Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).
Thanks!
I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).
Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
I have found native html5 drag&drop now works in safari, with a few specific notes;
You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');
you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)
OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)
On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails
I thought you required
CSS -webkit-user-drag: Element; and `-webkit-user-drop: element;
or if you prefer
Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
but it seems just the usual draggable attribute is enough
Element.setAttribute('draggable',true);
This seems to be the bare minimum to drag & drop an element
Element.setAttribute('draggable',true);
function OnDragOver(Event)
{
Element.setAttribute('DragOver',true);
Event.stopPropagation(); // let child accept and don't pass up to parent element
Event.preventDefault(); // ios to accept drop
Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
}
function OnDragLeave(Event)
{
Element.removeAttribute('DragOver');
}
function OnDrop(Event)
{
Element.removeAttribute('DragOver');
Event.preventDefault(); // dont let page attempt to load our data
Event.stopPropagation();
}
function OnDragStart(Event)
{
Event.stopPropagation(); // let child take the drag
Event.dataTransfer.dropEffect = 'move';
Event.dataTransfer.setData('text/plain', 'hello');
}
Element.addEventListener('dragstart',OnDragStart);
Element.addEventListener('drop',OnDrop);
Element.addEventListener('dragover',OnDragOver);
Element.addEventListener('dragleave',OnDragLeave);
Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:
http://www.html5rocks.com/en/mobile/touch/
our app loads profile pages from our website INSIDE the app. They have been optimized for iPhone css, but they are still an html page. Our mailto link isnt working as expected.
When clicked, nothing happens. However, when clicked and held (tap and hold), the menu slides up with "new message", "create new contact", "copy", etc.
How should this be formatted to get the Mail.app to automatically launch?
<a class="action_bubble" target="_blank" rel="external" href="mailto:bob#bob.com">Send Email</a>
The "call" link works as expected.
<a class="action_bubble" href="tel:1234567890">Call</a>
So, not sure what to do with this...
Here is a project on GitHub that addresses your issue. Basically, when you use a UIWebView controller, you need to decide how to manage the links using the delegate handler for UIWebView. In Interface Builder you can have it automatically recognize phone numbers which is probably why your phone numbers work and it will recognize http links as default behavior. However, mailto and some of the other special href options will need to be handled manually.
make sure "Detection" property is set for your UIWebView like "Phone","Address". you can set it from your IB.
or from code
self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
Could it be, that you have just tried within the simulator? The simulator does not have a mail app, so it couldn't be opened. Try on a device. I think your code actually works.
I've just tested on a device: your code works.
A little late to the party but I've found out the following:
iOS has some weird ways to deal with web content
DON'T encapsulate your email address within an A tag, just put it there as plain text
Make sure that in your storyboard (if using one) the webView has the Addresses property checked and you're done ... same goes for phone numbers
I'm trying to get a video (flv) or an swf video player to work on Facebook walls, however no matter what I do - facebook posts the raw fbml and ignores the code. What am I doing wrong?
<fb:swf
swfsrc='http://www.domain.com/flv_player/Main.swf'
imgsrc='http://www.domain.com/large1.jpg'
allowscriptaccess=”all”
flashvars='config=http://www.domain.com/playerConfigEmbed/2179.xml'
width="384" height="283" />
I've also tried fb:flv
<fb:flv src='http://www.domain.com/files/file.flv' width='400' height='300' title='my movie' color='#FFBB00' salign='r' img='http://www.domain.com/thumbs/large1.jpg' scale='showall'/>
You can easily do this with Open Graph meta tags. I've written a short tutorial on how to do it right here: http://ahrengot.com/tutorials/custom-video-player-on-facebook/
This method will also allow you to have HTML5 fallback for iphones, which will even work in the Facebook iPhone app - My example is set up with HTML5 fallback that shows that functionality as well.
try that one:
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://vimeo.com/moogaloop.swf?clip_id=12941088&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=0&loop=0'
imgsrc='http://lojke.pl/PapayaLearn/video_link.png'
width='400' height='302'>
Insure yourself of placing the label
<Fb:fbjs-bridge />
Before creating your <fb:swf />
This will serve you to create a bridge to communicate with the Flash.
Then:
<Fb:swf
Swfsrc ='http: // your domain/yourflash.swf '
Width = '550' height = '400' align ='center ' />
If these working with free Hosting the most probable thing is that Facebook prevents that your SWF is visualized.
I am currently opening a webpage in UIWebView and submitting a form which performs a query on the server side and youtube video is returned (if available). I have no say/control over the server side implementation.
This webview works fine on iPhone/iPod, however, when I try to run the same app on iPad there is no response after submitting the form.
I created a dummy app, compiled on iOS 3.2 and problem is still there.
I put NSLogs in webview delegate methods which shows that after the form is submitted (UIWebViewNavigationTypeFormSubmitted) nothing happens.
I'm unable to figure out why this happens only on iPad and not on iPhone/iPod Touch.
I have created the webview in IB and setting the URL is viewDidLoad
[viewTourWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"http://www.realestatetour.com/mobiletours.htm"]]];
The URL for reference is http://www.realestatetour.com/mobiletours.htm
Enter the Tour ID as 10.
Thanks
The reason it wasn't working is because the form opens the result in a new page, (i.e. _blank) and apparantly all links opening in new window are ignored by uiwebview and its delegates.
I found 2 possible solutions for this:
1) Modifying the html using javascript to replace all _blank with _self for all anchor tags.
(source)
2) A more elegant solution which works for handling links which open a new window.
(source)
In my case i recreated the web page displaying form on the iphone app and changed _blank to _self.
I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}