Unable to save or limit videos on safari

[rjchaveiro]

Ziggeo client sdk version: v2.33.5

Steps To Reproduce

1. Initiate Ziggeo through JavaScript
2. Embed the recorder via JavaScript
3. Attempt to record on Safari desktop v13.1.2 and up
4. Attempt to record on Safari iOS 13 and up

Code example:

this.ziggeoApp = new ZiggeoApi.V2.Application({
  token: ZIGGEO_API_KEY,
  webrtc_streaming_if_necessary: true,
  webrtc_on_mobile: true,
});

[...]

this.ziggeoApp.on('ready', function() {
  self.ziggeoApp.ready = true;
  var recorderOptions = {
    timelimit: 300,
    timeminlimit: 30,
    stretch: true,
    height: 240,
    width: 360,
    theme: 'modern',
    allowcustomupload: false,
    allowupload: false,
  };

  self.recorder = new ZiggeoApi.V2.Recorder({
    element: element,
    attrs: recorderOptions,
  });
  
  self.recorder.activate();
});

The current behavior

On Safari, the recorder starts and the user is able to initiate the video recording on both desktop and mobile. However on mobile, the user can stop the recording at any time, regardless of the timelimit and timeminlimit properties set on the recorder constructor attrs.

And in both mobile and desktop platforms, when the user stops the recording, the recorder controls go away, the loading indicator shows up, but nothing happens, no POST requests are sent, no errors are thrown, no events are triggered.
The recorder state just gets stuck.

The expected behavior

On mobile iOS, the recorder should prevent the user from stopping and saving the recording if the recording length doesn't conform with the specified min and max duration limits.

The video, after being recorded, be fully uploaded to Ziggeo's bucket/storage, triggering the correct events with the proper data on every supported browser.

[Bane-D]

Hi Rodrigo,

Thank you for the wealth of details.

Looking at the code I can not really see what could be wrong. Is there anything in the console when this happens? Any sort of notice or error could help us to better understand where it stops working for you.

I would just add that the expected behavior would be correct. The only time when our server might pick up on video being too long is if it is uploaded from the app directly to our server.

I am asking one of my colleagues to look into this since he could probably be able to notice what is wrong right away.

Regards,
Bane

[ntshcalleia]

Hi Rodrigo,

Can you confirm whether you’re recording over HTTP or HTTPS? WebRTC recording can only happen through a secure connection, so if the page is served over HTTP we’re not able to start the WebRTC recorder and need to fall back to using the device’s camera app instead. Since we can't change the settings of the camera app it's not possible for us to set a minimum or maximum video duration when the video is recorder through this method.

[rjchaveiro]

@Bane-D Not really, the console looks clean without even warnings.

@ntshrocha Both actually, HTTPS on our beta environment and HTTP on localhost (localhost with and without safari set to allow WebRTC media recording over insecure connections).

The mobile Recording does happens within the website as expected and not opening the camera app (which was the behavior without WebRTC on).

[sambua]

Hello @ntshrocha ,

Could you please upgraded Ziggeo client sdk version from the stable to the latest. We had something very similar in FireFox, actually recorder not started but after completing recorder it always showed spinner. It can show some error if the issue is similar which we had with FireFox.

As we couldn't reproduce, we can't check from on our side.

Thanks in advance.

[rjchaveiro]

Hello @sambua,

I have tried using https://assets.ziggeo.com/v2-latest/ziggeo.js and got the same result. I will later today create a simple jsfiddle with the code which can reproduce the issue.

[rjchaveiro]

Right, so on the fiddle even after whitelisting the domain under the manage menu at ziggeo.com, I was getting 401, but in essence a simplified version of the code I am currently running and doesn't work with safari only is:
https://jsfiddle.net/8bpfekzd/

And another example of the same code, with a free account, cannot be integrated because the API key provided to free accounts results in 404. https://simple-server.rjchaveiro.vercel.app/

[Bane-D]

Hi Rodrigo,

In your JSFiddle, there is line 25 that shows this: recorder = new ZiggeoApi.V2.Player({ This should be recorder = new ZiggeoApi.V2.Recorder({ instead.

Other than that it does look like it should work (once token is added).

In terms of the key you mentioned on the other page, can you tell me where you got it from? Looking at it, I can not really see it being token belonging to any account. I would love to correct any page that might show any token or if it suggests that token can be used.

[rjchaveiro]

Oh, sorry. Little mishap on the copy and paste there. it was meant to be the recorder pasted on the fiddle.

Have a basic logic to initiate the player if the user already recorded something.

Updated Fiddle.

As for the other page, the key is from a free account which I believe the user id is: edf033e5-0543-5f0e-a420-8447eac8dc3b

Unless the token displayed at https://ziggeo.com/quickstart doesn't tie to the account since it's a free/trial plan.

Now, I've updated the other link to use the paid key and haven't ran into issues with safari as of now. Going to take a better look into it.

[Bane-D]

Thank you Rodrigo,

The tokens that are available on our website in sandboxes, demos, or alike are all temporary one time use accounts. The videos recorded there are all temporary and we do not keep any real logs about them.

They are also set not to work properly outside of our system ;)

Now, I've updated the other link to use the paid key and haven't ran into issues with safari as of now. Going to take a better look into it.

Awesome. In that case I will close this issue, however please do get back to us if there is anything wrong, happy to re-open it and help you sort it out.

Regards,
Bane