Draggable Publisher Video

[smuaq]

Is there any way/ best practices that one can introduce draggable interface for the publisher video?

Our application has interface like this currently implemented with opentok:

It would be great if I can get a lead on the best way to implement draggable publisher video?

[wolfenrain]

I would assume you could some touchdown events to check if the user is touching the publisher and if it's being dragged.

Then the DomObserver will be automatically updating the native cams. But I don't dare to say how smooth that would go.

[smuaq]

That's exactly my concern, i would have to call TB.updateViews() to constantly update the publisher view on the drag event & that's probably not going to be a very pleasant experience.

[wolfenrain]

If you are on the 3.0.0 version then there would be no need for that. The DomObserver will update when it's necessary.

Haven't tried with such a dragevent. But it does work smoothly in our environment. If you set the opacity of the DOM element to 0 it could work pretty well

[mark-veenstra]

@wolfenrain 3.0.0 does not have the DOM observer yet. See #59

[smuaq]

@wolfenrain What exactly do you mean by setting the opacity to 0? Can you share some details on this?

[wolfenrain]

@mark-veenstra oh yea... Got ahead of myself there.

@smuaq you could apply CSS rules to the .OT_root and then implement a DomObserver(or call tbupdate). Or use the PR that is suppliedbwith the issue that @mark-veenstra linked

See if that would be a viable solution

[smuaq]

Great , thanks I will see what I can leverage

[smuaq]

@wolfenrain i was able to make dragging workable for the publisher video using https://github.com/fatlinesofcode/ngDraggable, the experience on ios is surprisingly okay!

[wolfenrain]

Using the PR branch that @mark-veenstra linked? And yes iOS is really quick with updating the views, compared to Android.

[smuaq]

No, I used the simple tb.updateviews function but unfortunately on android the updateview is although working okay-ish but causing alot of flicker during dragging, what are your views on android for this? (I was testing on android 8)

[msach22]

@smuaq My recommendation is not to use the onScroll event listeners for the scrolling b/c of the potential flickering issues. This is especially true for older devices

[smuaq]

@msach22, I'm sorry are you referring scrolling to as dragging (i'm talking about dragging the publisher video around the view, my scroller is fixed)?
I'm simply using this library: https://github.com/fatlinesofcode/ngDraggable for dragging the video element, & in on-drag event I'm simply calling tb.updateviews() which although working is causing lot of flickering (on android only, ios works perfectly) on both pub & sub video during the dragging phase. Any help would be greatly appreciated :)

[smuaq]

Closing this issue as I have worked around the problem in Android. Feel free to ping me if anyone comes looking to this thread for a solution. Thanks for the help guys!

[msach22]

@smuaq could you please share your workaround? Unfortunately, I believe that it's not something that's for the core plugin, but it would be great for the opentok-cordova-samples repo

[smuaq]

Sure @msach22 , how do you want me to provide? I have it embedded in my current project.

[rhclayto]

Closing this issue as I have worked around the problem in Android. Feel free to ping me if anyone comes looking to this thread for a solution. Thanks for the help guys!

Ping! I would be interested in seeing your workaround for Android?

[smuaq]

@rhclayto Can you please share your workaround? How did you come over the problem in android?

[rhclayto]

@smuaq Hmm. I thought you mentioned that you had created a workaround for the flickering dragging on Android. I myself don't have a workaround. I would be interested in hearing about your solution.

[smuaq]

@rhclayto Specifically for android what I'm doing is overlaying the child video view with a simple background & that way dragging is not causing any flickering in the main video.