live.js 8.5 KB

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