Omnichannel Voice & Video Calling in React Native

Voice and Video Calling SDK on React Native to use calling feature of react native mobile applications against Dynamics 365 Omnichannel Services

Please make sure you have a omnichannel chat widget configured before using this package or you can follow this link


  • React Native
  • @microsoft/omnichannel-chat-sdk
  • Omnichannel Chat SDK React Native Installation


npm install @microsoft/omnichannel-voice-video-calling-react-native


The following steps will be required to run Omnichannel voice video calling package:

  • Run npm install react-native-gesture-handler --save
  • For iOS:
    • Add following Information property list in Info.plist to ask for permissions for microphone and camera:
      • Privacy - Camera Usage Description
      • Privacy - Microphone Usage Description
    • Add use_frameworks! in Podfile. Make sure you remove use_flipper! if present in Podfile
    • Update the ios version >= 14.0 in Podfile. Make sure deployment target is >= 14.0
  • For android
    • Please make sure the minSdkVersion in build.gradle of project is >= 26
    • Please add System.loadLibrary("c++_shared"); in under onCreate() for support of RN version 0.63 and greater
    • Add the following in build.gradle of .app module

API Reference

LocalVideoViewComponent to render local video stream<LocalVideoView style={Add your style here} />
RemoteVideoViewComponent to render remote video stream<RemoteVideoView style={Add your style here} />
createVoiceVideoCallingCreates Voice Video calling SDKOmnichannel config with this required with this method
VoiceVideoCallingSDK.askPermissions()Ask for permissionsUse this for android. For iOS add permissions in Info.plist
VoiceVideoCallingSDK.initialize()Initialize Voice Video calling SDKNeed to pass ChatToken, CallingToken, and OCClient with this method
VoiceVideoCallingSDK.onCallAdded()Triggered when there's an incoming call 
VoiceVideoCallingSDK.onLocalVideoStreamAdded()Triggered when local video stream is available (e.g.: Local video stream added succesfully in LocalVideoView) 
VoiceVideoCallingSDK.onLocalVideoStreamRemoved()Triggered when local video stream is unavailable (e.g.: Local video stream removed from LocalVideoView) 
VoiceVideoCallingSDK.onRemoteVideoStreamAdded()Triggered when remote video stream is available (e.g.: Remote video stream added succesfully in RemoteVideoView) 
VoiceVideoCallingSDK.onRemoteVideoStreamRemoved()Triggered when remote video stream is unavailable (e.g.: Remote video stream removed from RemoteVideoView) 
VoiceVideoCallingSDK.onCallDisconnected()Triggered when current call has ended or disconnected regardless the party 
VoiceVideoCallingSDK.isMicrophoneMuted()Check if microphone is muted 
VoiceVideoCallingSDK.isLocalVideoEnabled()Check if local video is available 
VoiceVideoCallingSDK.isRemoteVideoEnabled()Check if remote video is available 
VoiceVideoCallingSDK.acceptCall()Accept voice/video callPass withVideo boolean flag with this method
VoiceVideoCallingSDK.rejectCall()Reject current incoming call 
VoiceVideoCallingSDK.stopCall()Ends/Stops current call 
VoiceVideoCallingSDK.toggleMute()Mute/Unmute current call 
VoiceVideoCallingSDK.toggleLocalVideo()Display/Hide local video of current call 
VoiceVideoCallingSDK.toggleSpeaker()Turn on/off speaker 
VoiceVideoCallingSDK.toggleCamera()Toggle front/back camera 


import { OmnichannelChatSDK } from '@microsoft/omnichannel-chat-sdk';

import createVoiceVideoCalling, {LocalVideoView, RemoteVideoView} from "@microsoft/omnichannel-voice-video-calling-react-native";

// Initialize OmnichannelChatSDK
const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
await chatSDK.initialize();

// Create VoiceVideoCallingSDK
const voiceVideoCallingSDK = createVoiceVideoCalling(omnichannelConfig);

// Start Omnichannel chat
await chatSDK?.startChat();

