刷脸开门系统信息提示以及收银台语音通话功能实现

src/pages/VerticalPage.js

@@ -16,6 +16,9 @@ import {login} from '../utils/config';
 import {colors} from '../utils/common';
 import WxFacepay from '../utils/WxFacepay';
 import {width} from '../utils/screen';
+import Speech from '../utils/Speech';
+import delay from '../utils/delay';
+import {leaveTalkCall, onTalkCall} from '../utils/agora';
 
 let pageSize = 8; // 分页大小
 window.pageSize = pageSize;
@@ -28,6 +31,7 @@ class VerticalPage extends Component {
     contact: '',
     maskVisible: true,
     visibleActive: false,
+    talkCall: 2, // 0请求通话，1通话中，2，已挂断通话，待机状态
   };
 
   async componentWillMount() {
@@ -41,6 +45,65 @@ class VerticalPage extends Component {
     }
   }
 
+  async componentDidMount() {
+    this.listen();
+  }
+
+  listen = async () => {
+    try {
+      while (!window.socket) {
+        await delay(1000);
+      }
+      if (!window.socket.hasListeners('talkCall')) {
+        // 语音通话中
+        window.socket.on('talkCall', this.handleTalkCall);
+      }
+      if (!window.socket.hasListeners('talkLeave')) {
+        // 语音通话中
+        window.socket.on('talkLeave', this.leaveC);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  handleTalkCall = async () => {
+    try {
+      // 加入语音通话
+      clearInterval(this.noTalkCall);
+      clearInterval(this.callTimeout);
+      const {data} = await this.props.dispatch({
+        type: 'agora/agora',
+      });
+      await onTalkCall(data);
+      clearInterval(this.onCallTimeout);
+      this.onCallTimeout = setTimeout(() => {
+        this.leaveC();
+      }, 5 * 60 * 1000);
+      this.setState({
+        talkCall: 1,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  leaveC = async () => {
+    try {
+      clearInterval(this.noTalkCall);
+      clearInterval(this.callTimeout);
+      await leaveTalkCall;
+      await this.props.dispatch({
+        type: 'agora/talkLeave',
+      });
+      this.setState({
+        talkCall: 2,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   authinfo = async () => {
     const rawdata = await WxFacepay.rawdata();
     const {data} = await this.props.dispatch({type: 'goods/faceinfo', rawdata});
@@ -140,6 +203,32 @@ class VerticalPage extends Component {
     }
   };
 
+  onCall = async () => {
+    const {talkCall} = this.state;
+    if (talkCall === 2) {
+      Speech.speak('正在接通中请稍候');
+      this.talkCall();
+      clearInterval(this.noTalkCall);
+      this.noTalkCall = setInterval(() => this.talkCall(), 10000);
+      this.setState({
+        talkCall: 0,
+      });
+      clearInterval(this.callTimeout);
+      this.callTimeout = setTimeout(() => {
+        clearInterval(this.noTalkCall);
+        this.setState({
+          talkCall: 2,
+        });
+      }, 30000);
+    }
+  };
+
+  talkCall = () => {
+    this.props.dispatch({
+      type: 'agora/talkCall',
+    });
+  };
+
   renderHeader = () => {
     return (
       <View style={{flex: 1, flexDirection: 'column'}}>
@@ -179,10 +268,29 @@ class VerticalPage extends Component {
       </View>
       <View style={styles.TdStyle}>
         {item.price ? (
-          <Text style={styles.TdText}>
-            {' '}
-            ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
-          </Text>
+          // <Text style={styles.TdText}>
+          //   {' '}
+          //   ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
+          // </Text>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}>
+            <Text
+              style={{
+                fontSize: 20,
+                textDecorationLine: 'line-through',
+              }}>
+              ￥{NP.round(item.prePrice, 2).toFixed(2)}/
+              <Text style={{fontSize: 20}}>{item.unit}</Text>
+            </Text>
+            <Text style={{fontSize: 25, color: colors.textXSActive}}>
+              ￥{NP.round(item.price, 2).toFixed(2)}/
+              <Text style={styles.TdText}>{item.unit}</Text>
+            </Text>
+          </View>
         ) : (
           <Text style={styles.TdText}>
             {' '}
@@ -283,10 +391,12 @@ class VerticalPage extends Component {
             <Image style={styles.counterText} source={counterText} />
             <Image source={img24h} />
           </View>
-          <View style={styles.right}>
-            <Image style={styles.phone} source={phone} />
-            <Text style={styles.number}>{contact}</Text>
-          </View>
+          <Touch onPress={() => this.onCall()}>
+            <View style={styles.right}>
+              <Image style={styles.phone} source={phone} />
+              <Text style={styles.number}>{contact}</Text>
+            </View>
+          </Touch>
         </View>
         <View style={styles.container}>
           <View style={{flexDirection: 'row', flex: 1}}>

src/utils/agora.js

+import RtcEngine from 'react-native-agora';
+
+export const onTalkCall = async data => {
+  try {
+    if (!this.engine) {
+      //创建 RtcEngine 实例
+      this.engine = await RtcEngine.create(data.appid);
+    }
+    await this.engine.disableVideo(true); // 关闭视频模块
+    await this.engine.enableLocalAudio(false); //调用 enableLocalAudio(false) 关闭本地采集后，系统会走媒体音量
+    await this.engine.muteAllRemoteAudioStreams(false); //停止/恢复接收所有音频流。
+    await this.engine.setDefaultMuteAllRemoteAudioStreams(false); // 设置是否默认接收音频流
+    await this.engine.setDefaultMuteAllRemoteVideoStreams(true); // 设置是否默认接收视频流
+    await this.engine.disableVideo(); //关闭视频模块
+    await this.engine.setAudioProfile(4, 3); //设置音频编码配置
+    await this.engine.adjustPlaybackSignalVolume(400); //调节本地播放的所有远端用户音量
+    await this.engine.adjustAudioMixingPlayoutVolume(100); //调节音乐文件的本地播放音量
+    await this.engine.setDefaultAudioRoutetoSpeakerphone(true); //默认从外放（扬声器）出声
+    //监听
+    // this.engine.addListener('Warning', data => {
+    //   console.log('Warning' + data);
+    // });
+    // this.engine.addListener('Error', data => {
+    //   console.log('Error' + data);
+    // });
+    // this.engine.addListener('JoinChannelSuccess', data => {
+    //   console.warn('JoinChannelSuccess' + data);
+    // });
+    // this.engine.addListener('LeaveChannel', data => {
+    //   console.warn('LeaveChannel' + data);
+    // });
+    // this.engine.addListener('UserOffline', data => {
+    //   console.warn('UserOffline' + data);
+    // });
+    await this.engine.enableWebSdkInteroperability(true); //打开与webSDK的互通
+    await this.engine.setChannelProfile(0); //设置频道场景
+    await this.engine.setClientRole(1); //设置为主播角色
+    await this.engine.muteLocalAudioStream(true); //停止发送本地音频流
+    // 加入频道
+    await this.engine.joinChannel(data.token, data.channel, null, data.uid);
+    //判断当前是否扬声器
+    if (!(await this.engine.isSpeakerphoneEnabled())) {
+      await this.engine.setEnableSpeakerphone(true); //切换到外放
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const leaveTalkCall = async () => {
+  if (this.engine) {
+    await this.engine.leaveChannel();
+  }
+};
+
+export default {onTalkCall, leaveTalkCall};