Using the Canon Browser Remote API in a Flutter App

When I learned about the Canon C100 II’s Browser Remote functionality and saw its dated user interface, I wanted to find out if I could use the underlying interface for a custom mobile app. So, during the ‘Exploring the Canon Browser Remote API’ series, I reverse-engineered all essential features, which are now part of a Flutter app called Cine Remote.

The Cine Remote app supports all the necessary remote control features you would expect. You can change the exposure parameters, trigger a recording and preview the live view.

Let’s start with the most important but arguably the least extraordinary feature: Handling update events. To keep the data between the app and the camera in sync, even when changing a value on the camera, the app polls for property changes twice a second.

Having control over all exposure parameters and white balance is crucial for remote control applications. And thanks to the ability to fling quickly through a list of all supported values, it is even more convenient than changing the values on camera.

In the future, I would like to add a custom widget for changing the white balance, which features presets and a value slider.

The title tells it all: As you would expect, you can start and stop recording.

The live view viewer was designed to mimic a video player users are already familiar with from apps like YouTube. Therefore I have invested a lot of time in making the interactions with the player feel right. The idea was to allow starting and stopping the preview as required to preserve battery life when you don’t need live view at times.

The only bummer is the low resolution and framerate of the preview, which means it is unsuitable for pulling focus remotely.

Since the user interface depends significantly on the state of the connected camera, I often used the actual C100 II to verify the UI behaved as expected. However, as I couldn’t bring the camera with me all the time and I am developing the app in my free time, I added a demo implementation, which mimics the responses, including its response times. So even if you don’t own a Canon C100 II, you can still try out the app using the demo mode.

Cine Remote is a Flutter app which currently supports Android and iOS. Ever since I got to know Flutter, it has become my go-to framework for creating mobile apps.

As for dependencies, I use a pretty standard setup with get_it (dependency injection), flutter_bloc (state management) and freezed (data class generation). Additionally, the app-to-camera communication is tucked away in a camera remote service, which uses dart:io for issuing HTTP requests.

Until now, there is no mobile-specific dependency, which allows adding support for the desktop platforms in a future version with ease.

In its current version, the Cine Remote app acts as a proof of concept upon which I would love to improve. Here are some ideas on how I want to push the project forward.

Since the Browser Remote API relies on the controlling device to join the camera’s WiFi access point, it does not have internet connectivity in the meantime. Modern phones usually don’t like being connected to WiFi without access to the world wide web, so they might constantly ask you to switch to a different network.

One solution could be using an ESP32 as a communication bridge. The microcontroller could be connected to the camera’s access point and exchange messages with the phone using Bluetooth. While this should work flawlessly for most requests, I wonder if the Live View feature would work across the proxy too. For sure, it would add a lot of complexity.

While the current Cine Remote app provides the essential remote control functionality I need, the Browser Remote API offers more capabilities like changing focus. Therefore, I could implement the missing features to achieve parity between the mobile app and the browser remote UI.

Due to the nature of reverse engineering, I developed the application’s data layer with a lot of trial and error. Therefore, I want to work on supporting other cameras to validate and settle on an architecture.

Since I already own a Canon 70D, which also supports wireless remote control, the most sensible first step would be to reverse-engineer its wireless communication. As far as I know, older Canon DSLR cameras use the Picture Transfer Protocol (PTP) over IP for remote control. Hence, adding support for the 70D is an ideal test if my abstractions work for other protocols too.

As my focus shifted from photography to videography in the past years, I would also love to get my hand on other cine cameras. And as a highly gear-focused filmmaker (I am very aware of it 😉), I already thought about investing in a Canon C200, which recently became quite affordable on the second-hand market. However, the C200’s codec variety, especially the lack of a 10-bit format, cannot win me over. Ultimately, I always return to the Canon C70, which became even more attractive over time with each firmware update. Although investing in another cine camera is currently only present in my daydreams, whenever I’ll have access to another model, I’ll most definitely work on supporting it in the Cine Remote app.

Last but not least, I am keen on trying out the new CCAPI, the wireless protocol modern Canon EOS cameras utilize. On that account, I greatly respect Canon for providing developers with a meaningful API, including documentation.

Independent of the exact camera model I will work on supporting, it will significantly advance the Cine Remote app, especially its architecture.

Looking forward, I don’t plan to document the app’s future development in the level of detail this series provided. While I had a blast working on these posts, they were the reason I barely made any progress on the app since the series became my main project over the last two months.

If you want to learn more about the Cine Remote project, check out its GitHub Repository.

Cine Remote

Cine Remote allows you to remote-control your Canon camera using its WiFi remote control capabilities.