修复

any-hooks/common/useAgoraClient.ts

@@ -12,7 +12,7 @@ export interface AgoraStreamItem {
 
 /** 基于声网sdk封装，由于多平台特性，请在应用根组件将对应平台的声网SDK对象以及appid通过useProvider提供; */
 export function useAgoraClient() {    
-  const [streamList, setStream]         = useState<AgoraStreamItem[]>([]);
+  const [streamList, setStream]    = useState<AgoraStreamItem[]>([]);
   const { appid, sdk }             = useInjector<AgoraAppStore>(AGORA_APP_SDK);
 
   let client : AgoraSdkClient;

any-hooks/communication/useCallCenter.ts

@@ -19,8 +19,8 @@ interface Caller extends UserData {
 export function useCallCenter() {  
 
   const { sendMsg, currentMsg } = useInjector(useNetSocketStore);
-  const { authData } = useInjector(useAuthData);
-  const [, changeCallingState] = useRequest('/updateUsersCallState', {auto: false}); 
+  const { authData }            = useInjector(useAuthData);
+  const [, changeCallingState]  = useRequest('/updateUsersCallState', {auto: false});
 
   let timer: NodeJS.Timeout;
   
@@ -29,7 +29,7 @@ export function useCallCenter() {
   const [myCallState, setCallState]     = useState<CallingState>('idle');
   const {currentChannel, isInChannel, setInChannel, createChannel, getTokenByChannel, updateMembers, clearChannel} = useInjector(useChannelStore);
   const callContact = (user: UserData) => {    
-    setTarget({...user, action: 'none', state: 'callin'}); //保存呼叫目标的信息    
+    setTarget({...user, action: 'none', state: 'callin'}); //保存呼叫目标的信息
     createChannel().then( data => {
       setCallState('callout'); //主动呼叫别人时将自己的呼叫状态更改为‘callout’
       sendMsg({
@@ -78,6 +78,7 @@ export function useCallCenter() {
           setCaller({      
             id: msg.fromID,
             nickname: msg.fromName,  
+            avatar: msg.msgData.avatar,
             action: msg.msgSubFlag,
             state: 'callout',
             channel: msg.channelID            
@@ -160,13 +161,18 @@ export function useCallCenter() {
 
   /** 监听呼叫状态，当状态变回free时，重置channel的信息,同时向服务器广播  */
   watch(myCallState, state => {
-    if(state === 'idle') {
-      clearChannel();
-    }     
+    if(state === 'idle') clearChannel();         
     const caller_state = target.value?.state || caller.value?.state;
     const userStates = [{userID: authData.value.id, callState: state }];
     if(caller_state) userStates.push({userID: target.value?.id || caller.value?.id, callState: caller_state});
-    changeCallingState({channel_id: currentChannel.value?.channel_id, userIDs: JSON.stringify(userStates)});
+    changeCallingState({channel_id: currentChannel.value?.channel_id, userIDs: JSON.stringify(userStates)})
+      .then(_ => {
+        sendMsg({
+          toID: '0',
+          msgMainFlag: 'NotifyUpdateUserList',
+          msgSubFlag: 'UpdateUserList'
+        })
+      });
   })
 
   return {

any-hooks/communication/useChannelStore.ts

@@ -24,7 +24,7 @@ export function useChannelStore() {
   }  
 
   const getTokenByChannel = (cid: string) => {   
-    return request({channel_id: cid}).then(_ => updateMembers());    
+    return request({channel_id: cid}).then(_ => updateMembers());
   }   
 
   const [members, requestMembers] = useRequest<any[]>('/getChannelUser', {auto: false})

any-hooks/communication/useVideoConference.ts

@@ -6,8 +6,8 @@ import { useChannelStore } from "./useChannelStore";
 
 /** 视频通讯中心，用于音视频聊天功能，可集成到会议中心模块（不推荐在页面组件中直接使用该hook模块） */
 export function useVideoConference() {
-  const { currentChannel, clearChannel }        = useInjector(useChannelStore);
-  const { authData }                            = useInjector(useAuthData);
+  const { currentChannel, clearChannel }     = useInjector(useChannelStore);
+  const { authData }                         = useInjector(useAuthData);
   const {
     joinChannelWithAgora, 
     leaveChannelWithAgora,     
@@ -26,6 +26,7 @@ export function useVideoConference() {
   })
 
   const join = () => {
+    // setInChannel(true);
     joinChannelWithAgora(
       currentChannel.value.agora_token,
       currentChannel.value.channel_id,

readme.md

@@ -19,4 +19,4 @@
 
 
 ### 注意事项：
-1. any-hooks的业务代码原计划同时用于小程序和web平台，但由于中途遇到sdk开发的需求，sdk的代码需要满足框架无关的场景，更具有通用性，故使得基于vue3的any-hooks代码可能不再具有可重用性。后续会考虑基于sdk代码重构web端。any-hooks的代码目前只用于小程序端，若后期可用于web端，应考虑将any-hook发布为npm包使用。
\ No newline at end of file
+1. any-hooks的业务代码原计划同时用于小程序和web平台，但由于中途遇到sdk开发的需求，sdk的代码需要满足框架无关的场景，更具有通用性，故使得基于vue3的any-hooks代码可能不再具有可重用性。后续会考虑基于sdk代码重构web端。any-hooks的代码目前只用于小程序端，若后期可用于web端，可虑将any-hook发布为npm包使用。
\ No newline at end of file

src/components/dynamic-view.vue

@@ -3,9 +3,9 @@
     <view class="key">{{data.field_name}}</view>
     <view class="value">{{field_text || data.field_value}}</view>
   </view>
-  <view class="photo">
+  <view class="photo" v-if="controlName==='photo-wall'">
     <view class="p-tt key">{{data.field_name}}</view>
-    <photo-wall :urls="photos" v-if="controlName==='photo-wall'"></photo-wall>
+    <photo-wall :urls="photos" ></photo-wall>
   </view>
   
 

src/pages/calling/index.vue

@@ -3,10 +3,13 @@
   import { useCallCenter } from 'any-hooks/communication/useCallCenter';  
   import { navigateBack } from '@tarojs/taro';
   import { watch } from '@vue/runtime-core';
+import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';
 
   const { target, caller, myCallState, answerCaller, hangup } = useInjector(useCallCenter);
+  const { leave } = useInjector(useMeetingCenter)
+  
   const onTapHangup = () => {
-    hangup();
+    myCallState.value == 'callin' ? hangup() : leave();
     navigateBack();
   }
 

src/pages/contact-detail/index.vue

 <script lang="ts" setup>
 import MeetingBar from '../../components/mini-meeting-bar.vue';
-import { getCurrentInstance } from '@tarojs/taro';
+import { getCurrentInstance, showToast } from '@tarojs/taro';
 import { onMounted } from '@vue/runtime-core';
 import { useCallCenter } from 'any-hooks/communication/useCallCenter';
 import { useContacts } from 'any-hooks/contacts/useContacts';
 import { UserData } from 'any-hooks/types/user';
 import { useInjector, useState } from 'vue-vulcan';
+import { useAppInitInfo } from 'src/hooks/common/useAppInitInfo';
 
 const { getContactById } = useInjector(useContacts);
-const { callContact }    = useInjector(useCallCenter);
+const { callContact, myCallState }    = useInjector(useCallCenter);
 const [currentContact, setContact] = useState<UserData>(null);
+const { checkCamearSetting }       = useInjector(useAppInitInfo);
 
 onMounted( () => {
   const ins = getCurrentInstance();
@@ -17,6 +19,17 @@ onMounted( () => {
   const current = getContactById(id, 'uid');
   setContact(current);
 })
+
+const onCall = (data: any) => {
+  if(myCallState.value !== 'idle') {
+    showToast({title: '您当前已在通话中，无法发起呼叫', icon: 'none'})
+  } else {
+    console.log('检查摄像头权限')
+    checkCamearSetting().then( r => {
+      r ? callContact(data) : showToast({title: '您未授权摄像头权限，请在设置中打开摄像头授权', icon: 'none'});
+    })      
+  }
+}
 </script>
 
 <template>
@@ -40,7 +53,7 @@ onMounted( () => {
       </view>
     </view>
 
-    <view class="call-btn" @tap="callContact(currentContact)" v-if="currentContact.is_signin==='1'">
+    <view class="call-btn" @tap="onCall(currentContact)" v-if="currentContact.is_signin==='1'">
       <image class="call-icon" src="../../assets/call-small2x.png"></image>
       &nbsp;&nbsp;
       <text>视频通话</text>

src/pages/index/contacts-list.vue

@@ -25,7 +25,7 @@
         checkCamearSetting().then( r => {
           r ? callContact(data) : showToast({title: '您未授权摄像头权限，请在设置中打开摄像头授权', icon: 'none'});
         })      
-      }    
+      }
     },
     500
   ) 

src/pages/meeting/index.vue

@@ -9,17 +9,13 @@
   import Invite from './invite.vue';
   import { useCallCenter } from 'any-hooks/communication/useCallCenter';
   import { UserData } from 'any-hooks/types/user';
-  import { useChannelStore } from 'any-hooks/communication/useChannelStore';
-import { onMounted } from 'vue';
-  
+  // import { useChannelStore } from 'any-hooks/communication/useChannelStore';
+
   const { target } = useInjector(useCallCenter);  
-  const { currentChannel } = useInjector(useChannelStore);
+  // const { currentChannel, isInChannel } = useInjector(useChannelStore);  
   const { streamList, localPushurl, voiceMute, mode, switchLocalMicState, switchVideoOrAudio, leave } = useInjector(useMeetingCenter);  
   const { rect } = useAppInitInfo(); 
 
-  onMounted(() => {
-    // join();
-  })
   
   /* 监听流的数量，自动退出会议 */
   watch(streamList, (current, last) => {

src/pages/meeting/invite.vue

 <script lang="ts" setup>  
   import { useAuthData } from "any-hooks/auth/useAuthData";
+import { useCallCenter } from "any-hooks/communication/useCallCenter";
   import { useContacts } from "any-hooks/contacts/useContacts";
   import { UserData } from "any-hooks/types/user";
   import { useAppInitInfo } from "src/hooks/common/useAppInitInfo";
@@ -8,7 +9,8 @@
 
   const { topDistance } = useAppInitInfo();
 
-  const {authData} = useInjector(useAuthData)
+  const {authData} = useInjector(useAuthData);
+  const { caller, target } = useInjector(useCallCenter)
 
   /* 获取在线且空闲的联系人 */
   const { freeContacts, freeList,  } = useInjector(useContacts);  
@@ -34,13 +36,13 @@
       <view class="role-name pd-2" :class="{hide: hideConfig[index]}" @tap="toggleHideByIndex(index)">{{key}}</view>
       <view class="white-box" :style="{display: hideConfig[index] ? 'none' : 'block'}">        
         <view v-for="(item, i) in group" :key="i" >
-          <view class="contact-item" v-if="authData.id !== item.id">
+          <view class="contact-item" v-if="![authData.id, caller?.id, target?.id ].includes(item?.id)">
             <image class="avatar" :src="item.avatar" />
             <view class="info">
               <view>{{item.nickname}}</view>
               <text style="color:#999">{{item.group_name}}</text>              
             </view>
-            <button class="call invite-btn" @tap.stop="onChoose(item)">邀请</button> 
+            <view class="call invite-btn" @tap.stop="onChoose(item)">邀请</view> 
           </view>                   
         </view>
       </view>      
@@ -85,11 +87,10 @@
       }
                
       .contact-item{
-        margin-bottom: 65px;
-        // padding: 25px 0;
-        // border-bottom: 1px solid #f8f8f8;
+        margin-bottom: 65px;        
         display: flex;
         align-items: center;
+        padding: 15px 0;
         &:last-child{
           margin-bottom: 15px;
         }
@@ -107,7 +108,8 @@
           display: inline-block;
           background: #2b91e2;
           color: #fff;
-          padding: 0px 15px;
+          padding: 10px 25px;
+          border-radius: 5px;
         } 
       }                 
     }