Whenever I allow webcam access in chrome as a part of setup up a multi-party or a p2p conference, I am expecting to get a streamCreated notification which is not coming through. My camera turns on and the "google chrome renderer" for the page goes to 100% CPU usage. When I pause the execution of the stream I find that the execution is somewhere deep inside TB.min.js. Here's what the relevant parts of my code look like:
void meetingInProgress(info) {
var session = TB.initSession(info.sessionId);
session.connect(info.apiKey, info.token);
session.addEventListener("sessionConnected", function(e) {
console.log("Connected to session");
subscribeToStreams(session, e.streams);
session.publish("selfview", { name: name });
});
session.addEventListener("streamCreated", function(e) {
console.log("New stream");
subscribeToStreams(session, e.streams);
});
}
var subscribeToStreams = function(session, streams) {
var selfId = session.connection.connectionId;
console.log('Subscribing to streams, self id:', selfId);
console.log('No. of streams:', _.size(streams));
_.forEach(streams, function(s) {
console.log('Stream id: ', s.connection.connectionId);
if (s.connection.connectionId == selfId) {
console.log('Toggling');
$("#selfview").toggle();
}
else
session.subscribe(s, addViewport(), { width: 640, height: 480 });
});
console.log('Done subscribing to streams...');
}
Seems to me like if the publisher div element is hidden, there's a problem with receiving the streamCreated event. I was hoping to only show the publisher div panel when the user actually approves the use of camera. When I disable this div visibility toggling, things seem to work better.
Unfortunately, with the latest release, this will happen when the publisher is hidden. If you still want to hide it, the best option for now would be to make it a 1x1 pixel and have it absolutely positioned at -1, -1 of the screen.
Related
I am using OpenTok v2.14.0.0, for screen share. Streaming etc are working seamlessly. The only problem is, on the subscriber side, I am not able to see the complete Publisher's screen. On resizing the subscriber window (in which the streaming is happening), the video inside stretches maintaining the aspect ratio.
I have tried changing my WPF UI element control to Grid and UniformGrid, but did not work. Hence, I believe this has something to do with my subscriber's configurations. On js side, there is a property fitMode, I am looking for a similar setting on windows side.
Here is the video where one can see that the publisher (he is publishing his chrome window), gets stretched outside the bounds.
xaml control:
<Grid x:Name="SubscriberGrid"/>
when I receive the stream:
var uiElement = ((UIElement)subscriber.VideoRenderer);
SubscriberGrid.Children.Add(uiElement);
I had this issue and for me it was because I had set the fitMode property to 'cover' instead of 'contain'. Changing fitMode to 'contain' fixed the issue:
var subscriber = session.subscribe(event.stream, 'subscribers', {
insertMode: 'append',
width: "100%",
height: "100%",
fitMode: "contain"
}, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});
Some features in my component turn on or off depend on browser size, therefore I want to check browser width on resize event. However, I could do it using OnInit method. But I need to refresh browser when resize happened to update browser width
ngOnInit() {
if (window.innerWidth <= 767){
---- do something
}
}
I tried to use OnChanges method, but it does not work either.
OnChanges(changes:SimpleChanges){
console.log( 'width:====>' + changes[window.innerWidth].currentValue);
if ( changes[window.innerWidth].currentValue <= 767 ){
---- do something
}
}
is there any suggestions or alternative way to accomplish this?
You could just put handler on resize event over window object, but this will allow you to put only single resize event, latest registered event on onresize will work.
constructor(private ngZone:NgZone) {
window.onresize = (e) =>
{
//ngZone.run will help to run change detection
this.ngZone.run(() => {
console.log("Width: " + window.innerWidth);
console.log("Height: " + window.innerHeight);
});
};
}
To make it more angular way use #HostListener('window:resize') inside your component, which will allow to call your resize function(on which HostListner decorator has been mount) on resize of window.
#HostListener('window:resize', ['$event'])
onResize(event){
console.log("Width: " + event.target.innerWidth);
}
Use HostListener. You should probably debounce the resize event though before doing anything, it will fire everytime the size changes which could be dozens or hundreds of times in a few milliseconds as the user drags the window size.
import { Component, HostListener } from '#angular/core';
#Component({...})
class TestComponent {
#HostListener('window:resize')
onWindowResize() {
//debounce resize, wait for resize to finish before doing stuff
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
this.resizeTimeout = setTimeout((() => {
console.log('Resize complete');
}).bind(this), 500);
}
}
An easier way would be using the resize method on the html block that you want to detect:
<div class="some-class" (window:resize)="onResize($event)">...</div>
Then in your .ts file you can just add:
onResize(event) {
const innerWidth = event.target.innerWidth;
console.log(innerWidth);
if (innerWidth <= 767) {
...do something
}
}
Add this outside of the ngOnInit() {} unless you wanted the window size on page load.
When you resize your window, you'll see the console.log
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
Highcharts offers the opportunity to detect clicks on chart points, but is it possible
to detect other events, such as the double click or mousedown event?
Thanks in advance
Each component only supports certain events, for example the Chart component will detect addSeries, click, load, redraw, and selection. I don't believe this set is extensible, so you can't capture a different event like mousedown.
You could try to inspect the source of your page and attach listeners to the elements that HighCharts generates, but this would be an undocumented work-around and would be liable to break in future releases. In addition, if you have to support < IE9 you would need handlers for both SVG and VML generated markup.
You can get creative with some events. Here's an example of detecting a double click using a click handler:
Working Demo
var clickDetected = false;
// create the chart
$('#container').highcharts({
chart: {
events: {
click: function(event) {
if(clickDetected) {
alert ('x: '+ event.xAxis[0].value +', y: '+ event.yAxis[0].value);
clickDetected = false;
} else {
clickDetected = true;
setTimeout(function() {
clickDetected = false;
}, 500);
}
}
}
},
...
It's possible, but in a different way. In Highcharts you can add event to each element using element.on. For example:
chart.series[0].data[0].graphic.on('dblclick', function() {
//callback here
});
And simple jsFiddle for you. Good thing is that you can add to all elements, and make sure work in all browsers.
I have a small query with regards to Sencha Touch. i am trying to program some code which has an event kickstart as you scroll down the main panel (The end ideal experiment I am trying to achieve is to get the Panel to render images as you scroll down, but at the moment I am settling for just firing off a console.log from a function).
I was wondering if anyone knew of a method which would the program to detect how far down someone has scrolled vertically and fire off an event once you reach a certain y coordinate. I know of the scrollTo event, but I cannot seem to find any events which allow me to detect the x and y coordinate.
The basic coding for my panel is as follows:
headlinepanel = new Ext.Panel(
{
layout:
{
type:'vbox',
align:'stretch'
},
monitorOrientation: true,
scroll:
{
direction: 'vertical',
bounces: false,
outOfBoundRestrictFactor : 0,
threshold:20,
},
style: 'background-color:black;',
listeners:
{
afterrender: function()
{
if(headlinepanel.scroller.offsetBoundary.bottom == 500)
{
console.log("You are here!");
}
}
}
});
This is what I have at the moment and I tried to see if I could get the offsetBoundary property to work, but none of my programming friends has tried something like this before, so I am not very familar with this. I would appriciate any help, but I understand if this is not really possible with Sencha. Thank you for reading this.
This is how you listen for scroll events:
headlinepanel.scroller.on('scroll',function(me,offset){
console.log(offset.x);
console.log(offset.y);
});
This event is fire on every change, there are other events too. Check the API here: http://docs.sencha.com/touch/1-1/#!/api/Ext.util.Scroller-event-scroll
And here is an example: http://jsfiddle.net/sSyqF/14/