getUserMedia() in apache cordova? Any alternative? - ios

I need some cordova plugin or function, which can stream video from device camera on ios. GetUserMedia is not supported on iOS.
I tryied Crosswalk project, it should support WebRTC (getUserMedia), but it doesnt work on phonegap build.
So I tryied cordova-camera-preview, but I am not able to make it fullscreen, because camera stream is shrinked.
Is there anybody, who used fullscreen video in cordova application?
<script>
document.addEventListener("deviceready", function () {
app_ready();
}, false);
function app_ready() {
var vw = window.innerWidth;
var vh = window.innerHeight;
var tapEnabled = true; //enable tap take picture
var dragEnabled = true; //enable preview box drag across the screen
var toBack = true; //send preview box to the back of the webview
var rect = {x: 0, y: 0, width: vw, height: vh};
cordova.plugins.camerapreview.startCamera(rect, "front", tapEnabled, dragEnabled, toBack);
}
</script>

After deep searching I found out some augmented reality plugin called "ezAR videooverlay", check out npm -> https://www.npmjs.com/package/com.ezartech.ezar.videooverlay
Hope it helps someone

Related

How to hide Electron.js frame?

I also looked for solutions to other problems, but they did not turn out as I wanted. How can I delete the top bar of the window, as I marked in the photo?
[photo]
native APIs directly supports frameless windows. You need to pass the frame option false while creating new window. Here is the example.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
You can read more at official docs

Camera code and Cordova not working

It just driving me crazy why it is not working. It should be very simple.
I added the plugin using the CLI command. I am sure it is a beginner question, but I just don't get it.
Then I have a "button" called "prendrephoto1". When click it should take a picture. But when button click, just nothing happen on the Xcode Ios Simulator.
I use JqueryMobile and Cordova.
$(document).ready(function(){
var photo1;
var photo2;
$("#prendrephoto1").bind("click",prendrephoto);
function prendrephoto(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('ca ne marche pas');
alert('Failed because: ' + message);
}
};
//DERNIERE BALISE JQUERY
});
The iOS simulator does not provide capture simulation, you'll need to run your app on an actual device to retrieve a picture from the camera.

Best plugin for in-page image+text slider, Jquery Mobile + Phonegap app

I would like to insert a "slider" in my hybrid app.
I need each slide to contain an image and some text. And I would like it not to be a full page slider but a partly hidden in-page slider, like on the Amazon app:
Which is the best Jquery Mobile + Phonegap friendly slider ?
(I've heard of Photoswipe, Swiper, Flexslider, ...)
Thanks
I chose Flexslider V2 and it seems to work fine : http://www.woothemes.com/flexslider/
$(document).on('pageshow','#result-page', function(){
var suggestionSlider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
//slideshow: false,
itemWidth: 70,
//itemMargin: 5,
pausePlay: false,
touch: true,
//useCSS : false,
pauseOnAction: true
});
var slider = $('.flexslider').data('flexslider');
for (i = 0; i < matched.length; ++i) {
slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
+'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
);
}
$('.flexslider').resize();
});
However V2.2 doesn't scroll well on Android phones (touch horizontal scroll), any hint would be apreciated.

Webview in Chrome Packaged App

I'm currently developing a Chrome Packaged App and I'm using webviews, however I'm not having success at hidding the scroll bar on said webviews. I've tried using the overflow tag with no success.
Any help would be appretiated.
Try this:
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'main.html',
{bounds: {width: 800, height: 400}},
function(win) {
appWin = win;
win.onBoundsChanged.addListener(onBoundsChanged);
onBoundsChanged();
}
);
}
function onBoundsChanged() {
var bounds = chrome.app.window.current.getBounds();
var webview = appWin.contentWindow.document.getElementById("#my_webview");
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
Obviously, if your window is fixed size (resizable: false), you don't need to define an onBoundsChanged handler: you can adjust your webview size directly in the chrome.app.window.create() callback using the hardcoded dimensions you've specified for your window.
This is what I did to remove the webview's scrollbar when embedded inside Packaged Chrome App:
<html lang="en" style="overflow:hidden">
Edit: This code lives inside the page that the webview references - not the code inside your packaged chrome app.

Custom play-button trips on iOS video autoplay restriction

Video autoplay (including YouTubes autoplay=1) does not work on iOS Safari. That is thourougly documented by both Apple and a large number of blog posts.
This does however cause a problem with using custom controls for YouTube videos, that I can't find a definate yes/no answer for anywhere.
If I used a simple HTML5 video tag there would be no issue - but I would really rather not have to encode all the videos for all the different platforms.
What I need to accomplish is:
A cover image is shown (flat PNG with a play icon on top).
The user clicks the cover image, the image is replaced by a YouTube video that starts playing.
This is not autoplay from the users perspective, since it is initiated by a click. However on all non-Flash devices YouTube embeds are displayed in an iframe, causing the video to effectively be loaded and autoplayed (or at least, I think so).
Does anyone know of any workarounds for this problem?
This snippet illustrates the problem. It works in e.g. FireFox, but on iOS Safari it simple shows the loading indicator and then ends in a black screen.
If I add the "apple-mobile-web-app-capable" meta tag and fire up the site from the home screen, the videos play correctly.
<div id="movieContainer" style="width: 768px; height: 432px; border: 1px solid #cccccc;">Initializing player API...</div>
<div id="status">Initializing player API...</div>
<button onclick="player.playVideo();">Play</button>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playerAPIIsLoaded = false;
function onYouTubePlayerAPIReady()
{
playerAPIIsLoaded = true;
document.getElementById("status").innerHTML = "Player API initialized!";
}
var player = null;
function initMovie()
{
document.getElementById("status").innerHTML = "Loading video..."
player = new YT.Player(
'movieContainer',
{
height: '432'
, width: '768'
, playerVars: { 'autoplay': 0, 'controls': 2, 'rel': 0, 'showinfo': 0 }
, videoId: 'MwnZr4VJQPQ'
, events: { 'onReady': function (event) { document.getElementById("status").innerHTML = "Video loaded!";/*event.target.playVideo();*/ } }
}
);
}
window.onload = initMovie;
</script>

Resources