rtc.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. import { defineStore } from 'pinia';
  2. import consola from 'consola';
  3. import { genTestUserSig } from '/@/utils/generateTestUserSig';
  4. import type { RemoteStream } from 'trtc-js-sdk';
  5. import sortBy from 'lodash-es/sortBy';
  6. interface RtcState {
  7. socket: Nullable<SocketIOClient.Socket>;
  8. socketId: string;
  9. showDaoGou: boolean;
  10. sdkAppId: string;
  11. userId: string;
  12. roomId: string;
  13. role: 'leader' | 'customer';
  14. secretKey: string;
  15. userSig: string;
  16. audioDeviceId: string;
  17. videoDeviceId: string;
  18. cameraList: MediaDeviceInfo[];
  19. microphoneList: MediaDeviceInfo[];
  20. logs: any[];
  21. isJoined: boolean;
  22. isPublished: boolean;
  23. isShared: boolean;
  24. remoteStreams: RemoteStream[];
  25. // invitedRemoteStreams: any[],
  26. avatar: Nullable<string>;
  27. nickname: string;
  28. mode: string;
  29. chatList: ChatContentType[];
  30. memberList: UserInfoType[];
  31. audioMuted: boolean;
  32. inputStatus: boolean;
  33. currentSession: Nullable<UserInfoType>;
  34. }
  35. interface DeviceListParams {
  36. cameraItems: MediaDeviceInfo[];
  37. microphoneItems: MediaDeviceInfo[];
  38. }
  39. export interface ChatContentType {
  40. role: RoleType;
  41. mode: string;
  42. Nickname: Nullable<string>;
  43. UserId: string;
  44. text: string;
  45. }
  46. export interface UserInfoType {
  47. Avatar: string;
  48. Id: string;
  49. InTime: string;
  50. IsClient: boolean;
  51. IsMuted: boolean;
  52. IsWords: boolean;
  53. JoinTime: string;
  54. Nickname: string;
  55. Role: RoleType;
  56. RoomId: string;
  57. UserId: string;
  58. text?: string;
  59. order: number;
  60. }
  61. export type RoleType = 'leader' | 'customer';
  62. export interface SocketParams {
  63. userId: string;
  64. roomId: string;
  65. role: RoleType;
  66. avatar: string;
  67. nickname: string;
  68. mode: string;
  69. }
  70. export const useRtcStore = defineStore({
  71. id: 'rtc',
  72. state: (): RtcState => ({
  73. socket: null,
  74. socketId: '',
  75. showDaoGou: false,
  76. sdkAppId: '1400685498',
  77. nickname: '',
  78. userId: '',
  79. roomId: '',
  80. role: 'customer',
  81. secretKey: '7500f8938c46c5d3c64621ae7826905eec9723bf218fbcf121242e056a4ee14f',
  82. userSig:
  83. 'eJwtzcsOgjAQBdB-6RaDU2jLI3EhsrHRBdGNK2Po0IyvNAWJxvjvEmA5597c*bLj7hD26FnOohDYYrzJ4LOjhkZ*tejPd7wY9EJwnsV8brXmdnGODMu5AEggExBNSUcPHFQpnkopIJkU34784ApECjBvkB1e8MLJfWyLOAis06Wut4b0tVdL77RVTb35dGXby6o6rVfs9wdhLDRy',
  84. audioDeviceId: '',
  85. videoDeviceId: '',
  86. cameraList: [],
  87. microphoneList: [],
  88. logs: [],
  89. isJoined: false,
  90. isPublished: false,
  91. isShared: false,
  92. remoteStreams: [],
  93. // invitedRemoteStreams: [],
  94. avatar: null,
  95. mode: '',
  96. chatList: [],
  97. memberList: [],
  98. audioMuted: true,
  99. inputStatus: true,
  100. currentSession: null,
  101. }),
  102. persist: {
  103. storage: localStorage,
  104. paths: ['memberList'],
  105. },
  106. getters: {
  107. checkUserInMemberList() {
  108. return (userId: string) => this.memberList.find((item) => item.UserId === userId);
  109. },
  110. isLeader(): boolean {
  111. return this.role === 'leader';
  112. },
  113. isMe() {
  114. return (userId: string) => this.userId === userId;
  115. },
  116. genUserSig() {
  117. const { userSig } = genTestUserSig({
  118. sdkAppId: parseInt(this.sdkAppId, 10),
  119. userId: this.userId,
  120. secretKey: this.secretKey,
  121. });
  122. return userSig;
  123. },
  124. isUserInRemoteStream() {
  125. return (userId: string) => {
  126. return this.remoteStreams.some((item) => item.getUserId() === userId);
  127. };
  128. },
  129. },
  130. actions: {
  131. setSocketParams(params: SocketParams): void {
  132. this.avatar = params.avatar;
  133. this.roomId = params.roomId;
  134. this.userId = params.userId;
  135. this.nickname = params.nickname;
  136. this.role = params.role;
  137. if (!['leader', 'customer'].includes(params.role)) {
  138. consola.info({
  139. message: '角色参数有误',
  140. level: 0,
  141. tag: 'role',
  142. });
  143. this.role = 'customer';
  144. }
  145. },
  146. setNickName(nickname: string) {
  147. this.nickname = nickname;
  148. },
  149. setAvatar(payload: string) {
  150. this.avatar = payload;
  151. localStorage.setItem('leaderAvatar', payload || '');
  152. },
  153. setSocket(payload: SocketIOClient.Socket) {
  154. this.socket = payload;
  155. },
  156. setShowDaoGou(payload: boolean) {
  157. this.showDaoGou = payload;
  158. },
  159. setUserId(payload: string) {
  160. this.userId = payload;
  161. },
  162. setRoomId(payload: string) {
  163. this.roomId = payload;
  164. },
  165. setRole(payload: RoleType) {
  166. this.role = payload;
  167. },
  168. setDeviceList(payload: DeviceListParams) {
  169. this.cameraList = payload.cameraItems;
  170. this.microphoneList = payload.microphoneItems;
  171. },
  172. setVideoDeviceId(payload: string) {
  173. this.videoDeviceId = payload;
  174. },
  175. setAudioDeviceId(payload: string) {
  176. this.audioDeviceId = payload;
  177. },
  178. setIsJoined(payload: boolean) {
  179. this.isJoined = payload;
  180. },
  181. setIsPublished(payload: boolean) {
  182. this.isPublished = payload;
  183. },
  184. addToChatList(content: ChatContentType) {
  185. this.chatList.push(content);
  186. },
  187. setMemberList(members: UserInfoType[]) {
  188. const memberList = members.reduce((prev: UserInfoType[], current: UserInfoType, index) => {
  189. if (prev.findIndex((ele: UserInfoType) => ele.UserId === current.UserId) === -1) {
  190. // console.log(current);
  191. current.order = index > 1 ? index : 2;
  192. if (current.Role === 'leader') {
  193. current.order = 0;
  194. }
  195. if (current.UserId === this.userId) {
  196. current.order = 1;
  197. this.currentSession = current;
  198. }
  199. prev.push(current);
  200. }
  201. return prev;
  202. }, []);
  203. const sortList = sortBy(memberList, ['order', 'UserId'], ['asc', 'asc']);
  204. console.log('sortList', sortList);
  205. this.memberList = sortList;
  206. },
  207. clearMemberList(): void {
  208. this.memberList = [];
  209. },
  210. updateMemberDatabyId(UserId: string, data: Partial<UserInfoType>) {
  211. const updateIndex = this.memberList.findIndex((member) => member.UserId === UserId);
  212. if (updateIndex > -1) {
  213. this.memberList[updateIndex] = Object.assign({}, this.memberList[updateIndex], data);
  214. //单点更新并是当事人也更一份数据
  215. if (UserId === this.userId) {
  216. this.currentSession = this.memberList[updateIndex];
  217. }
  218. }
  219. },
  220. mute() {
  221. this.setMute(false);
  222. },
  223. unmute() {
  224. this.setMute(true);
  225. },
  226. setMute(mute: boolean) {
  227. this.audioMuted = mute;
  228. this.updateMemberDatabyId(this.userId, {
  229. IsMuted: mute,
  230. });
  231. },
  232. setinputStatus(status: boolean) {
  233. this.inputStatus = status;
  234. },
  235. pushRemoteStreams(stream: RemoteStream) {
  236. this.remoteStreams.push(stream);
  237. },
  238. removeRemoteStreams(id: string) {
  239. const existStreamIndex = this.remoteStreams.findIndex((stream) => stream.getId() === id);
  240. if (existStreamIndex > -1) {
  241. this.remoteStreams.splice(existStreamIndex, 1);
  242. }
  243. },
  244. },
  245. });