Inline HTML5 Desktop Recorder on Safari on iOS

Pipe’s HTML5 desktop recorder can now be used inline on Safari on iOS/iPadOS 14.3+.

The move is part of our effort to provide desktop-like inline recorders on mobile devices. Almost 3 years ago, we introduced the same capability on Chrome on Android. Safari on iOS/iPadOS took much longer because the required MediaStream Recording API was only turned on by default recently.

Compared to the existing native recorder, the new recorder functions inline in the web page, streams the data instead of uploading/POSTing it, does not have a 10 minute recording limit, has control over the video resolution and can enforce a max recording time.

The new recorder is in beta.

Switching to the new inline recorder

You can switch to the new desktop recorder on Safari individually on each environment from your environment's settings or when creating a new environment.

Permissions & Persistence

When the user tries to capture video using the Pipe desktop inline recorder he will be asked to Allow or Cancel camera and microphone access:

The user option in the dialog above is not persistent. Every time you enter a recording session, permission to access the user's camera and microphone will be asked when pressing the [Record Video] button.

Video orientation, resolution, cameras and zoom level

Orientation

You'll get portrait video when the user holds the phone in portrait mode and landscape video otherwise. This is an OS-level enforcement and can't be changed.

Resolutions

iOS and iPadOS have wide resolution support.

Older iOS and iPadOS devices might not support all resolutions. Support also differs between front and back cameras. For example, a 2018 iPhone XS' front camera will not support 4k (3840x2160 landscape or portrait) when using the front camera.

Cameras

Through the getUserMedia() API we use to capture video in the Safari browser, we only have access to the Front Camera or Back Camera. There's no way to specifically select the back telephoto or back wide camera on the newer iPhone devices. On these devices, the widest camera will be used. That means, on the iPhone 12 and 13, you'll get videos at the 0.5x level when recording using the Back Camera.

The Front Camera (selfie cam) will be accessed by default by the Pipe desktop recording client. The user can switch to the Back Camera by clicking the flip icon in the top right corner.

Codecs

From Safari on iOS and iPadOS, we’re receiving H.264 video and 1 channel AAC audio @ 48000 Hz in .mp4 files.

Mobile use cases

We’ve run tests against different scenarios that could happen on a mobile device while recording. Here is what we found:

Rotating the device

The videos will inherit the device's orientation (landscape or portrait) when you start the recording. Rotating the device during a recording has no effect.

Switching apps

If you switch applications during recording, the recorder will continue to record, capturing just the audio. There is no video captured while in another app, which manifests differently during playback depending on the player. Some players show a black image while others show the last frame.  After switching back to the Safari browser, the video part does not seem to resume capture. While in the iOS/iPadOS 14 and 15 app switching interface, the recording process captures both audio and video.

Switching Safari tabs

Same as switching apps. In the Safari 14 and 15 tab switching interface, the recording process continues normally and captures audio and video.

Closing Safari app or the Safari tab

Closing the Safari tab or closing Safari altogether will count as a disconnect. If you close the Safari tab/app while you’re recording and the recorder has the autosave on, Pipe’s recording recovery mechanism will spring into action, it will recover the data that has reached our media server and will add it to your account’s list of recordings.

Receiving a phone call while recording

See known issues below.

Audio only recording

Works as expected.

Testing

We've set up a few demos on CodePen to help you test the inline recorders right away on your own mobile devices:

Responsive 480p Video Recorder
https://codepen.io/naicuoctavian/full/JjyBdoR

Portrait Fixed 1080p Video Recorder
https://codepen.io/naicuoctavian/full/JjyxMzL

Responsive Audio Recorder
https://codepen.io/naicuoctavian/full/PoKBZGp

Known issues

1. On Safari on iOS 15, the first time you play a recording that you just recorded, it will only play the audio while the screen is either black or stuck on the first video frame. Playback works correctly with 2nd attempt. This does not happen on iOS 14 and it is fixed in iOS 15.1.
2. Receiving a phone/FaceTime/WhatsApp call on iOS 15 brings up the iOS call overlay. If you're recording, the video feed in the recorder turns black. Rejecting the call does not bring the video back. Surprisingly, the resulting recording contains all the video but the audio is out of sync starting with the moment the phone rang (apparently audio is not captured while the phone rings).