live.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. import { Message } from 'element-ui';
  2. import store from '@/store';
  3. import { rtc, updateMcResult, getDevice, createData, getHistory } from '@/views/live/common';
  4. export {
  5. initSDK,
  6. downloadWebSDK,
  7. createScript,
  8. getLiveStat,
  9. roomUpdate,
  10. sendMsg,
  11. drawChange,
  12. publishStream,
  13. handsDown,
  14. sendPublishMessage,
  15. closeVideo,
  16. chatRoll,
  17. updateMcResult,
  18. reconnection,
  19. getNetPoint,
  20. pauseAudio,
  21. playAudio,
  22. pauseVideo,
  23. playVideo
  24. } from '@/views/live/common';
  25. import i18n from '@/locales/i18n';
  26. /**
  27. * 推送本地流
  28. */
  29. function publishStream(streamName) {
  30. rtc.publish({
  31. streamName,
  32. // 推流成功,更新上麦结果
  33. success: stream => {
  34. console.log('推流成功', stream);
  35. updateMcResult(stream.id(), 1);
  36. },
  37. fail: str => {
  38. // 推流失败,更新上麦结果
  39. console.log('推流失败,更新上麦结果', str);
  40. updateMcResult('', 0);
  41. }
  42. });
  43. }
  44. /**
  45. * 创建本地流
  46. */
  47. export function createLocalStream(vue) {
  48. rtc.createLocalStream({
  49. streamName: 'main',
  50. createData: createData(),
  51. success(stream) {
  52. console.log('创建本地流成功', stream);
  53. vue.hasAudio = stream.hasAudio();
  54. vue.hasVideo = stream.hasVideo();
  55. // 创建本地流成功,将流展示到id为 live 的 dom 元素盒子中
  56. stream.show('live');
  57. publishStream('main'); // 如果需要立即推流,执行 publish 方法
  58. },
  59. fail(data) {
  60. console.log('创建本地流失败:', data);
  61. // 创建本地流失败,应用层处理
  62. Message({
  63. type: 'error',
  64. message: `${i18n.t('Key441')}:${data.err}`
  65. });
  66. }
  67. });
  68. }
  69. /**
  70. * 结束本地流
  71. */
  72. export function closeVideoTeacher(options) {
  73. rtc.closeVideo(options);
  74. }
  75. /**
  76. * 初始化监听事件
  77. */
  78. export function initListener(vue) {
  79. rtc.on('login_success', data => {
  80. console.log('登录成功', data);
  81. vue.roomData = data;
  82. // 初始化画板需要的数据
  83. const canvasInitData = {
  84. allowDraw: true, // 是否具有书写画笔权限(讲师权限) true / false
  85. id: 'draw-parent',
  86. pptDisplay: 1, // 文档展示方式。默认0,按窗口 1,按宽度
  87. liveId: data.live.status === 1 ? data.live.id : '' // 如果直播已经开始,需将直播 id 传入 sdk 中
  88. };
  89. // 初始化画板
  90. rtc.canvasInit(canvasInitData);
  91. });
  92. rtc.on('login_failed', data => {
  93. console.log('登录失败', data);
  94. Message({
  95. message: `${i18n.t('Key443')}:${JSON.stringify(data)}`,
  96. type: 'warning'
  97. });
  98. });
  99. // 教师 必须在加入房间成功的事件回调里创建本地流
  100. rtc.on('conference_join', () => {
  101. console.log('加入房间成功');
  102. getHistory({
  103. success(data) {
  104. const chatLog = data.datas.meta.chatLog.map(({ content, userName }) => {
  105. return { msg: content, username: userName };
  106. });
  107. vue.chatList = chatLog;
  108. },
  109. fail(str) {
  110. console.log(str);
  111. }
  112. });
  113. getDevice({
  114. success(data) {
  115. console.log('获取音视频设备成功', data);
  116. const device = store.state.app.liveDevice;
  117. vue.device = data;
  118. if (data.video.length === 0 && data.audio.length === 0) {
  119. Message({
  120. type: 'warning',
  121. message: i18n.t('Key444')
  122. });
  123. }
  124. const isVideo = device.video.length > 0 && data.video.some(item => item.deviceId === device.video);
  125. const isAudio = device.audio.length > 0 && data.audio.some(item => item.deviceId === device.audio);
  126. if (!isVideo && !isAudio) {
  127. vue.setDevice(false);
  128. } else {
  129. createLocalStream(vue);
  130. }
  131. },
  132. fail(str) {
  133. console.log('直播关闭状态或查询直播失败: ', str);
  134. Message({
  135. type: 'error',
  136. message: `${i18n.t('Key445')}: ${str}`
  137. });
  138. }
  139. });
  140. });
  141. rtc.on('conference_join_failed', err => {
  142. // 加入房间失败 err为错误原因
  143. console.log('加入房间失败', err);
  144. Message({
  145. message: `${i18n.t('Key446')}:${err}`,
  146. type: 'warning'
  147. });
  148. });
  149. // 新增订阅流事件
  150. rtc.on('allow_sub', tryStream => {
  151. if (tryStream.isMixed()) {
  152. console.log('是混合流,不订阅');
  153. } else {
  154. // 订阅远程流
  155. rtc.trySubscribeStream({
  156. tryStream,
  157. success(stream) {
  158. // 订阅流成功
  159. const streamType = stream.streamType();
  160. vue.remoteStreamType = streamType;
  161. console.log('订阅流成功', streamType);
  162. stream.show('student', 'contain'); // 将流显示到指定 id 的盒子中
  163. if (streamType === 1 || streamType === 10) {
  164. vue.connect = true;
  165. vue.callLoading = false;
  166. }
  167. if (streamType === 10) {
  168. vue.dealStudentConnection(vue.connectUid, 2, vue.roomInfo.video_mode);
  169. }
  170. },
  171. fail(err) {
  172. console.log('订阅流失败', err);
  173. }
  174. });
  175. }
  176. });
  177. // 直播未开始,不能推流
  178. rtc.on('not_live', () => {
  179. console.log('直播未开始,不能推流');
  180. Message({
  181. message: i18n.t('Key402'),
  182. type: 'warning'
  183. });
  184. });
  185. // 推流前查询直播状态失败,导致没有推流
  186. rtc.on('local_stream_publish_failed', () => {
  187. console.log('推流前查询直播状态失败,导致没有推流');
  188. Message({
  189. message: i18n.t('Key403'),
  190. type: 'warning'
  191. });
  192. });
  193. // 房间全量信息事件(人员进出时广播)
  194. rtc.on('room_context', roomData => {
  195. vue.roomContext = JSON.parse(roomData);
  196. vue.getLiveRoomData_DRTD();
  197. console.log('房间全量信息事件(人员进出时广播)', JSON.parse(roomData));
  198. });
  199. rtc.on('publish_stream', str => {
  200. console.log('直播已开启', str);
  201. vue.liveStat = true;
  202. });
  203. rtc.on('end_stream', str => {
  204. console.log('直播已关闭', str);
  205. vue.liveStat = false;
  206. });
  207. rtc.on('switch_user_settings', settingData => {
  208. // 单个用户配置监听
  209. console.log(settingData);
  210. });
  211. // 人员列表事件(人员麦序变化时广播)
  212. rtc.on('speak_context', speakData => {
  213. vue.speakData = JSON.parse(speakData);
  214. console.log('人员列表事件(人员麦序变化时广播)', JSON.parse(speakData));
  215. });
  216. rtc.on('switch_settings', data => {
  217. console.log('房间设置事件', data); // 房间设置事件
  218. });
  219. // 网络整体状态事件
  220. rtc.on('netStatus', data => {
  221. vue.netStatus = data.netStatus;
  222. });
  223. // 单条流状态通知事件
  224. rtc.on('streamStatus', data => {
  225. console.log(data);
  226. });
  227. // 推流异常断开事件
  228. rtc.on('publishStreamErr', data => {
  229. // 直播开启状态下,尝试重推这条流
  230. console.log(`推流意外终止:${data.streamName}`);
  231. publishStream('main');
  232. });
  233. // 视频无法自动播放
  234. rtc.on('playError', data => {
  235. console.log('视频无法自动播放', data);
  236. });
  237. // 监听通知移除流事件
  238. rtc.on('stream_removed', stream => {
  239. console.log('监听通知移除流事件', stream);
  240. if ('room_user_id' in vue.connectStudent && stream.streamType() === 10 && vue.connect) {
  241. vue.handsDown();
  242. }
  243. vue.connect = false;
  244. vue.remoteStreamType = -1;
  245. });
  246. // 停止订阅流
  247. rtc.on('unSub', unSubStream => {
  248. console.log('停止订阅流', unSubStream);
  249. rtc.unSubscribeStream({
  250. unSubStream,
  251. success(stream) {
  252. console.log('取消订阅流成功', stream.id());
  253. },
  254. fail(str) {
  255. console.log(str);
  256. }
  257. });
  258. });
  259. // 用户退出房间通知其他人员事件
  260. rtc.on('exit_room_user', data => {
  261. console.log('用户退出房间通知其他人员事件', data);
  262. vue.studentExitLiveRoom(data.id, false);
  263. });
  264. /**
  265. * 排麦监听事件
  266. */
  267. // 监听自己被邀请事件
  268. rtc.on('inviteUp', uid => {
  269. console.log('监听自己被邀请事件', uid);
  270. rtc.inviteAccept({
  271. success(str) {
  272. console.log('接受邀请成功', str);
  273. },
  274. fail(data) {
  275. console.log('接受邀请失败', data);
  276. }
  277. });
  278. });
  279. /**
  280. * 监听聊天事件
  281. */
  282. rtc.on('chat_message', data => {
  283. const dat = JSON.parse(data);
  284. console.log(dat);
  285. // 敏感词过滤:如果发送的聊天消息被系统判定包含敏感词,则只有发送者能收到本条消息,房间内其他人都不会收到这条聊天消息。
  286. // 如果返回消息中有 isFilterChat 字段(消息不包含敏感词返回数据中无isFilterChat字段),且isFilterChat的值为1,则说明该消息包含敏感字,除发送者外其他人不会收到这条消息。
  287. if (dat.isFilterChat && dat.isFilterChat === 1) {
  288. return;
  289. }
  290. vue.chatList.push(dat);
  291. });
  292. rtc.on('allowChatChange', ({ settings }) => {
  293. Message({
  294. type: 'success',
  295. message: settings.allow_chat ? i18n.t('Key633') : i18n.t('Key632')
  296. });
  297. });
  298. // 接收自定义消息
  299. rtc.on('publish_message', data => {
  300. // 连接中途下麦
  301. if (data.type === 'handsDown-load-student' && data.uid === vue.connectUid) {
  302. vue.callLoading = false;
  303. Message({
  304. type: 'warning',
  305. message: i18n.t('Key449')
  306. });
  307. }
  308. // 无对应设备
  309. if (data.type === 'no-device') {
  310. vue.callLoading = false;
  311. Message({
  312. type: 'warning',
  313. message: data.video_mode === 1 ? i18n.t('Key451') : i18n.t('Key450')
  314. });
  315. }
  316. });
  317. }
  318. /**
  319. * 开启直播
  320. */
  321. export function startLive() {
  322. rtc.startLive({
  323. success(data) {
  324. console.log(data);
  325. publishStream('main'); // 如果需要立即推流,执行 publish 方法
  326. Message({
  327. message: i18n.t('Key452'),
  328. type: 'success'
  329. });
  330. },
  331. fail(data) {
  332. Message({
  333. message: `${i18n.t('Key453')}:${data}`,
  334. type: 'warning'
  335. });
  336. }
  337. });
  338. }
  339. /**
  340. * 结束直播
  341. */
  342. export function stopLive() {
  343. rtc.stopLive({
  344. success() {
  345. Message({
  346. type: 'success',
  347. message: i18n.t('Key454')
  348. });
  349. },
  350. fail(data) {
  351. Message({
  352. type: 'error',
  353. message: `${i18n.t('Key455')}:${JSON.stringify(data)}`
  354. });
  355. }
  356. });
  357. }
  358. /**
  359. * 推送桌面共享
  360. */
  361. export function publishShareStream() {
  362. rtc.publishShareStream({
  363. success: stream => {
  364. console.log('推送桌面共享成功', stream);
  365. },
  366. fail: str => {
  367. console.log(str);
  368. }
  369. });
  370. }
  371. /**
  372. * 关闭桌面共享
  373. */
  374. export function unPubShareStream() {
  375. rtc.unPubShareStream();
  376. }
  377. /**
  378. * 开启、结束、暂停、恢复录制
  379. * @param { String } status: 'start' 开启, 'end' 结束, 'pause' 暂停, 'resume' 恢复
  380. */
  381. export function liveRecord(status) {
  382. rtc.liveRecord({
  383. status,
  384. success(data) {
  385. console.log('成功', data);
  386. },
  387. fail(str) {
  388. console.log(str);
  389. }
  390. });
  391. }
  392. // 连麦
  393. /**
  394. * 老师端发起邀请,邀请学生上麦。(举手模式)
  395. * @param {Object} object
  396. */
  397. export function invite(object) {
  398. rtc.invite(object);
  399. }