I'm currently developing a tablet application aiming to act as a remote control for a security camera, showing a video live stream from the camera as well as some buttons.

Besides typical commands such as controlling brightness or gain, the application has to allow users to control the movement of the camera (the PTZ, Pan Tilt Zoom).

To control Pan and Tilt, I let the user drag on the video to initiate the camera movement which will stop once the user stop touching the screen. This works quite well.

However for the zoom, the standard pinch-to-zoom gesture has proven to be (at least) disturbing because of the latency between the gesture and the actual change in the live video stream (due to the physical movement of the camera lens as well as the network latency).

I'm testing another approach by drawing the final "viewport" on the image as an immediate visual feedback but it as some limitations (especially when dezooming) and does not convince me totally.

Have anybody any experience with a similar issue? What other solution could I use? Thanks!

2 Answers 2


It's possible that using touch gesture(s) in this instance to interact with the camera zoom may not be the best choice. Yes, faking a zoom on the client is one potential option, however you're still going to need to incorporate the real image at some point, possibly after some additional movement (i.e. left and right) has occurred - this disconnect could cause a lot of jarring movement or feedback to the user.

Also I think this type of "fake-it-on the client" type of thing works great when you can do it really well because you already have the content/data you're looking to fake (i.e if you are just displaying new data/content supplied directly by the user, or data that you already have in your app) but where this is relying on data/content from the real world, then that may not be the right approach. A better approach may be to choose a UI control that can align/interact with the real-world delay that is actually occurring.

So in this case you may be better off using something like a [+] / [-] style button(s) in the interface, that dynamically change to some sort of loading spinner while the system is working and the camera is doing it's work to actually zoom in/out. Once the zoom is complete, stop the spinner and return the button to it's original state. You may have to put a delay in the touch event on those buttons to allow the user to do multiple presses of the zoom-in/out button before it starts to work/spin (in case they want to zoom multiple levels). It also would likely be wise to show the max number of zoom "steps" in/out (or some visual way of displaying the zoom limits) and where the current zoom level on the camera is within that.

I should note that the plus/minus type buttons are just one possible example of the UI design options you could use here (could also possibly use just a slider) but the main point is that I think you're going to need to give the user some feedback to wait while the zoom is occurring. A double-tap might also work, but is a bit less usable because it will only allow you do zoom 1-increment at a time, and since there is a delay for each zoom, that would be frustrating.

  • Thanks the answer, you've some good points. I'm actually wondering if I will keep the touch gesture to control zooming or not... Nov 21, 2013 at 17:12

As for the gesture to use for zooming, you could investigate a "double-tap + scroll" as Google Maps does.

enter image description here

The added visibility of the screen may aid in the user's ability to deal with the latency.

To help avoid latency you could try a client-side digital zoom, and let the camera "catch-up". In this case when zooming in the image would use a digital zoom to provide instant feedback and when the camera had caught up with the zoom level the optical zoom would replace the visual.

If the use-cases provide for it, you may also look into restricting how the user zooms. Perhaps they only need discrete zoom factors and only need to zoom into specific quadrants? A double tap in a quadrant would zoom in there, another double-tap would zoom out. Again, if the use-case supports it.

  • Thanks for your help! Actually, I've thought about using a client-side digital zoom but a problem arise when zooming out: what is to be displayed around the actual image? The double tap to zoom in a quadrant is a good idea, but cannot be a solution in my case unfortunately. Nov 20, 2013 at 21:43
  • 3
    You could try a mask around the border for the zoom out. Shrinking the video image and provide a hashed background around the edges. A message indicating that data is incoming can indicate to users that the video will catch up soon. Nov 20, 2013 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.