Twilio video chat embed
This guide was written after a project which consisted of building a video-consulting platform. Clients would search advisors and book sessions to videocall with those advisors. For this project it was important to know exactly when the call started and ended because the fee for the call was calculated per minute.
- 1.Create a booking with a videolink
- 2.User can create a video room
- 3.User can join a video room
- 4.Ability for the app to react on events send by Twilio
This guide is built to extend the usage of the Bubble Twilio Video plugin and solves some issues with regards to lost connection. Also you will now when the room ends if everyone leaves the page without ending the call.
The main actions of the Bubble plugin will be used except from creating a room.
Follow the Bubble forum post for setup the initial plugin: https://forum.bubble.io/t/plugin-announcement-video-chat/91989
With regard to the specific video API keys. Be sure to save the secret Key. It will not be visible anymore.
- 1.Enable Back-end workflows: Settings – API – Enable Workflow API and back-end workflow – Check the box
- 2.Copy the backend workflow (endofcall) from the given editor and paste it in own app
If you want to receive webhooks from Twilio, it is necessary to have a custom API call.
- 1.Copy the API call from the editor linked above. (backend workflows) Fill in the following in the general call
- 2.Username: Account SID
- 3.Password: Auth Token
- 4.Fill in the video specific API keys in the “Create room” call
- 5.Be sure the Body type is set to form data.
- 6.Edit the Callback URL to your own app url with the name of the backend workflow at the end. In this case: https://*twiliodemoapp.bubbleapps.io*/version-test/api/1.1/wf/*endofcall*
- 7.Initialize the Call
At the moment, whenever there is an action associated with the video room you created, Twilio will send a webhook towards your backend workflow (in this case endofcall).
All the types of callback can be found here: https://www.twilio.com/docs/video/api/status-callbacks
In the backend you can act on those callbacks by using conditionals on the parameter StatusCallbackEvent. For example: you could change the end time of the booking when the callback returns room-ended. The callbacks contain a lot of information, so the usecases are broad.
- 1.Twilio has a debugger, which can be found from the dashboard on the top right corner. It gives limited information when there is an error. General logs for every call aren’t given.
- 2.You have to adept the Create Room action to work in live and test mode.
- 3.Copy the Create Room action from the read-only editor (video-page)
- 4.Change the beginning of the statuscallback parameter to your url.
This will run as followed.
If you’re in test version, the callbackURL will be https://*twiliodemoapp.bubbleapps.io*/version-test/api/1.1/wf/*endcall *
If you’re in live version the callbackURL will be https://*twiliodemoapp.bubbleapps.io*/api/1.1/wf/*endcall*
If you make the CallbackURL general in the API call, one of the two versions will send requests to the wrong version
Be sure to change everything between ** to your own app’s credentials
Last modified 2yr ago