group.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. import { Message } from 'element-ui';
  2. import { rtc, publishStream, closeVideo, createData, getHistory } from '@/views/live/common';
  3. export {
  4. initSDK,
  5. sendMsg,
  6. getLiveStat,
  7. createScript,
  8. downloadWebSDK,
  9. closeVideo,
  10. handsDown,
  11. chatRoll,
  12. pauseAudio,
  13. playAudio,
  14. pauseVideo,
  15. playVideo
  16. } from '@/views/live/common';
  17. import i18n from '@/locales/i18n';
  18. /**
  19. * 取消订阅远程流
  20. */
  21. export function unSubscribeStream(unSubStream) {
  22. rtc.unSubscribeStream({
  23. unSubStream,
  24. success(str) {
  25. console.log('取消订阅流成功', str);
  26. },
  27. fail(str) {
  28. console.log(str);
  29. }
  30. });
  31. }
  32. function createLocalStream(vue) {
  33. rtc.createLocalStream({
  34. streamName: 'picture',
  35. createData: createData(),
  36. success(stream) {
  37. vue.localStream = true;
  38. console.log('创建本地流成功', stream);
  39. vue.hasVideo = stream.hasVideo;
  40. vue.hasAudio = stream.hasAudio;
  41. // 创建本地流成功,将流展示到id为 student 的dom元素盒子中
  42. stream.show('group-local');
  43. publishStream('picture'); // 如果需要立即推流,执行 publish 方法
  44. },
  45. fail(data) {
  46. vue.localStream = false;
  47. console.log('创建本地流失败,应用层处理', data);
  48. // 创建本地流失败,应用层处理
  49. Message({
  50. type: 'error',
  51. message: `${i18n.t('Key441')}:${data}`
  52. });
  53. }
  54. });
  55. }
  56. /**
  57. * 初始化监听事件
  58. */
  59. export function initListener(vue) {
  60. rtc.on('login_success', data => {
  61. console.log('登录成功', data);
  62. Message({
  63. message: i18n.t('Key442'),
  64. type: 'success'
  65. });
  66. });
  67. rtc.on('login_failed', data => {
  68. console.log('登录失败', data);
  69. Message({
  70. message: `${i18n.t('Key443')}:${JSON.stringify(data)}`,
  71. type: 'warning'
  72. });
  73. });
  74. // 教师 必须在加入房间成功的事件回调里创建本地流
  75. rtc.on('conference_join', () => {
  76. console.log('加入房间成功');
  77. getHistory({
  78. success(data) {
  79. const chatLog = data.datas.meta.chatLog.map(({ content, userName }) => {
  80. return { msg: content, username: userName };
  81. });
  82. vue.chatList = chatLog;
  83. },
  84. fail(str) {
  85. console.log(str);
  86. }
  87. });
  88. if (vue.studentSelf.is_teacher_role_in_room === 'false') {
  89. rtc.handsUp({
  90. success: str => {
  91. console.log('举手成功', str);
  92. console.log('创建本地流推流');
  93. createLocalStream(vue);
  94. },
  95. fail: data => {
  96. console.log('举手失败', data);
  97. }
  98. });
  99. } else {
  100. createLocalStream(vue);
  101. }
  102. });
  103. rtc.on('conference_join_failed', err => {
  104. // 加入房间失败 err为错误原因
  105. console.log('加入房间失败', err);
  106. });
  107. // 新增订阅流事件
  108. rtc.on('allow_sub', stream => {
  109. console.log('新增订阅流事件');
  110. if (stream.isMixed()) {
  111. console.log('是混合流,不订阅');
  112. } else {
  113. // 订阅远程流
  114. rtc.trySubscribeStream({
  115. tryStream: stream,
  116. success: stream => {
  117. // 订阅流成功
  118. const streamType = stream.streamType();
  119. console.log('订阅流成功', streamType);
  120. if (streamType === 10) {
  121. vue.streamList.push(stream);
  122. }
  123. if (streamType === 0) {
  124. stream.show('live', 'contain'); // 将流显示到指定 id 的元素中
  125. vue.is_teacher_in_group = true;
  126. }
  127. },
  128. fail(err) {
  129. console.log('订阅流失败', err);
  130. }
  131. });
  132. }
  133. });
  134. // 推流前查询直播状态失败,导致没有推流
  135. rtc.on('local_stream_publish_failed', () => {
  136. console.log('推流前查询直播状态失败,导致没有推流');
  137. Message({
  138. message: i18n.t('Key403'),
  139. type: 'warning'
  140. });
  141. });
  142. // 房间全量信息事件(人员进出时广播)
  143. rtc.on('room_context', roomData => {
  144. vue.roomContext = JSON.parse(roomData);
  145. console.log('房间全量信息事件(人员进出时广播)', JSON.parse(roomData));
  146. });
  147. rtc.on('publish_stream', str => {
  148. console.log('直播已开启', str);
  149. Message({
  150. type: 'success',
  151. message: i18n.t('Key456')
  152. });
  153. vue.liveStat = true;
  154. });
  155. rtc.on('end_stream', str => {
  156. console.log('分组讨论已关闭', str);
  157. Message({
  158. type: 'success',
  159. message: i18n.t('Key457')
  160. });
  161. vue.liveStat = false;
  162. });
  163. // 单个用户配置监听
  164. rtc.on('switch_user_settings', settingData => {
  165. console.log('单个用户配置监听', JSON.parse(settingData));
  166. });
  167. // 人员列表事件(人员麦序变化时广播)
  168. rtc.on('speak_context', speakData => {
  169. vue.speakData = JSON.parse(speakData);
  170. console.log('人员列表事件(人员麦序变化时广播)', JSON.parse(speakData));
  171. });
  172. rtc.on('switch_settings', data => {
  173. console.log('房间设置事件', JSON.parse(data)); // 房间设置事件
  174. });
  175. rtc.on('publishStreamErr', data => {
  176. console.log(`推流意外终止:${data.streamName}`);
  177. // 直播开启状态下,尝试重推这条流
  178. });
  179. rtc.on('kick_out', () => {
  180. console.log('自己被踢出房间');
  181. });
  182. // 视频无法自动播放
  183. rtc.on('playError', data => {
  184. console.log('视频无法自动播放', data);
  185. });
  186. // 监听通知移除流事件
  187. rtc.on('stream_removed', stream => {
  188. console.log('监听通知移除流事件');
  189. if (stream.streamType() === 0) {
  190. vue.is_teacher_in_group = false;
  191. }
  192. const num = vue.streamList.findIndex(el => el.id() === stream.id());
  193. if (num !== -1) {
  194. vue.streamList.splice(num, 1);
  195. }
  196. });
  197. // 停止订阅流
  198. rtc.on('unSub', stream => {
  199. console.log('停止订阅流');
  200. unSubscribeStream(stream);
  201. });
  202. /**
  203. * 排麦监听事件
  204. */
  205. // 监听自己被邀请事件
  206. rtc.on('inviteUp', uid => {
  207. console.log('监听自己被邀请事件', uid);
  208. });
  209. rtc.on('mcDown', () => {
  210. closeVideo('picture');
  211. });
  212. rtc.on('videoModeChange', data => {
  213. console.log('连麦音视频模式更新成功监听回调', data.settings.video_mode);
  214. vue.roomInfo.video_mode = data.settings.video_mode;
  215. });
  216. rtc.on('createLocalStream', () => {
  217. console.log('创建本地流推流');
  218. });
  219. /**
  220. * 监听聊天事件
  221. */
  222. rtc.on('chat_message', data => {
  223. const dat = JSON.parse(data);
  224. // 敏感词过滤:如果发送的聊天消息被系统判定包含敏感词,则只有发送者能收到本条消息,房间内其他人都不会收到这条聊天消息。
  225. // 如果返回消息中有 isFilterChat 字段(消息不包含敏感词返回数据中无isFilterChat字段),且isFilterChat的值为1,则说明该消息包含敏感字,除发送者外其他人不会收到这条消息。
  226. if (dat.isFilterChat && dat.isFilterChat === 1) {
  227. return;
  228. }
  229. vue.chatList.push(dat);
  230. });
  231. }