common.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import store from '@/store';
  2. import { Message } from 'element-ui';
  3. /**
  4. * WebSDK 实例化对象
  5. */
  6. export let rtc;
  7. /**
  8. * 初始化SDK方法
  9. * @param { Object } data 初始化SDK所需参数
  10. * @returns { Object } Rtc
  11. */
  12. export function initSDK(data) {
  13. rtc = new Rtc(data);
  14. return rtc;
  15. }
  16. /**
  17. * 查询直播是否开启
  18. */
  19. export function getLiveStat(obj) {
  20. rtc.getLiveStat(obj);
  21. }
  22. /**
  23. * 下麦操作
  24. * @param { String } uid
  25. */
  26. export function handsDown(Object) {
  27. rtc.handsDown(Object);
  28. }
  29. /**
  30. * 上麦更新
  31. * @param { Object } stream
  32. */
  33. export function updateMcResult(stid, pid) {
  34. // 上麦更新是在两种情况下执行
  35. // 1.推流成功之后将自己的麦序更新为3;系统会广播 speak_context 事件,其他用户监听该事件后更新对应的业务展示状态;
  36. // 2.不能创建本地流或者推流失败,更新自己的麦序为0。
  37. rtc.updateMcResult({
  38. pid,
  39. stid,
  40. success(data) {
  41. console.log('更新上麦结果请求成功,此处可处理应用层逻辑', data);
  42. },
  43. fail(data) {
  44. console.log('更新上麦结果请求失败:' + JSON.stringify(data));
  45. }
  46. });
  47. }
  48. /**
  49. * 推送本地流
  50. */
  51. export function publishStream(streamName) {
  52. rtc.publish({
  53. streamName,
  54. // 推流成功,更新上麦结果
  55. success: stream => {
  56. console.log('推流成功', stream);
  57. updateMcResult(stream.id(), 1);
  58. },
  59. fail: str => {
  60. // 推流失败,更新上麦结果
  61. console.log('推流失败,更新上麦结果', str);
  62. updateMcResult('', 0);
  63. }
  64. });
  65. }
  66. /**
  67. * 得到创建本地流参数对象
  68. */
  69. export function createData() {
  70. let device = store.state.app.liveDevice;
  71. let video =
  72. device.video.length > 0
  73. ? { device: 'camera', resolution: 'sif', deviceId: device.video }
  74. : false;
  75. let audio = device.audio.length > 0 ? { deviceId: device.audio } : false;
  76. return {
  77. video,
  78. audio
  79. };
  80. }
  81. /**
  82. * 创建本地流
  83. */
  84. export function createLocalStream(streamName) {
  85. rtc.createLocalStream({
  86. streamName,
  87. createData: createData(),
  88. success(stream) {
  89. console.log('创建本地流成功', stream);
  90. // 创建本地流成功,将流展示到id为 live 的dom元素盒子中
  91. stream.show('live');
  92. publishStream(streamName); // 如果需要立即推流,执行 publish 方法
  93. },
  94. fail(data) {
  95. // 创建本地流失败,应用层处理
  96. Message({
  97. type: 'error',
  98. message: '创建本地流失败:' + data
  99. });
  100. }
  101. });
  102. }
  103. /**
  104. * 结束本地流
  105. */
  106. export function closeVideo(streamName) {
  107. rtc.closeVideo({
  108. streamName,
  109. success() {
  110. console.log('结束本地流成功');
  111. },
  112. fail(str) {
  113. console.log(str);
  114. }
  115. });
  116. }
  117. // 重连
  118. export function reconnection() {
  119. rtc.closeVideo({
  120. streamName: 'main',
  121. success() {
  122. createLocalStream('main');
  123. },
  124. fail(str) {
  125. console.log(str);
  126. }
  127. });
  128. }
  129. /**
  130. * 关闭本地流声音
  131. */
  132. export function pauseAudio(options) {
  133. rtc.pauseAudio(options);
  134. }
  135. /**
  136. * 开启本地流声音
  137. */
  138. export function playAudio(options) {
  139. rtc.playAudio(options);
  140. }
  141. /**
  142. * 关闭本地流视频画面
  143. */
  144. export function pauseVideo(options) {
  145. rtc.pauseVideo(options);
  146. }
  147. /**
  148. * 开启本地流视频画面
  149. */
  150. export function playVideo(options) {
  151. rtc.playVideo(options);
  152. }
  153. /**
  154. * 获取设备列表
  155. */
  156. export function getDevice(options) {
  157. rtc.getDevice(options);
  158. }
  159. // 查询网络节点
  160. export function getNetPoint() {
  161. rtc.getNetPoint({
  162. success(data) {
  163. console.log('获取网络节点成功', data);
  164. }
  165. });
  166. }
  167. /**
  168. * 获取历史记录
  169. * 用于获取当前直播中房间的文档翻页,画笔,聊天的历史记录
  170. */
  171. export function getHistory(options) {
  172. rtc.getHistory(options);
  173. }
  174. /**
  175. * 房间配置项更新
  176. * @param {Object} option 房间配置项 (具体看2.0 https://doc.bokecc.com/class/developer/web/chat.html),以键值对的形式传
  177. */
  178. export function roomUpdate(option) {
  179. rtc.roomUpdate(option);
  180. }
  181. // 自定义消息发送事件
  182. export function sendPublishMessage(data) {
  183. rtc.sendPublishMessage(data);
  184. }
  185. // 聊天组件
  186. /**
  187. * 发送聊天
  188. * @param {String} msg length不能超过 400
  189. */
  190. export function sendMsg(msg) {
  191. rtc.sendMsg(msg);
  192. }
  193. // 文档
  194. /**
  195. * 变更画笔
  196. */
  197. export function drawChange(action, value) {
  198. rtc.drawChange({
  199. action,
  200. value
  201. });
  202. }
  203. export function createScript(url) {
  204. let script = document.createElement('script');
  205. script.type = 'text/javascript';
  206. script.src = url;
  207. document.getElementsByTagName('body')[0].appendChild(script);
  208. return script;
  209. }
  210. function createLink(url) {
  211. let link = document.createElement('link');
  212. link.rel = 'stylesheet';
  213. link.href = url;
  214. document.getElementsByTagName('body')[0].appendChild(link);
  215. return link;
  216. }
  217. // 加载直播所需 SDK,加载完成后才能初始化
  218. export function downloadWebSDK(vue) {
  219. createLink('https://class.csslcloud.net/static/SDK/docSDK/draw.css').onload = () => {
  220. vue.loadedNumber += 1;
  221. };
  222. createScript('https://class.csslcloud.net/sdk/websdk/hdRtc-6.7.2.js').onload = () => {
  223. let scriptArray = [
  224. 'https://class.csslcloud.net/static/dist/js/classMode.js',
  225. 'https://class.csslcloud.net/static/dist/js/classUpdateChat.js',
  226. 'https://image.csslcloud.net/js/dpc.js',
  227. 'https://class.csslcloud.net/static/js/jquery/jquery.min.js'
  228. ];
  229. for (let i = 0; i < scriptArray.length; i++) {
  230. createScript(scriptArray[i]).onload = () => {
  231. vue.loadedNumber += 1;
  232. };
  233. }
  234. };
  235. }
  236. // 聊天列表滚动
  237. export function chatRoll(vue) {
  238. let chat = vue.$refs.chat;
  239. let isBottom = chat.scrollTop >= chat.scrollHeight - 170;
  240. vue.$nextTick(() => {
  241. if (isBottom) {
  242. chat.scrollTop = chat.scrollHeight;
  243. }
  244. });
  245. }