live.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. import { Message } from 'element-ui';
  2. import { rtc, publishStream, createLocalStream } from '@/views/live/common';
  3. export {
  4. initSDK,
  5. downloadWebSDK,
  6. createScript,
  7. getLiveStat,
  8. roomUpdate,
  9. sendMsg,
  10. drawChange,
  11. getDevice,
  12. publishStream,
  13. handsDown,
  14. sendPublishMessage,
  15. closeVideo
  16. } from '@/views/live/common';
  17. /**
  18. * 初始化监听事件
  19. */
  20. export function initListener(vue) {
  21. rtc.on('login_success', data => {
  22. console.log('登录成功', data);
  23. Message({
  24. message: '登录成功',
  25. type: 'success'
  26. });
  27. vue.roomData = data;
  28. // 初始化画板需要的数据
  29. let canvasInitData = {
  30. allowDraw: true, // 是否具有书写画笔权限(讲师权限) true / false
  31. id: 'draw-parent',
  32. pptDisplay: 1, // 文档展示方式。默认0,按窗口 1,按宽度
  33. liveId: data.live.status === 1 ? data.live.id : '' // 如果直播已经开始,需将直播 id 传入 sdk 中
  34. };
  35. // 初始化画板
  36. rtc.canvasInit(canvasInitData);
  37. });
  38. rtc.on('login_failed', data => {
  39. console.log('登录失败', data);
  40. Message({
  41. message: '登录失败:' + JSON.stringify(data),
  42. type: 'warning'
  43. });
  44. });
  45. // 教师 必须在加入房间成功的事件回调里创建本地流
  46. rtc.on('conference_join', () => {
  47. console.log('加入房间成功');
  48. createLocalStream();
  49. });
  50. rtc.on('conference_join_failed', err => {
  51. // 加入房间失败 err为错误原因
  52. console.log('加入房间失败', err);
  53. });
  54. // 新增订阅流事件
  55. rtc.on('allow_sub', function (stream) {
  56. if (stream.isMixed()) {
  57. console.log('是混合流,不订阅');
  58. } else {
  59. // 订阅远程流
  60. rtc.trySubscribeStream({
  61. tryStream: stream,
  62. success: function (stream) {
  63. // 订阅流成功
  64. let streamType = stream.streamType();
  65. vue.remoteStreamType = streamType;
  66. // let hasVideo = stream.hasVideo();
  67. console.log('订阅流成功', streamType);
  68. let id = streamType === 0 ? 'live' : 'student';
  69. stream.show(id, 'contain'); // 将流显示到指定 id 的盒子中
  70. if (streamType === 1 || streamType === 10) {
  71. vue.connect = true;
  72. vue.callLoading = false;
  73. }
  74. },
  75. fail: function (err) {
  76. console.log('订阅流失败', err);
  77. }
  78. });
  79. }
  80. });
  81. // 直播未开始,不能推流
  82. rtc.on('not_live', function () {
  83. console.log('直播未开始,不能推流');
  84. Message({
  85. message: '直播未开始,不能推流',
  86. type: 'warning'
  87. });
  88. });
  89. // 推流前查询直播状态失败,导致没有推流
  90. rtc.on('local_stream_publish_failed', function () {
  91. console.log('推流前查询直播状态失败,导致没有推流');
  92. Message({
  93. message: '推流前查询直播状态失败,导致没有推流',
  94. type: 'warning'
  95. });
  96. });
  97. // 房间全量信息事件(人员进出时广播)
  98. rtc.on('room_context', roomData => {
  99. vue.roomContext = JSON.parse(roomData);
  100. vue.getLiveRoomStudentList();
  101. console.log('房间全量信息事件(人员进出时广播)', JSON.parse(roomData));
  102. });
  103. rtc.on('publish_stream', str => {
  104. console.log('直播已开启', str);
  105. vue.liveStat = true;
  106. });
  107. rtc.on('end_stream', str => {
  108. console.log('直播已关闭', str);
  109. vue.liveStat = false;
  110. });
  111. rtc.on('switch_user_settings', settingData => {
  112. // 单个用户配置监听
  113. console.log(settingData);
  114. });
  115. // 人员列表事件(人员麦序变化时广播)
  116. rtc.on('speak_context', speakData => {
  117. vue.speakData = JSON.parse(speakData);
  118. console.log('人员列表事件(人员麦序变化时广播)', JSON.parse(speakData));
  119. });
  120. rtc.on('switch_settings', data => {
  121. console.log('房间设置事件', data); // 房间设置事件
  122. });
  123. rtc.on('publishStreamErr', data => {
  124. console.log('推流意外终止:' + data.streamName);
  125. // 直播开启状态下,尝试重推这条流
  126. });
  127. // 视频无法自动播放
  128. rtc.on('playError', data => {
  129. console.log('视频无法自动播放', data);
  130. });
  131. // 监听通知移除流事件
  132. rtc.on('stream_removed', function (stream) {
  133. console.log('监听通知移除流事件');
  134. vue.connect = false;
  135. vue.remoteStreamType = -1;
  136. });
  137. // 停止订阅流
  138. rtc.on('unSub', function (stream) {
  139. console.log('停止订阅流', stream);
  140. rtc.unSubscribeStream({
  141. unSubStream: stream,
  142. success: function (stream) {
  143. console.log('取消订阅流成功', stream.id());
  144. },
  145. fail: function (str) {
  146. console.log(str);
  147. }
  148. });
  149. });
  150. // 用户退出房间通知其他人员事件
  151. rtc.on('exit_room_user', function (data) {
  152. console.log('用户退出房间通知其他人员事件', data);
  153. vue.studentExitLiveRoom(data.id);
  154. });
  155. /**
  156. * 排麦监听事件
  157. */
  158. // 监听自己被邀请事件
  159. rtc.on('inviteUp', uid => {
  160. console.log('监听自己被邀请事件', uid);
  161. rtc.inviteAccept({
  162. success: function (str) {
  163. console.log('接受邀请成功', str);
  164. },
  165. fail: function (data) {
  166. console.log('接受邀请失败', data);
  167. }
  168. });
  169. });
  170. /**
  171. * 监听聊天事件
  172. */
  173. rtc.on('chat_message', data => {
  174. let dat = JSON.parse(data);
  175. console.log(dat);
  176. // 敏感词过滤:如果发送的聊天消息被系统判定包含敏感词,则只有发送者能收到本条消息,房间内其他人都不会收到这条聊天消息。
  177. // 如果返回消息中有 isFilterChat 字段(消息不包含敏感词返回数据中无isFilterChat字段),且isFilterChat的值为1,则说明该消息包含敏感字,除发送者外其他人不会收到这条消息。
  178. if (dat.isFilterChat && dat.isFilterChat === 1) {
  179. return;
  180. }
  181. vue.chatList.push(dat);
  182. });
  183. rtc.on('allowChatChange', function (data) {
  184. let msg = data.settings.allow_chat ? '开言' : '禁言';
  185. Message({
  186. type: 'success',
  187. message: `全体${msg}成功`
  188. });
  189. });
  190. }
  191. /**
  192. * 开启直播
  193. */
  194. export function startLive() {
  195. rtc.startLive({
  196. success(data) {
  197. console.log(data);
  198. publishStream('main'); // 如果需要立即推流,执行 publish 方法
  199. Message({
  200. message: '开启直播成功',
  201. type: 'success'
  202. });
  203. },
  204. fail(data) {
  205. Message({
  206. message: `开启直播失败:${data}`,
  207. type: 'warning'
  208. });
  209. }
  210. });
  211. }
  212. /**
  213. * 结束直播
  214. */
  215. export function stopLive() {
  216. rtc.stopLive({
  217. success() {
  218. Message({
  219. type: 'success',
  220. message: '直播已结束'
  221. });
  222. },
  223. fail(data) {
  224. Message({
  225. type: 'error',
  226. message: '结束直播失败:' + JSON.stringify(data)
  227. });
  228. }
  229. });
  230. }
  231. /**
  232. * 推送桌面共享
  233. */
  234. export function publishShareStream() {
  235. rtc.publishShareStream({
  236. success: function (stream) {
  237. console.log('推送桌面共享成功', stream);
  238. },
  239. fail: function (str) {
  240. console.log(str);
  241. }
  242. });
  243. }
  244. /**
  245. * 关闭桌面共享
  246. */
  247. export function unPubShareStream() {
  248. rtc.unPubShareStream();
  249. }
  250. /**
  251. * 开启、结束、暂停、恢复录制
  252. * @param { String } status: 'start' 开启, 'end' 结束, 'pause' 暂停, 'resume' 恢复
  253. */
  254. export function liveRecord(status) {
  255. rtc.liveRecord({
  256. status: status,
  257. success: function (data) {
  258. console.log('成功', data);
  259. },
  260. fail: function (str) {
  261. console.log(str);
  262. }
  263. });
  264. }
  265. // 连麦
  266. /**
  267. * 老师端发起邀请,邀请学生上麦。(举手模式)
  268. * @param {Object} object
  269. */
  270. export function invite(object) {
  271. rtc.invite(object);
  272. }