// Get chat token
const chatToken: any = await chatSDK?.getChatToken();

// Ask permissions for android

// Initialize VoiceVideoCallingSDK
  OCClient: chatSDK.OCClient

// Triggered when there's an incoming call
voiceVideoCallingSDK.onCallAdded(() => {

// Triggered when local video stream is available (e.g.: Local video stream added succesfully in LocalVideoView)
voiceVideoCallingSDK.onLocalVideoStreamAdded(() => {

// Triggered when local video stream is unavailable (e.g.: Local video stream removed from LocalVideoView)
voiceVideoCallingSDK.onLocalVideoStreamRemoved(() => {

// Triggered when remote video stream is available (e.g.: Remote video stream added succesfully in RemoteVideoView)
voiceVideoCallingSDK.onRemoteVideoStreamAdded(() => {

// Triggered when remote video stream is unavailable (e.g.: Remote video stream removed from RemoteVideoView)
voiceVideoCallingSDK.onRemoteVideoStreamRemoved(() => {

// Triggered when current call has ended or disconnected regardless the party
voiceVideoCallingSDK.onCallDisconnected(() => {

// Check if microphone is muted
const isMicrophoneMuted = await voiceVideoCallingSDK.isMicrophoneMuted();

// Check if local video is available
const isLocalVideoEnabled = await voiceVideoCallingSDK.isLocalVideoEnabled();

// Check if remote video is available
const isRemoteVideoEnabled = await voiceVideoCallingSDK.isRemoteVideoEnabled();

// Accept Voice Call

// Accept Video Call
const withVideo = true;

// Reject current call
await voiceVideoCallingSDK.rejectCall();

// Ends/Stops current call
await voiceVideoCallingSDK.stopCall();

// Mute/Unmute current call

// Display/Hide local video of current call

// Turn on/off speaker

// Toggle front/back camera


// Render RemoteVideoView & LocalVideoView
return (


Do not hide/display LocalVideoView & RemoteVideoView based on a variable value

e.g.: Incorrect

const [display, setDisplay] = useState(false);
return (
    display && <View>
  • Both components ALWAYS need to be rendered or the app will crash otherwise
  • Instead, use style to hide/display the components

e.g.: Correct

const [display, setDisplay] = useState(false);

return (
  <View style={display? styles.videoContainer: styles.noDisplay}>


const styles = StyleSheet.create({
  videoContainer: {
    // ...
  noDisplay: { // Style to hide the video container view
    display: 'none',
    height: 0,
    width: 0


Omnichannel voice video calling package collects telemetry by default to improve the feature’s capabilities, reliability, and performance over time by helping Microsoft understand usage patterns, plan new features, and troubleshoot and fix problem areas.

Some of the data being collected are the following:

Organization Ide00e67ee-a60e-4b49-b28c-9d279bf42547
Widget Id1893e4ae-2859-4ac4-9cf5-97cffbb9c01b
Platform NameiOS
Anonymized IP Address (last octet redacted)

If your organization is concerned about the data collected by the omnichannel voice video sdk, you have the option to turn off automatic data collection by adding a flag while creating the SDK.

    const omnichannelConfig = {
        orgUrl: "e00e67ee-a60e-4b49-b28c-9d279bf42547",
        orgId: "",
        widgetId: "1893e4ae-2859-4ac4-9cf5-97cffbb9c01b"

    const voiceVideoCallingSDK = createVoiceVideoCalling(omnichannelConfig, {disable: false}));
    await voiceVideoCallingSDK.initialize();


This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact with any additional questions or comments.


This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

packagingOptions {
    pickFirst 'lib/x86/'
    pickFirst 'lib/arm64-v8a/'
    pickFirst 'lib/x86_64/'
    pickFirst 'lib/armeabi-v7a/'

Download Details:

Author: Microsoft

Official Github: 

License: MIT

#microsoft   #data   #data-analysis #data-science 

Omnichannel Voice & Video Calling in React Native
1.50 GEEK