ue-car-live-audio-container 1.0.1

package/README.md

@@ -0,0 +1,85 @@
+### BIM图形使用说明
+
+#### 安装: 
+> `npm install ue-live-audio-container`
+
+#### 使用方法:`
+> import * as bimer from 'LiveRTCClientContainer'
+> 
+
+##### 组件参数传递:
+
+> ```` html
+> <LiveRTCClientContainer liveRTCData={{ liveRTCData }} />
+> > ````
+
+##### 参数传入 
+
+> viewToken 调用后台接口获取, *号为必传参数, 否则会报错
+
+```` javascript
+  const liveRTCData =  {
+    mode: 'live',
+    sdkAppId: 1400635722,
+    userId: '12345',
+    userSig: 'eJwtzMEKgkAUheF3mXXodcY7DUILCRKjXS4q3FgzyUWmRjMVonfP1OX5Dvwflh2OXmcaFjHuAVtNm7R5tHSniQMuQlyOl64K50izKAgBpMA15-NjBkeNGR0ROQDM2pL9m5TAhRBKLRUqx*7*XIfVhegal6cksXGa*7J-Z4qszf1b7gfbpu6eg0DcpUW-Yd8fNRwxcQ__',
+    roomId: 12345, //用后台生成的
+    role: 'anchor', //角色：用户角色 anchor：主播，audience：观众
+    player: 'adviser', // 主播要用adviser，观众用：user
+    audio: true, //固定 true
+    video: false, //固定false
+    projectName:"liveRTC"
+  };
+````
+
+##### 模型加载状态:
+
+>  userSig: 请求后台接口，获取用户sig
+(https://3d.vanke.com/api/vbim-ue4-server/trtc/getUserSig)
+
+组件初始化后，全局对象是：await window.liveTRTCClient
+
+ps: 1）如果用户是主播，那默认打开了语音讲话功能，可以看到浏览器有红色的icon,手机上有语音icon
+    2）如果用户是观众，那用户进来，只能听主播讲话
+
+
+##### 模型API调用:
+
+> 组件初始化后，全局对象是：await window.liveTRTCClient
+
+
+###### API
+
+----
+
+观众要进行语音上麦
+
+> await window.liveTRTCClient.switchRole(“anchor”) //设成主播，才可以上麦
+
+设置本地流：
+
+>  await window.liveTRTCClient.localStreamInit()
+
+发布本地流
+
+>  await window.liveTRTCClient.publishLocalStream()
+>  执行完：1，2，3步骤后，观众上麦成功，可以进行讲话
+
+离开直播间：
+
+> await window.liveTRTCClient.leave()
+
+主播或观众进行静音：
+
+> await window.liveTRTCClient.audioMute(true) //true:表示静音，false 表示非静音
+
+ 获取谁在讲话中：
+
+> api: websocket
+	sendWSPush({
+	          type: 'liveAudio',
+	          userId: userId,
+	          audioVolume: audioVolume
+	        });
+
+

package/dist/index.umd.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("trtc-js-sdk")):"function"==typeof define&&define.amd?define(["exports","react","trtc-js-sdk"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.React,e.TRTC)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n);function a(e,t,n,r,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void n(e)}u.done?t(c):Promise.resolve(c).then(r,o)}function u(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function u(e){a(i,r,o,u,c,"next",e)}function c(e){a(i,r,o,u,c,"throw",e)}u(void 0)}))}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){for(var n=0;t.length>n;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&s(e.prototype,t),n&&s(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function d(e){return d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},d(e)}function f(e,t){return f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},f(e,t)}function m(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function v(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=d(e);if(t){var o=d(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);t>n;n++)r[n]=e[n];return r}function h(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return e.length>r?{done:!1,value:e[r++]}:{done:!0}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw i}}}}var g="index_outerWrap__LV6hH";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("@-webkit-keyframes index_blingbing__3nrB4{0%{opacity:1}50%{opacity:.5}to{opacity:0}}@keyframes index_blingbing__3nrB4{0%{opacity:1}50%{opacity:.5}to{opacity:0}}@-webkit-keyframes index_rotate360__3fbXz{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);transform-origin:center center}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);transform-origin:center center}}@keyframes index_rotate360__3fbXz{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);transform-origin:center center}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);transform-origin:center center}}@-webkit-keyframes index_rotate720__3tm0s{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);transform-origin:center center}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn);transform-origin:center center}}@keyframes index_rotate720__3tm0s{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);transform-origin:center center}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn);transform-origin:center center}}*{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.index_outerWrap__LV6hH .index_imgYYIcon__tCjDK,.index_outerWrap__LV6hH .index_imgZNIcon__12DV7{position:fixed;z-index:1000;width:40px;height:39px}");var y="wss://trilink.vanke.com/socket/app/nantou/nantou".concat((new Date).getTime()),b="",w=null,x=!1;function C(e){y="wss://trilink.vanke.com/socket/app/".concat(e,"/").concat(e).concat((new Date).getTime()),b?console.log("websocket已连接"):(console.log("建立websocket连接"),(b=new WebSocket(y)).onopen=R,b.onmessage=S,b.onerror=T,b.onclose=I)}window.addEventListener("beforeunload",(function(){b&&b.close()}));var k={timeout:5e3,timeoutObj:null,serverTimeoutObj:null,reset:function(){return clearTimeout(this.timeoutObj),clearTimeout(this.serverTimeoutObj),this},start:function(){this.timeoutObj=setTimeout((function(){b&&b.send("ping")}),this.timeout)}};function R(){b.send("ping"),w=setInterval((function(){b.send("ping")}),5e3),k.reset().start()}function T(){console.log("==连接失败重连=="),clearInterval(w),b.close(),_()}function S(e){k.reset().start(),"pong"!==e.data&&window.dispatchEvent(new CustomEvent("onmessageWSNPM",{detail:e}))}function _(){x||(x=!0,setTimeout((function(){C(),x=!1}),1e3))}function O(e){null!==b&&3===b.readyState?(b.close(),_()):1===b.readyState?b.send(JSON.stringify(e)):0===b.readyState&&setTimeout((function(){b.send(JSON.stringify(e))}),3e3)}function I(){clearInterval(w),b=null,_(),console.log("websocket已断开")}var P=function(){function e(t){c(this,e),this.liveRTCOptions=void 0,this.liveRTCClient=void 0,this.liveLocalStream=void 0,this.remoteStreams_=void 0,this.remoteStreamNum=void 0,this.liveRTCOptions=t,this.remoteStreams_=[],this.remoteStreamNum=1,C(null==t?void 0:t.projectName),this.liveRTCClient=i.default.createClient({mode:null==t?void 0:t.mode,sdkAppId:t.sdkAppId,userId:t.userId,userSig:t.userSig,enableAutoPlayDialog:!1}),this.handleClientEvents()}var t;return l(e,[{key:"addVideoView",value:function(e){var t=document.createElement("div");t.id=e,document.getElementById("renderLiveRTCClient").appendChild(t)}},{key:"handleClientEvents",value:(t=u(regeneratorRuntime.mark((function e(){var t=this;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,this.liveRTCClient.on("stream-added",function(){var e=u(regeneratorRuntime.mark((function e(n){var r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,console.log("******远端流增加******: "+(r=n.stream).getId()),e.next=5,t.liveRTCClient.subscribe(r);case 5:e.next=9;break;case 7:e.prev=7,e.t0=e.catch(0);case 9:case"end":return e.stop()}}),e,null,[[0,7]])})));return function(t){return e.apply(this,arguments)}}()),this.liveRTCClient.on("stream-subscribed",function(){var e=u(regeneratorRuntime.mark((function e(n){var r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:try{r=window.remoteStreamPlayer=n.stream,console.log("******远端流订阅成功******："+r.getId()),t.remoteStreams_.push(r),t.addVideoView(r.getId()),t.remoteStreamNum++,console.log("=============================remoteStreams_==================="),(t.remoteStreamNum>2||"adviser"===t.liveRTCOptions.role)&&(console.log("****remoteStreamNum more than 2****",t.remoteStreamNum),r.play(r.getId()))}catch(e){}case 1:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()),e.next=5,this.liveRTCClient.on("peer-join",(function(e){console.log("peer-join "+e.userId)}));case 5:return e.next=7,this.liveRTCClient.on("audio-volume",(function(e){e.result.forEach((function(e){var n,r=e.userId,o=e.audioVolume;console.log("userId: ".concat(r,", audioVolume: ").concat(o)),O({type:"liveAudio",userId:r,audioVolume:o,roomId:null===(n=t.liveRTCOptions)||void 0===n?void 0:n.roomId})}))}));case 7:return e.next=9,this.liveRTCClient.enableAudioVolumeEvaluation(1e3);case 9:e.next=13;break;case 11:e.prev=11,e.t0=e.catch(0);case 13:case"end":return e.stop()}}),e,this,[[0,11]])}))),function(){return t.apply(this,arguments)})},{key:"join",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){var r,o,a;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.liveRTCClient.join({roomId:e.liveRTCOptions.roomId});case 3:return t.next=5,i.default.createStream({userId:null===(r=e.liveRTCOptions)||void 0===r?void 0:r.userId,audio:null===(o=e.liveRTCOptions)||void 0===o?void 0:o.audio,video:null===(a=e.liveRTCOptions)||void 0===a?void 0:a.video});case 5:e.liveLocalStream=t.sent,n({code:0,message:"用户加入成功"}),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(0),n({code:-1,message:"用户加入失败"+t.t0});case 12:case"end":return t.stop()}}),t,null,[[0,9]])})));return function(e){return t.apply(this,arguments)}}())}},{key:"switchRole",value:function(e){var t=this;return new Promise(function(){var n=u(regeneratorRuntime.mark((function n(r){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return n.prev=0,n.next=3,t.liveRTCClient.switchRole(e);case 3:r({code:0,message:"角色切换成功，现在是主播角色"}),n.next=9;break;case 6:n.prev=6,n.t0=n.catch(0),r({code:-1,message:"角色切换失败"+n.t0});case 9:case"end":return n.stop()}}),n,null,[[0,6]])})));return function(e){return n.apply(this,arguments)}}())}},{key:"localStreamInit",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.liveLocalStream.initialize();case 3:return t.next=5,e.liveLocalStream.play("renderLiveRTCClient");case 5:n({code:0,message:"初始化本地流成功"}),t.next=11;break;case 8:t.prev=8,t.t0=t.catch(0),n({code:-1,message:"初始化本地流失败"+t.t0});case 11:case"end":return t.stop()}}),t,null,[[0,8]])})));return function(e){return t.apply(this,arguments)}}())}},{key:"publishLocalStream",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.liveRTCClient.publish(e.liveLocalStream);case 3:return t.next=5,e.liveRTCClient.on("audio-volume",(function(e){e.result.forEach((function(e){var t=e.userId,n=e.audioVolume;console.log("userId: ".concat(t,", audioVolume: ").concat(n)),O({type:"liveAudio",userId:"userId: ".concat(t,", audioVolume: ").concat(n)})}))}));case 5:return t.next=7,e.liveRTCClient.enableAudioVolumeEvaluation(1e3);case 7:n({code:0,message:"本地流发布成功"}),t.next=13;break;case 10:t.prev=10,t.t0=t.catch(0),n({code:-1,message:t.t0+"本地流发布失败"});case 13:case"end":return t.stop()}}),t,null,[[0,10]])})));return function(e){return t.apply(this,arguments)}}())}},{key:"stopPublishLocalStream",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.liveRTCClient.unpublish(e.liveLocalStream);case 3:e.liveLocalStream.stop(),e.liveLocalStream.close(),n({code:0,message:"本地流停止发布成功"}),t.next=11;break;case 8:t.prev=8,t.t0=t.catch(0),n({code:-1,message:t.t0+"本地流停止发布失败"});case 11:case"end":return t.stop()}}),t,null,[[0,8]])})));return function(e){return t.apply(this,arguments)}}())}},{key:"getAudioVolume",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.liveRTCClient.on("audio-volume",(function(t){var r;t.result.forEach((function(e){var t=e.userId,n=e.audioVolume;console.log("userId: ".concat(t,", audioVolume: ").concat(n)),r.push({userId:t,audioVolume:n})})),e.liveRTCClient.enableAudioVolumeEvaluation(1e3),n({code:0,message:"获取正在讲话用户",value:r})}));case 3:t.next=8;break;case 5:t.prev=5,t.t0=t.catch(0),n({code:-1,message:t.t0+"获取正在讲话用户失败"});case 8:case"end":return t.stop()}}),t,null,[[0,5]])})));return function(e){return t.apply(this,arguments)}}())}},{key:"resumeStreams",value:function(){this.liveLocalStream.resume();var e,t=h(this.remoteStreams_);try{for(t.s();!(e=t.n()).done;){e.value.resume()}}catch(e){t.e(e)}finally{t.f()}}},{key:"audioMute",value:function(e){e?this.liveLocalStream.muteAudio():this.liveLocalStream.unmuteAudio()}},{key:"leave",value:function(){var e=this;return new Promise(function(){var t=u(regeneratorRuntime.mark((function t(n){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.stopPublishLocalStream();case 3:return t.next=5,e.liveRTCClient.leave();case 5:return e.liveLocalStream.stop(),e.liveLocalStream.close(),e.liveLocalStream=null,t.next=10,e.liveRTCClient.enableAudioVolumeEvaluation(-1);case 10:n({code:0,message:"退房成功"}),t.next=16;break;case 13:t.prev=13,t.t0=t.catch(0),n({code:-1,message:t.t0+"退房失败"});case 16:case"end":return t.stop()}}),t,null,[[0,13]])})));return function(e){return t.apply(this,arguments)}}())}}]),e}();function L(){var e;return{versions:(e=navigator.userAgent,{appHeight:document.documentElement.clientHeight,appWidth:document.documentElement.clientWidth,trident:e.indexOf("Trident")>-1,presto:e.indexOf("Presto")>-1,webKit:e.indexOf("AppleWebKit")>-1,gecko:e.indexOf("Gecko")>-1&&-1===e.indexOf("KHTML"),mobile:!!e.match(/AppleWebKit.*Mobile.*/),ios:!!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),android:e.indexOf("Android")>-1||e.indexOf("Adr")>-1,iPhone:e.indexOf("iPhone")>-1,iPhoneX:e.indexOf("iPhone")>-1&&document.documentElement.clientHeight>736,iPad:e.indexOf("iPad")>-1,iPads:e.indexOf("Macintosh")>-1,webApp:-1===e.indexOf("Safari"),weixin:e.indexOf("MicroMessenger")>-1,qq:" qq"===e.match(/\sQQ/i)})}}var j=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t)}(i,e);var t,n,r=v(i);function i(e){var t;return c(this,i),(t=r.call(this,e)).liveRTCClient=void 0,t.state={},t}return l(i,[{key:"initLiveRTC",value:(n=u(regeneratorRuntime.mark((function e(){var t,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,console.log("****initLiveRTC****",null===(t=this.props)||void 0===t?void 0:t.liveRTCData),!(null===(n=this.props)||void 0===n?void 0:n.liveRTCData)){e.next=15;break}return e.next=5,new P(this.props.liveRTCData);case 5:if(this.liveRTCClient=window.liveTRTCClient=e.sent,"adviser"!==this.props.liveRTCData.player){e.next=13;break}return e.next=9,this.liveRTCClient.join();case 9:return e.next=11,this.liveRTCClient.localStreamInit();case 11:return e.next=13,this.liveRTCClient.publishLocalStream();case 13:e.next=17;break;case 15:return console.log("******主播流初始失败******"),e.abrupt("return");case 17:e.next=21;break;case 19:e.prev=19,e.t0=e.catch(0);case 21:case"end":return e.stop()}}),e,this,[[0,19]])}))),function(){return n.apply(this,arguments)})},{key:"componentDidMount",value:(t=u(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=4,this.initLiveRTC();case 4:L().versions.iPhone||L().versions.iPad||L().versions.iPads?setTimeout((function(){window.liveLoadingFinish=!0,console.log("=============================liveLoadingFinish===================")}),3e3):window.liveLoadingFinish=!0,e.next=9;break;case 7:e.prev=7,e.t0=e.catch(0);case 9:case"end":return e.stop()}}),e,this,[[0,7]])}))),function(){return t.apply(this,arguments)})},{key:"render",value:function(){return function(e){if(null==e)throw new TypeError("Cannot destructure undefined")}(this.state),o.default.createElement(o.default.Fragment,null,o.default.createElement("div",{className:g},o.default.createElement("div",{id:"renderLiveRTCClient"})))}}]),i}(t.Component);e.LiveRTCClientContainer=j,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ue-car-live-audio-container",
+  "version": "1.0.1",
+  "description": "ue-car-live-audio-container",
+  "main": "dist/index.umd.min.js",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "jacky",
+  "license": "ISC"
+}