Ziggeo WebRTC support to be deprecated without SSL-enabled app in Chrome v60

Tips
1

Just a heads up to anyone using Bubble with Ziggeo on a free plan/without SSL:

HTTP + Camera Access is deprecated: As you may or may not know, most browsers supporting WebRTC will not grant access to the camera via WebRTC for host websites running on HTTP. Our recorder will automatically fallback to Flash which can still access the camera even when using HTTP. However, starting with Chrome v60, this will not work anymore. Chrome will now decline access to the camera when being accessed via HTTP, disregrading of whether it being Flash or WebRTC. Other browsers are likely to follow suit in the near future. Therefore, we highly encourage you to upgrade your website to SSL if you haven’t done so already.

https://ziggeo.com/blog/2017/06/13/http-camera-access-is-deprecated/?mc_cid=0beaf9aba7&mc_eid=e0812affc9

2 Likes
2

Hi Philip,

Great that you had posted it here for everyone, just a small teaser - we have some ideas “around” this :wink: Will keep our twitter dev channel up to date on it of course :slight_smile:

  • Still using HTTPS is suggested approach not just for video, rather for many other things as well.

Cheers,
Bane

3

Hi @bane ,
I’m experiencing a similar issue:
I’m using the Bubble’s Ziggeo plugin which works fine on most of the devices, but one of my user told me he can’t make it work properly. He gets a message telling him to upload adobe flash, but then its screen goes blank and doesn’t let upload. His browser is Safari 13 (macOS Mojave).

Is there a way to fix it or for Ziggeo to send webhook saying that current user’s browser isn’t uptodate (I haven’t seen it in the webhook list)?

Many thanks in advance

4

Hi Remi,

At this time the HTTPS is requirement for recording videos by most browsers, so this is always recommended, or fallback systems would kick in, such as Adobe Flash.

Now with Safari there is another point to mention, because the WebRTC implementation made by Apple for Safari is only as WebRTC Streaming.

You should see in the plugin the option that says something along of lines “WebRTC Streaming if Needed”. That would use our webrtc_streaming_if_necessary app parameter.

This would then turn on the streaming aspect only when it is needed as it is on Safari while keep it off otherwise.

  • The streaming component webrtc_streaming which is activated through this option as well, makes the upload go faster however the network speed you have at any given moment will impact the quality you have at that moment. This is the nature of the streaming component and is the reason why I suggest using the above property instead :slight_smile:

PS: If you wish to use the WebRTC on mobile devices then you can also search for webrtc_on_mobile property.

The exact naming might be different in the plugin you use.

This is how it would look if the app header is set up through JavaScript:

var ziggeoApp = new ZiggeoApi.V2.Application({
	token:"APPLICATION_TOKEN",
	webrtc_streaming_if_necessary: true,
	webrtc_on_mobile: true
});

Hope this helps :slight_smile:

Oh and we do not really have this info available through Webhook. Since webhooks happen on the server side it these would be available when the video gets submitted (so they had a way to record). Instead you could use the JS events (frontend events).

You can see them here: https://ziggeo.com/docs/sdks/javascript/browser-interaction/events however the plugin might offer you the interface to access them.

Cheers,
Bane

5

Thanks for your detailed response @bane
I could get the Ziggeo player working as expected, but I don’t know how to get the Ziggeo video number when the record has ended to save it in the Bubble database, and when I get this number I would like to reset the recorder.
I added some code I found in your documentation but it doesn’t work. I must have made a mistake.

image
image1438Ă—718 132 KB

6

Hi there,

Looking at the screenshot I see that you have this part of the code:
var element = document.getElementById('elementID');

It is very likely that elementID is not the actual ID of the element where the player is added.

If you are familiar with console, do try to find out what is the ID of the element. I am sure that there is a way within Bubble to find the element’s ID as well.

If you are not familiar with console or how to find ID, please do let me know.

Now if you do find the element ID you could then either set up the input bind parameter to have some field filled out with the video token or to use the verified event to capture it.

With that said all plugins should really do this internally for you so the token should be captured. Unless of course if you added the player through your own JS / HTML code?

7

Just wanted to follow up and re-phrase myself here a bit :slight_smile:

Looking at the code, the recorder is added through HTML code and it is missing the event as well as the input bind, and the code above it in orange is to find the player.

For the player, you need to have proper ID, while for the recorder you need to add event or input bind parameter.

Still this should be added through the plugin itself, without the need for you to add the codes yourself.

8

Actually I try to set a minimum length. I thought that getting the Ziggeo video ID could tell me how long is the video but it doesn’t with the current plugin. With this length I could then remove the video if too short for me.
Is there a GET API I could use to do get the video informations?

9

I missed notice about your reply here @remi.f. My suggestion is generally to check in with us through our support channels just to be safe (if the question is something about our system).

In terms of the API calls, there are plenty that you can use with JavaScript. They are shown here: https://ziggeo.com/docs/sdks/javascript/api

Please note that they are async in nature, so if you do something like this:

console.log(1);

var response = ziggeo_app.videos.get(token_or_key);

console.log(2);

response.success( function (data) {
    //Your success code here.
   console.log(3);
});

console.log(4);

response.error(function (error) {
    //Your error handling code here
   console.log(5);
});

console.log(6);

Your console will output something like:

1
2
4
6
3

Hope this helps :slight_smile:

1 Like