When I use publisher.cycleVideo() to switch cameras during a session, the video stream is always mirrored when using the rear camera. Is there any way to change the mirroring when using cycleVideo? I've tried the following code to switch the mirroring after cyclevideo to the rear camera but does nothing:
mirror=true; // Have tried with both mirror true and false
constraints = {
advanced: [{
mirror: mirror
}],
};
OT.getUserMedia().then((stream) => {
populateDeviceSources(audioSelector, 'audioInput');
populateDeviceSources(videoSelector, 'videoInput');
stream.getTracks().forEach(track => track.applyConstraints(constraints));
});
Related
I am using the nativescript barcode-scanner plugin for one of my Android platform projects. Problem we have is once the the scan is done, we need the user to enter a some values to a text field. Problem is the the soft keyboard takes about 4 seconds to pop up. It seems the screen freezes for about 4 seconds soon after a scan. It the same if I have a button that needs pressing soon aftHave you come across this problem? If so do you know what the work around is? Below is type script code used to load scanner. Thanks any help you be great.
public scan() {
console.log("On Scanning....");
this.barcodeScanner.scan({
formats: "QR_CODE, EAN_13",
showFlipCameraButton: false,
preferFrontCamera: false,
showTorchButton: false,
beepOnScan: true,
torchOn: false,
resultDisplayDuration: 0
}).then((result) => {
console.log(`Scanned: ${result.format} ${result.text}`);
this.showResultView(result.text);
}, (errorMessage) => {
console.log("Error when scanning " + errorMessage);
}
);
}
Reference: https://github.com/EddyVerbruggen/nativescript-barcodescanner
I get the following error in firefox (no problems in Chrome / Edge / Safari):
MediaStreamError { name: "AbortError", message: "Starting video failed", constraint: "", stack: "" }
Browser console only shows < unavailable > when this error is thrown.
I am using adapter-latest.js from webrtc.github.io and the code works perfectly well on other pages within my application but not in one particular page. Is there a possibility to find out, what interferes with getUserMedia? I allready tried commenting out all other libraries and includes.
My code is:
var video = document.getElementById('recorder');
video.onloadedmetadata = function(e) {
$("#takePicture").show();
if($("#customerImage").attr("src") == ""){
$("#recorder").show();
}
};
navigator.mediaDevices.getUserMedia({ video: true})
.then(stream => {
video.srcObject = stream;
})
.catch(e => console.log(e));
I was facing this issue because I had Chrome also running the same app and using the webcam. So basically the webcam was already in use and I was trying to access it via Firefox too.
Are you really sure that you need adapter? In my experience it makes more problems than it solves.
Can you try to use constraints?
Example (I removed some things, but it works like a charm here):
constraints = {
width: 1280,
height: 720,
frameRate: 10, //mobile
facingMode: {
exact: "environment"
} //mobile
}
navigator.mediaDevices.getUserMedia({
audio: false,
video: constraints
}).
then(handleSuccess).catch(handleError);
function handleSuccess(stream) {
video.src = URL.createObjectURL(stream);
video.play();
}
function handleError(error) {
console.log('navigator.getUserMedia error: ', error);
}
I created a tab-based Ionic 2 project and I'm using the following lifecycle hooks to define a trigger property for animations to occur when a given page loads:
ionViewDidEnter() {
this.state = 'active';
console.log(this.state);
}
ionViewWillLeave() {
this.state = 'inactive';
console.log(this.state);
}
This is what the animations looks like in the component decorator:
animations: [
trigger('focusPanel', [
state('inactive', style({
opacity: '0'
})),
state('active', style({
transform: 'translateY(-80px)',
opacity: '1'
})),
transition('* <=> active', animate('.5s ease-out'))
]),
]
This works when the app loads. I can click on a different tab and go back, and the animation works as expected.
However, if I go back a third time, while the console.log is accurate and consistent, the animations no longer play. It doesn't fade from 0 opacity, and it does not animate up based on translateY.
Any idea of what's going on? I've tried different lifecycle hooks, as well as different transition() properties in the animations above.
I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).
I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.
I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.
My Coffeescript looks like this:
temp_plot = $.plot $("#barchart"), [
data: $("#barchart").data("bardata")
bars:
show: true
barWidth: (365/12)*24*60*60*1000*0.8
align: 'center'
],
xaxis:
mode: "time"
timeformat: "%b"
tickSize: [1, "month"]
yaxis:
position: 'right'
labelWidth: '40'
reserveSpace: true
canvas: true
barchart_canvas = temp_plot.getCanvas()
I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!
Just to be extra clear, code as Javascript looks like this:
var barchart_canvas, temp_plot;
temp_plot = $.plot($("#barchart"), [
{
data: $("#barchart").data("bardata"),
bars: {
show: true,
barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
align: 'center'
}
}
], {
xaxis: {
mode: "time",
timeformat: "%b",
tickSize: [1, "month"]
},
yaxis: {
position: 'right',
labelWidth: '40',
reserveSpace: true
},
canvas: true
});
barchart_canvas = temp_plot.getCanvas();
UPDATE - SUCCESS
I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)
Now my axes render on the canvas. Great! My thanks to the Flot gods!
Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.
Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.
Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.
I started using the gmap3 jQuery plugin today and I'm having issues with getting a list of markers.
As long as I add all the markers manually (with addMarker or addMarkers) all works well and the:
.gmap3({action:'get', name:'marker', all:true});
gives proper list of markers.
However, if i use the action:getRoute and the addDirectionsRenderer - the markers are not 'gettable' by code pasted above.
My code for showing the directions is below - it works and shows them properly on the map. Only issue is that I cannot get any markers out of it, so I can process them after creation.
var optionDirections = {
origin: startcoord,
destination: stopcoord,
waypoints: coordsAllGoogleStyle,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
....
.gmap3({
action:'getRoute',
options: optionDirections,
callback: function(results) {
if (!results) { alert('nodata'); return; }
$(this).gmap3(
{
action:'addDirectionsRenderer',
options:{
preserveViewport: false,
draggable: false,
directions:results
}
}
);
var res = $(this).gmap3({action:'get', name:'marker', all:true});
alert('Found: '+res.length+' markers');
}
});
to make things simple, I contacted the author of this api and it kind of not support it anymore because "now people use angular"
nice is'nt it...