Develop Reference

Simple Android versus iOS detection in WordPress theme

I am trying to edit my WordPress theme file to show one ad code if an Android device is detected, another set of code if iOS.
The code is in the format:
<script type="text/javascript" src="//xxxxxxxx.js"></script>
I have tried several previous answers, such as the following:
Detecting iOS / Android Operating system
Detect Android phone via Javascript / jQuery
What is the best way to detect a mobile device in jQuery?
All of which are slightly different and cause my page to not load (blank page).
Could someone please give me a hand and post the full simplest/fastest code to simply detect Android versus iOS and do nothing for anything else (i.e. a Windows PC). Something I can just copy and paste into the theme files where I want it.
Edit: I also tried things like the following to no avail (this was exactly what I pasted into the WordPress theme file, without the xxx and including proper reference to external .js file:
<?php var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {?>
<script type="text/javascript" src="xxxxxxx.js"></script>
<?php } ?>
and
<?php function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /Android/i ) )
{?>
<script type="text/javascript" src="//xxxxxxx.js"></script>
<?php}
} ?>

[EDIT]
Try changing your code to the below snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isIOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
if(isAndroid()) { $.getScript("//cdn.bounce.bar/xxxx.js"); }
</script>
The reason what you tried above doesn't work is because you are trying to put javascript code into a PHP function when the interpreter is looking for PHP code.
If you have direct access to the HTML page, then you could do something like the following. This code is taken almost directly from Detect if browser is running on an Android or iOS device.
<script>
function isAndroid() { return /Android/i.test(navigator.userAgent); }
function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
</script>
Remember that PHP code is generally server side and javascript code is generally client side. I would try to load the script using Javascript depending on the OS type. Something like this might work if you are using Jquery:
<script>
if(isAndroid()) {
$.getScript("//xxxxxxx.js");
}
</script>
I'm still not exactly sure what you are trying to do, but let me know if this doesn't work and provide more details, and I'll try to help out.

You could do this
if(/Android/i.test(navigator.userAgent) ) {
..............
}
else if(/iPhone/iPad/i.test(navigator.userAgent) ){}

How To Access Files on Android Device Using Ionic Framework

I was working through the Ionic tutorial for using the Cordova Camera API.
http://learn.ionicframework.com/formulas/cordova-camera/
Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.
I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?
My config:
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
...
The function in my controller:
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.cameraPic = imageURI;
}, function(err) {
$scope.cameraPic = "error";
console.err(err);
});
};
My view:
<ion-view>
<ion-content>
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="getPhoto()">
Take Photo
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
{{cameraPic}}
</ion-content>
</ion-view>
This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?
EDIT
Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.
Definitely looking like a local file access issue.

As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:
NOTE: The camera API only works on a real device, and not in the
emulator.
Source: http://ngcordova.com/docs/plugins/camera/
This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.

HTML5 video full screen on mobile browsers (android)

After a huge research I didn't find any answer to my question yet. I wanted to achieve my goal with FullScreenAPI but it is not supported in any mobile browser (except Firefox 19 and Blackberry browser - but I need a cross-browser solution). Here's the source. I also tested FullScreenAPI on native android browser and mobile Chrome with appropriately prefixed fullscreen functions. Each function was of type undefined.
Another approach was the rtsp protocol which is usually handled by an outer player. Here is the guy who assumes that m.youtube.com uses that solution - I think it is not true (maybe the answer is outdated). Youtube uses native video's fullscreen. On mobile Chrome when you tap the play button, the movie instantly goes fullscreen.
Although, every source I googled tells me that native fullscreen is not possible on android browsers, still HTML5 video element with its native controls gives us a fullscreen button which works perfectly out there.
Since I don't want the native controls, can anyone share any ingenious solution to How to trigger HTML5 video fullscreen button'sevent?

You can make a popup at 100% width/height with a close button on absolute on it playing your HTML5 video.
Old, simple and dirty trick... But works

all you need to work on "webkitbeginfullscreen" and "webkitendfullscreen" events for mobile devices, i think.it will
<!doctype html>
<html>
<head>
<title>video</title>
<script type="text/javascript">
function videoControl() {
var myVideo = document.getElementById('myVideo');
myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false);
myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false);
}
function enteringFullscreen() {
alert("entering full-screen mode");
}
function exitingFullscreen() {
alert("exiting full-screen mode");
}
</script>
</head>
<body onload="videoControl()">
<div id="videoContainer">
<video id="myVideo" src="myVideo.m4v" autoplay controls>
</video>
</div>
</body>
</html>

Try video.webkitEnterFullscreen() in a user interactive event handler(ex: click)

Most people facing this issue is because the HTML5 video is implemented inside <iframe>.
Add the three attributes in iframe to enable fullscreen in adroid chrome
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

Here's what I use that should pretty much work everywhere:
function toggleFullScreen() {
var doc = window.document;
var elem = doc.body; //the element you want to make fullscreen
var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen;
if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) {
requestFullScreen.call(doc.body);
}
else {
cancelFullScreen.call(doc);
}
}

Showing camera view inside html in android and then snap a picture

Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app
Thanks

You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is..
You can access Features such as:
Start a camera preview from HTML code.
Drag the preview box.
Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.
Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.
Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />
in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.
UPDATE:10th Oct 2017
It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.

I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:
HTML:
<html>
<head>
</head>
<body>
<form><input type='button' id='snapshot' value="snapshot"/></form>
<video autoplay></video>
<canvas id='canvas' width='100' height='100'></canvas>
<script type="text/javascript" src="findit.js"></script>
</body>
</html>
findit.js
var onFailSoHard = function(e)
{
console.log('failed',e);
}
window.URL = window.URL || window.webkitURL ;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('video');
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true},function(stream) {
video.src = window.URL.createObjectURL(stream);
},onFailSoHard);
}
document.getElementById('snapshot').onclick = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0);
}
Live Demo:
A personal project
More Resources, this is what I used:
Webcam Access
Update:
This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.

You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.
var getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;
Hope it helps.

There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.

html5 video tag to play full screen with Android

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?

This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.

I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.

Have you checked out mediaelement.js?

Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...

Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.