common.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  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() {
  133. rtc.pauseAudio({
  134. streamName: 'main',
  135. success() {
  136. console.log('关闭本地流声音成功');
  137. },
  138. fail(str) {
  139. console.log(str);
  140. }
  141. });
  142. }
  143. /**
  144. * 开启本地流声音
  145. */
  146. export function playAudio() {
  147. rtc.playAudio({
  148. streamName: 'main',
  149. success(data) {
  150. console.log(data);
  151. console.log('开启本地流声音成功');
  152. },
  153. fail(str) {
  154. console.log(str);
  155. }
  156. });
  157. }
  158. /**
  159. * 关闭本地流视频画面
  160. */
  161. export function pauseVideo() {
  162. rtc.pauseVideo({
  163. streamName: 'main',
  164. success() {
  165. console.log('关闭本地流视频画面成功');
  166. },
  167. fail(str) {
  168. console.log(str);
  169. }
  170. });
  171. }
  172. /**
  173. * 开启本地流视频画面
  174. */
  175. export function playVideo() {
  176. rtc.playVideo({
  177. streamName: 'main',
  178. success() {
  179. console.log('开启本地流视频画面成功');
  180. },
  181. fail(str) {
  182. console.log(str);
  183. }
  184. });
  185. }
  186. /**
  187. * 获取设备列表
  188. */
  189. export function getDevice(options) {
  190. rtc.getDevice(options);
  191. }
  192. // 查询网络节点
  193. export function getNetPoint() {
  194. rtc.getNetPoint({
  195. success(data) {
  196. console.log('获取网络节点成功', data);
  197. }
  198. });
  199. }
  200. /**
  201. * 房间配置项更新
  202. * @param {Object} option 房间配置项 (具体看2.0 https://doc.bokecc.com/class/developer/web/chat.html),以键值对的形式传
  203. */
  204. export function roomUpdate(option) {
  205. rtc.roomUpdate(option);
  206. }
  207. // 自定义消息发送事件
  208. export function sendPublishMessage(data) {
  209. rtc.sendPublishMessage(data);
  210. }
  211. // 聊天组件
  212. /**
  213. * 发送聊天
  214. * @param {String} msg length不能超过 400
  215. */
  216. export function sendMsg(msg) {
  217. rtc.sendMsg(msg);
  218. }
  219. // 文档
  220. /**
  221. * 变更画笔
  222. */
  223. export function drawChange(action, value) {
  224. rtc.drawChange({
  225. action,
  226. value
  227. });
  228. }
  229. export function createScript(url) {
  230. let script = document.createElement('script');
  231. script.type = 'text/javascript';
  232. script.src = url;
  233. document.getElementsByTagName('body')[0].appendChild(script);
  234. return script;
  235. }
  236. function createLink(url) {
  237. let link = document.createElement('link');
  238. link.rel = 'stylesheet';
  239. link.href = url;
  240. document.getElementsByTagName('body')[0].appendChild(link);
  241. return link;
  242. }
  243. // 加载直播所需 SDK,加载完成后才能初始化
  244. export function downloadWebSDK(vue) {
  245. createLink('https://class.csslcloud.net/static/SDK/docSDK/draw.css').onload = () => {
  246. vue.loadedNumber += 1;
  247. };
  248. createScript('https://class.csslcloud.net/sdk/websdk/hdRtc-6.7.2.js').onload = () => {
  249. let scriptArray = [
  250. 'https://class.csslcloud.net/static/dist/js/classMode.js',
  251. 'https://class.csslcloud.net/static/dist/js/classUpdateChat.js',
  252. 'https://image.csslcloud.net/js/dpc.js',
  253. 'https://class.csslcloud.net/static/js/jquery/jquery.min.js'
  254. ];
  255. for (let i = 0; i < scriptArray.length; i++) {
  256. createScript(scriptArray[i]).onload = () => {
  257. vue.loadedNumber += 1;
  258. };
  259. }
  260. };
  261. }
  262. // 聊天列表滚动
  263. export function chatRoll(vue) {
  264. let chat = vue.$refs.chat;
  265. let isBottom = chat.scrollTop >= chat.scrollHeight - 170;
  266. vue.$nextTick(() => {
  267. if (isBottom) {
  268. chat.scrollTop = chat.scrollHeight;
  269. }
  270. });
  271. }