DEV Community

Digital Samba
Digital Samba

Posted on

Integrating a Video Conference Widget Using Digital Samba SDK

#sdk #tutorial #programming #css

Are you aiming to weave video conferencing directly into your website or application? Move beyond the limitations of traditional plugins and scattered workflows. The Digital Samba video conference widget enables you to embed real-time, face-to-face interactions with our intuitive SDK effortlessly. This tool empowers you to tailor your video calls' look, functionality, and capabilities to meet your specific needs perfectly. From boosting team collaboration and engaging audiences in interactive webinars to streamlining customer support, this tutorial will guide you on converting your site into a vibrant communication centre. Prepare to upgrade your digital engagement — video conferencing will become an integral part of your online presence!

Advantages of adding a video conference widget

Embedding a video conference widget into your website or app offers a plethora of benefits, significantly enhancing both user experience and functionality. Here are the key benefits:

  • Instantaneous connectivity: Eliminate the need for app downloads or tab switching. With an embedded widget, initiating video calls is as effortless as navigating your website. Envision a scenario where potential clients click a "Connect Now" button to engage with consultants, or team members immediately enter spontaneous brainstorming sessions directly from their workspace.
  • Customised branding: The Digital Samba SDK empowers you to tailor the widget's appearance to align with your brand's aesthetic. Personalise with your logo, brand colours, and unique buttons to create an integrated video meeting environment that feels intrinsically part of your digital platform.
  • Elevated collaboration: Face-to-face interaction has unmatched power. Embedding video meetings directly into your platform enables live collaboration, encouraging teams to exchange ideas, solve problems, and make decisions with enhanced efficiency. This real-time communication leads to deeper comprehension, streamlined problem-solving, and boosted productivity.
  • Revolutionised customer support: Elevate your customer service from standard to stellar. Offer on-the-spot video consultations or tailored product demonstrations within the comfort and familiarity of your platform. This direct, personalised engagement fosters trust and solidifies relationships and significantly improves customer satisfaction.
  • Scalability and security: The Digital Samba widget is designed to grow with your business, effortlessly supporting an expanding volume of meetings without sacrificing performance or security. Backed by top-tier encryption standards, your communications remain secure, ensuring privacy and protection for all parties involved.

Implementing a video conference widget transcends simply adding a new feature—it represents a strategic enhancement in how you engage, collaborate, and connect with your audience. By integrating seamless video conferencing capabilities, watch as your website or application transforms into a vibrant centre of communication and achievement.

Initiating your journey with Digital Samba SDK

Grasping the utility of integrating video conferencing widgets into our digital platforms, the question arises: how do we actualise this integration? This guide will navigate through the process of swiftly and effectively embedding, managing, and tailoring a video conference widget.

Initial setup

To prepare for embedding a video conferencing widget into your digital environment, you'll need to ensure a few essentials are in order:

  • Create a Digital Samba account: Start by signing up here if you haven't already.
  • Internet-enabled computer: Ensure your workstation is connected to the internet.
  • WebRTC-compatible browser: A browser that supports WebRTC is crucial for seamless video conferencing.
  • Familiarity with JavaScript/TypeScript: A basic understanding of JavaScript or TypeScript will be beneficial. With these prerequisites checked off, you're ready to embed a video conferencing widget into your applications and websites. The integration process is designed to be uncomplicated, provided you have the necessary groundwork.

Step-by-step integration

In the forthcoming section, we will delve into how to seamlessly integrate the SDK, tailor branding to your specifications, implement video call functionalities, adjust participant settings, and embed the entire setup into your existing digital platforms. To commence, kindly follow the detailed steps provided:

Stay tuned as we guide you through each phase, ensuring you're well-equipped to harness the power of Digital Samba's video conferencing capabilities in your digital domain.

1. Setting up a video conference room with Digital Samba

Digital Samba provides the flexibility to create custom video conference rooms tailored to your specific needs for meetings, webinars, and other events.

Before you can dive into video calls using the Digital Samba SDK, it's essential to generate a dedicated room URL. This URL serves as the unique identifier for your call, facilitating the setup of the SDK and the initiation of video sessions within Digital Samba's versatile virtual environments.

