wazo-js-sdk icon indicating copy to clipboard operation
wazo-js-sdk copied to clipboard

Video Starts on Hold and Muted, Audio Call Starts Muted

Open stephanoparaskeva opened this issue 4 years ago • 0 comments

  • When making audio video calls and Audio starts in the muted state, I can only hear out of 1 phone.
  • To fix Audio calls I need to press the mute/unmute button on the receiving device 2 times for Audio
  • When making video calls, both 1 phone starts on hold and so there is no Video, and I cannot hear from 1 device.
  • To fix video call I need to press the hold/unhold button 2 times on the receiving device. And then press mute/unmute button 2 times. This only works after the call has started.

I am using a work around. But video still remains muted until pressing buttons. The workaround is to call Wazo.phone.unmute on accepted

import RNCallKeep from 'react-native-callkeep';
import { RTCView, registerGlobals } from 'react-native-webrtc';
import { v4 as uuid } from 'uuid';
import Wazo from '@wazo/sdk/lib/simple';


// Polyfill WebRTC
registerGlobals();

const Dialer = ({ setLogout }: { setLogout: () => void }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { number, inCall, held, videoHeld } = state;
  const session = useRef<any>(null);
  const callId = useRef<string>('');
  const remote = useRef<any>(null);
  const local = useRef<any>(null);

  const onAnswerCallAction = async () =>
    Wazo.Phone.accept(session.current, true);


  const call = async (num: any, video = false) => {
    if (!num || inCall) return;
    try {
      await Wazo.Phone.call(num, video);
      dispatch({ inCall: true });
    } catch (err) {
      console.warn(err);
    }
  }

  const initializeWebRtc = async () => {
    await Wazo.Phone.connect({ audio: true, video: true });

    Wazo.Phone.on(Wazo.Phone.ON_CALL_OUTGOING, (outgoingSess: any) => {
      session.current = outgoingSess;
      const { number: num } = outgoingSess;
      RNCallKeep.startCall(oneTimeId(), num, num, 'number', false);
    });
    Wazo.Phone.on(Wazo.Phone.ON_CALL_INCOMING, (incomingSess: any) => {
      session.current = incomingSess;
      const { number: num } = incomingSess;
      RNCallKeep.displayIncomingCall(oneTimeId(), num, num, 'number', false);
    });
    Wazo.Phone.on(Wazo.Phone.ON_CALL_FAILED, () => {
      RNCallKeep.endCall(oneTimeId());
      callId.current = '';
      dispatch({ inCall: false });
    });
    Wazo.Phone.on(Wazo.Phone.ON_CALL_ENDED, () => {
      RNCallKeep.endCall(oneTimeId());
      callId.current = '';
      onCallTerminated();
    });

    Wazo.Phone.on(Wazo.Phone.ON_CALL_ACCEPTED, async (acceptedSess: any) => {
      if (inCall) return;
      session.current = acceptedSess;

      if (acceptedSess?.cameraEnabled) {
        const sipSession = Wazo.Phone.getCurrentSipSession();
        console.warn({ sipSession });
        const { peerConnection } = sipSession.sessionDescriptionHandler;
        const lStreams = peerConnection.getLocalStreams();
        const rStreams = peerConnection.getRemoteStreams();

        const anyStream = (stream: any) => !!stream.getVideoTracks().length;
        local.current = lStreams.find(anyStream);
        remote.current = rStreams.find(anyStream);
      }
      // @ts-ignore
      RNCallKeep.setCurrentCallActive(oneTimeId());
      Wazo.Phone.unmute(acceptedSess);                                         << --- THIS IS WORKAROUND
      dispatch({ inCall: true });
      Wazo.Phone.hold(acceptedSess);
      Wazo.Phone.unhold(acceptedSess);
    });
  };
  const initializeCallKeep = () => {
    RNCallKeep.setup(options);
    RNCallKeep.setAvailable(true);
    RNCallKeep.addEventListener('answerCall', onAnswerCallAction);
    RNCallKeep.addEventListener('endCall', hangup);
  };

  const init = async () => {
    await initializeWebRtc();
    initializeCallKeep();
  };


// Further down file inside `return`
        {!inCall && (
          <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity
              onPress={() => call(number, false)}
              style={styles.button}>
              <CommonText style={{ color: 'white' }}>Call</CommonText>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => call(number, true)}
              style={styles.button}>
              <CommonText style={{ color: 'white' }}>Video call</CommonText>
            </TouchableOpacity>
          </View>
        )}
 {remote.current && inCall && (
            <View style={{ borderColor: 'red', borderWidth: 5, flex: 1 }}>
              <RTCView
                objectFit='cover'
                streamURL={remote.current?.toURL()}
                style={styles.remoteVideo}
                zOrder={15}
              />
            </View>
          )}

Saw this in console with workaround:

Screenshot 2020-07-02 at 14 23 06

I can now hear from 1 device and I can see video on both devices

This is console No Workaround

Screenshot 2020-07-02 at 14 34 38

I Dont hear audio on either device And I don't see video at all

Environment:
    "@wazo/sdk": "0.32.13",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.2",
    "react-native-callkeep": "^3.0.15",
    "react-native-webrtc": "^1.75.3",

stephanoparaskeva avatar Jul 02 '20 13:07 stephanoparaskeva