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?
Related
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
Hardware - Macbook Pro 2019 - Catalina 10.15.5
using Visual Studio Code
In my project we have the following issue;
On a Linux machine it is working, on a Windows machine it is working, on my machine is NOT working.
The code that is not working is this one.
phantom.create().then(function (ph) {
ph.createPage().then(function (page) {
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
}).then(function () {
it is crashing on the phantom.create() function.
I tried to do variations, to see the objects getting built, like,
ph = phantom.create();
console.log('after the phantom create ');
console.log(ph);
console.log('this is the ph **');
(async function (ph) {
page = ph.createPage().then(
function (page) {
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
Still crashing.
Using wait and async
(async function() {
ph = await phantom.create();
page = await instance.createPage();
ph.createPage().then(function (page) {
page = page;
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
}).
In terminal when I do:
Node > require('phantom').create()
I get the following
> require('phantom').create()
Promise {
Phantom {
logger:
{ info: [Function],
debug: [Function],
error: [Function],
warn: [Function] },
process:
ChildProcess {
domain: [Domain],
_events: [Object],
_eventsCount: 2,
_maxListeners: undefined,
_closesNeeded: 3,
_closesGot: 0,
connected: false,
signalCode: null,
exitCode: null,
killed: false,
spawnfile: '/usr/local/lib/node_modules/phantomjs/lib/phantom/bin/phantomjs',
_handle: [Process],
spawnargs: [Array],
pid: 14804,
stdin: [Socket],
stdout: [Socket],
stderr: [Socket],
stdio: [Array] },
commands: Map {},
events: Map {},
heartBeatId:
Timeout {
_called: false,
_idleTimeout: 100,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 3640,
_onTimeout: [Function: bound heartBeat],
_timerArgs: undefined,
_repeat: 100,
_destroyed: false,
domain: [Domain],
[Symbol(asyncId)]: 40,
[Symbol(triggerAsyncId)]: 6 } },
domain:
Domain {
domain: null,
_events:
{ removeListener: [Function: updateExceptionCapture],
newListener: [Function: updateExceptionCapture],
error: [Function: debugDomainError] },
_eventsCount: 3,
_maxListeners: undefined,
members: [] } }
When I use the debugger it's crashing on line
ph = phantom.create();
and resume debugger and then pause it's stuck on async_hooks.js - line const fn = function(asyncId) giving an enless loop until I get a timeout.
function emitHookFactory(symbol, name) {
// Called from native. The asyncId stack handling is taken care of there
// before this is called.
// eslint-disable-next-line func-style
const fn = function(asyncId) {
active_hooks.call_depth += 1;
// Use a single try/catch for all hook to avoid setting up one per
// iteration.
try {
for (var i = 0; i < active_hooks.array.length; i++) {
if (typeof active_hooks.array[i][symbol] === 'function') {
active_hooks.array[i][symbol](asyncId);
}
}
I also tried changing the launch.json and adding
"skipFiles": [
"inspector_async_hook.js",
"async_hooks.js",
"node_internals/**/*.js"
],
Still stucks on async_hooks.js though.
Any ideas what might be the reason?
Should I change to a Windows machine?
I'm installing a VM in the meantime.
I am using fullCalendar v4.0 with no jquery. I have initialized it like this
<div id="calendar"></div>
In data object I have this.
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
titleFormat: 'dddd, MMMM D, YYYY',
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'local',
header: {
left: '',
center: '',
right: '',
},
select: (event) => {
this.selectCalendar(event)
},
header: false,
events: null
}
}
while having a calendar in data variable, Now I can render() and destroy() it from anywhere.
But I am having an issue for handling Calendar events:
Such as
select: (event) => {
this.selectCalendar(event)
}
I have defined another method in methods: {} as selectCalendar() to call it in select but I am getting an error as
Uncaught TypeError: Cannot read property 'selectCalendar' of undefined
I want to do few operations on select, eventClick, eventDrop, eventResize, but I am unable to call a method within the config.
Also is there any way possible to define select or any method as
select: this.selectCalendar
So that it will just straight send an event to the defined method?
I have tried vue-fullcalendar but it doesn't work for my cause. Any help will be thankful.
Vue v.2.5.21
I am using vue full calendar, you can handle event of fullcalendar like code below
<full-calendar :event-sources="eventSources" #event-selected="myEventSelected"></full-calendar>
export default{
methods:{
caculateSomething(event){
//do st here
},
myEventSelected(event){
//do st here
this.caculateSomething(event)
console.log(event)
}
}
}
This is how I sorted this out.
in html <div id="calendar"></div>
in your data() => {}
calendar: null,
config: {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
axisFormat: 'HH',
defaultView: 'timeGridWeek',
allDaySlot: false,
slotDuration: '00:60:00',
columnFormat: 'dddd',
columnHeaderFormat: { weekday: 'short' },
defaultDate: '1970-01-01',
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
eventLimit: true,
eventOverlap: false,
eventColor: '#458CC7',
firstDay: 1,
height: 'auto',
selectHelper: true,
selectable: true,
timezone: 'UTC',
header: {
left: '',
center: '',
right: '',
},
header: false,
editable: true,
events: null
}
Don't define any select, resize or dropEvent in config for the first time, but then the part where you are going to render the calendar do something like this
if (this.calendar == null) {
console.log(this.schedule)
let calendarEl = document.getElementById('calendar');
let calendarConfig = this.config
let select = (event) => {
this.selectCalendar(event)
}
let eventClick = (event) => {
this.clickCalendar(event)
}
let eventDrop = (event) => {
this.dropCalendar(event)
}
let eventResize = (event) => {
this.resizeCalendar(event)
}
calendarConfig.select = select;
calendarConfig.eventClick = eventClick;
calendarConfig.eventDrop = eventDrop;
calendarConfig.eventResize = eventResize;
this.calendar = new Calendar(calendarEl, calendarConfig);
this.calendar.render();
this.renderEvents()
}
Now you can handle those events of FullCalendar in your own methods.
Also having the calendar in this.calendar gives you the power to destroy it from anywhere, in the methods: {}
In FullCalendar 4.0 things have been changes but quite simpler.
these are the methods attached to FullCalendar Events
selectCalendar(event) {
this.calendar.addEvent(event)
},
clickCalendar(event) {
if (window.confirm("Are you sure you want to delete this event?")) {
let findingID = null
if (event.event.id === "") {
findingID = event.el
} else {
findingID = event.event.id
}
let removeEvent = this.calendar.getEventById( findingID )
removeEvent.remove()
}
},
dropCalendar(event) {
},
resizeCalendar(event) {
},
destroyCalendar() {
if (this.calendar != null) {
this.calendar.destroy();
this.calendar = null
}
}
when an event is added by you. You can find it through el in an event, but the custom events should have a unique ID. through which you will find and delete it.
I'm trying to set the inactivityTimeout on my video element to shorten the time it takes for the control bar to hide. However, the following doesn't seem to change it:
const opts = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
},
inactivityTimeout: 100,
};
videojs(myVideoEl, opts);
When I do this it does work, but I get a warning:
player.options().inactivityTimeout = 500;
VIDEOJS: WARN: this.options() has been deprecated and will be moved to
the constructor in 6.0
Does anyone know why I can't seem to set it using the options?
var player = videojs("sessionsimple-player",{
inactivityTimeout: 100,
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
}
});
Note: Do not use both data-setup and an options object.
https://docs.videojs.com/tutorial-setup.html#options
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)";
},
);
});