Creating a Digital Samba room can be accomplished in two primary ways: through the API (which we'll focus on here) or directly via the user dashboard.

a. Initiate a room via API

Make a POST request to https://api.digitalsamba.com/api/v1/rooms

curl --request POST \

--header "Content-Type: application/json" \

--url https://api.digitalsamba.com/api/v1/rooms \

--user YOUR_TEAM_ID:YOUR_DEVELOPER_KEY \

--data '{"privacy": "public"}'
Enter fullscreen mode Exit fullscreen mode

Obtain your TEAM_ID and DEVELOPER_KEY from the Team section within your Digital Samba dashboard.

b. Access the room ID from the API response

The response will contain a randomly generated ‘friendly_url’ like:

"friendly_url": "l5zIyafmlEFMPKA"
Enter fullscreen mode Exit fullscreen mode

Utilise this identifier to assemble the complete meeting URL:

https://teamName.digitalsamba.com/l5zIyafmlEFMPKA
Enter fullscreen mode Exit fullscreen mode

c. Room URL customisation
While the 'friendly_url' defaults to a randomly assigned string, there's the option to designate a more memorable custom name during room creation:

curl --request POST \

--data '{"privacy": "public", "friendly_url": "my-test-meeting"}'
Enter fullscreen mode Exit fullscreen mode

This adjustment produces a user-friendly meeting URL:

https://teamName.digitalsamba.com/my-test-meeting
Enter fullscreen mode Exit fullscreen mode

Custom names can include letters, numbers, hyphens, and underscores, simplifying the process of sharing and recalling your room URLs.

2. Embedding the Digital Samba SDK in your platform

Embedding the Digital Samba SDK into your digital platform is a seamless process, achievable through either NPM or CDN. Follow this guide for easy integration:

Through NPM:

Execute the following command to install the SDK:

npm install @digitalsamba/embedded-sdk
Enter fullscreen mode Exit fullscreen mode

Through CDN:

Incorporate the SDK directly into your HTML:

<script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>
Enter fullscreen mode Exit fullscreen mode

Initialising the SDK involves importing the package and establishing a DigitalSambaEmbedded control with your specific configuration parameters:

import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';

const roomURL = "https://demo.digitalsamba.com/myroom";

const sambaFrame = DigitalSambaEmbedded.createControl({ 
  url: roomURL
});
Enter fullscreen mode Exit fullscreen mode

This command generates a sambaFrame instance that is responsible for displaying the video call interface within your application.

To participate in a call, activate the load() function on your sambaFrame instance:

sambaFrame.load();
Enter fullscreen mode Exit fullscreen mode

Executing this function activates the SDK, unveils the call interface, and seamlessly connects you to the designated ‘roomURL’. This streamlined approach ensures swift integration and enables immediate access to high-quality video conferencing capabilities within your application.

3. Tailoring branding elements

Elevate your video conferencing widget's appeal by personalising it with the changeBrandingOptions() method, designed to mirror your brand's aesthetic seamlessly. This feature allows you to alter various visual components of the widget, crafting a unified visual narrative that echoes your brand's ethos.

Accessible via the changeBrandingOptions() method, here are the customisable aspects you can modify:

  • paletteMode: Opt between 'light' and 'dark' themes to influence the widget's background colours and ambience.
  • primaryColor: Determine the widget's primary colour for highlights and interactive buttons. Use a hex code to ensure it matches your brand's palette.
  • toolbarColor: Adjust the toolbar's background colour, using a hex code, to either complement or offset the main theme.
  • roomBackgroundColor: Choose a specific background colour for the conferencing space, also via hex code, for precise brand alignment. Example usages include: 
// Implementing a dark theme
sambaFrame.changeBrandingOptions({'paletteMode': 'dark'}); 

// Setting the primary colour to blue
sambaFrame.changeBrandingOptions({'primaryColor': '#0000ff'});

// Customising the toolbar background to green
sambaFrame.changeBrandingOptions({'toolbarColor': '#00ff00'});

// Applying a red background colour to rooms
sambaFrame.changeBrandingOptions({'roomBackgroundColor': '#ff0000'});
Enter fullscreen mode Exit fullscreen mode

The changeBrandingOptions() method simplifies aligning your video conferencing widget's design with your corporate identity, enhancing the user experience through cohesive, brand-centric visuals. Customising your widget not only strengthens your brand presence but also enriches the user interface within your video conferencing platform.

4. SDK methods for enhanced video conference management

Digital Samba's SDK enriches your video conferencing experience with a variety of methods, offering extensive control over your virtual meetings. Below, we outline essential functionalities and their respective SDK commands:

4.1 Microphone management

Ensuring optimal audio quality is key. The SDK allows you to mute to avoid background disturbances and unmute when participating.

To mute the microphone, use the disableAudio() method:

sambaFrame.disableAudio();
Enter fullscreen mode Exit fullscreen mode

To unmute the microphone, use the nableAudio() method:

sambaFrame.enableAudio();
Enter fullscreen mode Exit fullscreen mode

4.2 Video feed control

Manage your video presence for privacy or to save bandwidth.

Managing your video feed is essential for privacy and bandwidth considerations. You can either activate your camera to share your video or deactivate it to maintain privacy or conserve network resources.

To enable video feed, use the enableVideo() method:

sambaFrame.enableVideo();
Enter fullscreen mode Exit fullscreen mode

To disable video feed, use the disableVideo() method:

sambaFrame.disableVideo();
Enter fullscreen mode Exit fullscreen mode

4.3 Share your screen

Screen sharing enhances presentations and teamwork by showing your screen to others.

To authorise screen sharing, use the allowScreenshare() method:

sambaFrame.allowScreenshare('user_id');
Enter fullscreen mode Exit fullscreen mode

To revoke screen sharing permission, use the disallowScreenshare() method:

sambaFrame.disallowScreenshare('user_id');
Enter fullscreen mode Exit fullscreen mode

To initiate screen sharing, use the startScreenshare() method:

sambaFrame.startScreenshare();
Enter fullscreen mode Exit fullscreen mode

To cease screen sharing, use the stopScreenshare() method:

sambaFrame.stopScreenshare();
Enter fullscreen mode Exit fullscreen mode

4.4 Recording sessions

Capture meetings for review or records, storing them securely in Digital Samba's cloud.

To start recording a session, use the startRecording() method:

sambaFrame.startRecording();
Enter fullscreen mode Exit fullscreen mode

To stop recording, use the stopRecording() method:

sambaFrame.stopRecording();
Enter fullscreen mode Exit fullscreen mode

4.5 Virtual backgrounds

Enhance or privatize your backdrop digitally for a more engaging or confidential setting.

To enable a virtual background, use the enableVirtualBackground() method:

sambaFrame.enableVirtualBackground({blur: 'balanced'});
Enter fullscreen mode Exit fullscreen mode

To disable the virtual background, use the disableVirtualBackground() method:

sambaFrame.disableVirtualBackground();
Enter fullscreen mode Exit fullscreen mode

To configure the virtual background, use the configureVirtualBackground() method:

sambaFrame.configureVirtualBackground();
Enter fullscreen mode Exit fullscreen mode

You must specify the blur, image, or imageUrl fields. If set to true, the optional enforce parameter prevents the user from altering the background manually.

VirtualBackgroundOptions {
enforce?: boolean;
blur?: 'balanced' | 'strong';
image?: string;
imageUrl?: string;
}
Enter fullscreen mode Exit fullscreen mode

4.6 Participant overview

Stay informed on meeting attendance with an easy method to view all participants.

sambaFrame.listUsers();
Enter fullscreen mode Exit fullscreen mode

4.7 Exiting calls

Leave meetings as needed, either temporarily or at their conclusion.

sambaFrame.leaveSession();
Enter fullscreen mode Exit fullscreen mode

4.8 Ending calls

Close the session entirely, concluding the meeting for all participants.

sambaFrame.endSession();
Enter fullscreen mode Exit fullscreen mode

For detailed guidance on utilising these features within the Digital Samba SDK, including joining, customising, and managing your video conferencing widget, consult our comprehensive SDK documentation and tutorials.

Conclusion

The Digital Samba SDK streamlines the incorporation of video conferencing capabilities into your digital platforms, making it an invaluable tool for enhancing communication and collaboration online. Through the straightforward guidance provided, individuals with varying levels of technical expertise can effectively implement video conferencing features, fostering greater connection and engagement within their digital spaces. This toolkit is especially beneficial for boosting the efficiency of team collaborations, elevating customer service interactions, or delivering compelling webinar content.

Embrace the capabilities of the Digital Samba SDK and transform your websites or applications into dynamic, interactive environments. Take advantage of Digital Samba's generous offer of 10,000 free credits to integrate advanced video conferencing functionality without delay. Register today and elevate your digital presence with seamless, high-quality video communication.

Top comments (0)

Read next

angelotheman profile image

What happens when you type google.com in your browser and press Enter ❓

Angel Oduro-Temeng Twumasi -

asheeshh profile image

Creating a Pokémon guessing game using Supabase, Drizzle, and Next.js in just 2 hours!

ashish -

schemetastic profile image

12 Copy & paste CSS gradients + 10 Free HD mesh gradients

Schemetastic (Rodrigo) -

esproc_spl profile image

a very tool for developing quantitative strategy model

Judy -