I am building Calling app, includes:
1.PushKit VOIP to show incomming call
2.React-native-callkeep to handle answer/end call
3. React-native-webrtc to make the call
The problem is:
1.With app state active/background. The call working normally
2.Only with case app locked + app not running. I can not see the microphone in top of screen, then I think I can not access into the microphone(tested with audio call)
About my code: I am getMediaDivices in useEffect() like this:
useEffect(() => {
....
getMediaStream()
return () => {
mounted.current = false
....
}
}, [])
const getMediaStream = async () => {
if (!localMediaStream) {
let isFront = true
let stream = await mediaDevices.getUserMedia({
audio: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true,
googEchoCancellation: true,
googAutoGainControl: true,
googNoiseSuppression: true,
googHighpassFilter: true,
googTypingNoiseDetection: true,
googNoiseReduction: true
},
video: isVideo ? {
width: { min: 480, max: 1280},
height: { min: 320, max: 720 },
// vb: true,
frameRate: 25,
facingMode: (isFront ? 'user' : 'environment'),
} : false
})
setlocalMediaStream({
publisher: {
id: currentUserName,
userId: masterInfo.user.id,
displayName: masterInfo.user.name
},
stream: stream,
})
await initJanus(stream)
}
}
I dont know why the green dot not appear in case 3, can someone help?
i want to use Quagga js in my webapp to scan a barcodes...
The problem is that i want use the mobile's back camera, in the documentation say's that quagga use a parameter called "facingMode".
If you set facingMode = "enviroment" that use the webcam if you stay in a PC or the back camera if you stay in a Phone .
And if you set facingMode = "user" that use the mobile's front camera.
Well, i set user and enviroment for test and there is no difference, it stays the same, on the cell phone continues to use the front camera, i try to use the back camera but nothing.
I leave my code at there
function startScanner() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: 600,
height: 450,
facingMode: "enviroment" //or user for front camera
},
},
decoder: {
readers: [
"code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
console.log(navigator.mediaDevices.enumerateDevices());
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
i tried in Android Phone
I have tried solution given here on the site but it didn't work.
Setting up volume control vertical in video.js
Where I can get best tutorial about video.js.. Any link?
For version 6.2.0:
var options = {
controlBar: {
volumePanel: {inline: false}
},
};
videojs('my-video', options);
Video.js 7.10.2
var player = videojs('my-video', {
controlBar: {
volumePanel: {
inline: false
}
},
});
For video.js 5.x:
var options = {
controlBar: {
volumeMenuButton: {
inline: false,
vertical: true
}
}
};
videojs('player', options);
const options: VideoJsPlayerOptions = {
controlBar: {
volumePanel: {
inline: false,
volumeControl: {
vertical: true
}
}
}
};
This can be done. Please see:
http://jsbin.com/nidevo/2/edit?html,css,output
and
https://github.com/videojs/video.js/issues/942
The howto you cite is for videojs 2.0
I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,
'destroy': true,
'aoColumns': [
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "75px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "50px", bSearchable: false, bSortable: false }
],
'scrollY': 200,
'scrollX': true,
'info': false,
'paging': false
});
The above code is working fine in Desktop.
But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.
How to fix that header movement issue in mobile devices?
Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.
document.getElementById("btn").addEventListener("click", function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
},
);
});
I've successfully integrated both a Flot line graph and an instance of FullCalendar into my site. They are both on separate pages (although the pages are loaded into a div via AJAX).
I've added the Flot Resize plugin and that works perfectly, re-sizing the line graph as expected. However, it seems to cause an error when resizing the calendar.
Even if I load the calendar page first, when I resize the window I get this error in the console (also, the calendar does not resize correctly):
TypeError: 'undefined' is not an object (evaluating 'r.w=o!==c?o:q.width()')
I was struggling to work out where the error was coming from, so I removed the link to the Flot Resize JS and tried again. Of course the line graph does not resize, but when resizing the calendar, it works correctly.
The div containers for the two elements have different names and the resize function is called from within the function to draw the line graph (as required).
I have tried moving the link to the Flot Resize plugin into different places (i.e. above/below the fullCalendar JS, into the template which holds the graph), but all to no avail.
Does anyone have any idea where the conflict might be and how I might solve it??
Thanks very much!
EDIT: It seems that the error is also triggered when loading the line graph (flot) page AFTER the fullcalendar page even without resizing the window.... Now I am very confused!
EDIT 2: The code which draws the line graph. The function is called on pageload and recieves the data from JSON pulled off the server. When the graph is loaded, I still get the error about shutdown() being undefined.
function plotLineGraph(theData){
var myData = theData['data'];
var myEvents = theData['events'];
var myDates = theData['dates'];
var events = new Array();
for (var i=0; i<myEvents.length; i++) {
events.push(
{
min: myEvents[i][0],
max: myEvents[i][1],
eventType: "Calendar Entry",
title: myEvents[i][2],
description: myEvents[i][3]
}
);
}
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': 'black',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if ($("#enableTooltip:checked").length == 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if(item.series.label != null){
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
var d1 = [
myData[0], myData[1], myData[2], myData[3], myData[4],
myData[5], myData[6], myData[7], myData[8], myData[9],
myData[10], myData[11], myData[12], myData[13], myData[14],
myData[15], myData[16], myData[17], myData[18], myData[19],
myData[20], myData[21], myData[22], myData[23], myData[24],
myData[25], myData[26], myData[27], myData[28], myData[29]
];
var markings = [
{ color: '#FFBDC1', yaxis: { from: 0, to: 2 } },
{ color: '#F2E2C7', yaxis: { from: 2, to: 3.5 } },
{ color: '#B6F2B7', yaxis: { from: 3.5, to: 5 } }
];
$.plot($("#placeholder"), [
{label: "Average Daily Rating", data: d1, color: "black"}
], {
events: {
data: events,
},
series: {
lines: { show: true },
points: { show: true }
},
legend: { show: true, container: '#legend-holder' },
xaxis: {
ticks:[
myDates[0], myDates[1], myDates[2], myDates[3], myDates[4],
myDates[5], myDates[6], myDates[7], myDates[8], myDates[9],
myDates[10], myDates[11], myDates[12], myDates[13], myDates[14],
myDates[15], myDates[16], myDates[17], myDates[18], myDates[19],
myDates[20], myDates[21], myDates[22], myDates[23], myDates[24],
myDates[25], myDates[26], myDates[27], myDates[28], myDates[29]
],
},
yaxis: {
ticks: 5,
min: 0,
max: 5
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] },
hoverable: true,
clickable: true,
markings: markings
},
selection: {
color: 'white',
mode: 'x'
},
});
$('#placeholder').resize();
$('#placeholder').shutdown();
}
EDIT 3:
The calendar is called like this:
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fullcalendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
clickable: true,
firstDay: 1,
eventSources: [
{
url: '/populate-calendar/{{theProductUuid}}/',
color: 'black',
data: {
text: 'text'
}
}
],
eventClick: function(calEvent, jsEvent, view) {
var startDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
var endDate = $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd');
var eventId = calEvent.uuid;
$('#modal-event-title').text(calEvent.title);
$('#edit-event-name').val(calEvent.title);
$('#edit-start-date').val(startDate);
$('#edit-end-date').val(endDate);
$('#edit-event-text').val(calEvent.text);
$('#edit-event-btn').attr('data-uuid', eventId);
$('#modal-edit-event').on('click', '#delete-btn', function(){
deleteCalendarEvent(eventId);
});
$('#modal-edit-event').modal();
},
});
}
The AJAX to load the page containing the flot chart:
function loadDetailedReports(uuid){
$('#product-content').fadeOut('slow', function(){
$('#product-content').empty();
$('#whole-product-sub-nav .active').removeClass('active');
$('#detailed-reports-content').load('/detailed-reports/' + uuid + '/', function(){
$('#detailed-reports-btn').addClass('active');
$('#detailed-reports-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadDetailedReports&' + uuid);
getChartData(uuid);
} else {
setLocationHash('');
}
});
});
});
}
And the AJAX to load the page containing the calendar:
function loadCalendar(uuid){
$('#detailed-reports-content').empty().hide();
$('#product-content').fadeOut('slow', function(){
$('#whole-product-sub-nav .active').removeClass('active');
$('#product-content').load('/calendar/' + uuid + '/', function(){
$('#calendar-btn').addClass('active');
$('#product-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadCalendar&' + uuid);
} else {
setLocationHash('');
}
showCalendar();
});
});
});
}
The calls to .resize and .shutdown are there because I was under the impression that they are necessary to achieve the resizing function and in response to your earlier comment regarding shutdown...... They're quite possibly n00b errors........?!?!
It looks like this is triggering on line 198 of jquery-resize:
data.w = w !== undefined ? w : elem.width();
This sounds like a race-condition stemming from the way you load different content into the same div. Flot binds the resize event to the chart div, and only un-binds it if the plot is destroyed cleanly.
EDIT: Looking at your code, my first suggestion would be to get rid of the resize and shutdown calls at the end of plotLineGraph. The resize plugin doesn't require any setup; it hooks into Flot to attach automatically to any new plot. So your call to resize is actually to jQuery's resize event trigger, which may be what's causing the error.
EDIT #2: I'm still not clear on your structure, but to generalize: anywhere that you might be getting rid of #placeholder (via emptying its parent or anything like that) you should first call shutdown on the plot object. If you aren't keeping a reference to it, you can do it like this: $("#placeholder").data("plot").shutdown(); but then have to account for the fact that it's undefined prior to the creation of your first plot.
If that still doesn't work, I'd need to see a live (simplified) example to make any further suggestions.