@tencentcloud/trtc-component-wx 0.0.1

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@tencentcloud/trtc-component-wx",
+  "version": "0.0.1",
+  "description": "",
+  "main": "miniprogram_dist/index.js",
+  "scripts": {
+    "dev": "gulp dev --develop",
+    "watch": "gulp watch --develop --watch",
+    "build": "gulp",
+    "dist": "npm run build",
+    "clean-dev": "gulp clean --develop",
+    "clean": "gulp clean",
+    "test": "jest --bail",
+    "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail",
+    "coverage": "jest ./test/* --coverage --bail",
+    "lint": "eslint \"src/**/*.js\" --fix",
+    "lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix"
+  },
+  "miniprogram": "miniprogram_dist",
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testURL": "https://jest.test",
+    "collectCoverageFrom": [
+      "miniprogram_dist/**/*.js"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "miniprogram_dist"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-preset-env": "^1.7.0",
+    "colors": "^1.3.1",
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb-base": "13.1.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "gulp": "^4.0.0",
+    "gulp-clean": "^0.4.0",
+    "gulp-if": "^2.0.2",
+    "gulp-install": "^1.1.0",
+    "gulp-less": "^4.0.1",
+    "gulp-rename": "^1.4.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "jest": "^23.5.0",
+    "miniprogram-api-typings": "^2.10.3-1",
+    "miniprogram-simulate": "^1.2.5",
+    "thread-loader": "^2.1.3",
+    "through2": "^2.0.3",
+    "ts-loader": "^7.0.0",
+    "typescript": "^3.8.3",
+    "vinyl": "^2.2.0",
+    "webpack": "^4.29.5",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "dependencies": {
+    "@tencentcloud/trtc-cloud-wx": "^0.0.2",
+    "trtc-wx-sdk": "^1.1.5"
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+import TRTCCloud from 'trtc-cloud-wx'
+
+export * from 'trtc-cloud-wx'
+export default TRTCCloud

package/src/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "trtc-cloud-wx",
+  "version": "1.0.4-beta.0",
+  "description": "",
+  "main": "./trtc-cloud-wx.js",
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "mitt": "^3.0.0",
+    "trtc-wx-sdk": "^1.1.4"
+  }
+}

package/src/trtc-cloud-wx.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var mitt = require('mitt');
+var TRTC = require('trtc-wx-sdk');
+
+var TrtcCloud = /** @class */function () {
+  function TrtcCloud() {
+    this.emitter = mitt();
+    this.init();
+  }
+  TrtcCloud.getTRTCShareInstance = function () {
+    console.log('@@TrtcCloud.instance1', TrtcCloud.instance);
+    if (!TrtcCloud.instance) {
+      TrtcCloud.instance = new TrtcCloud();
+      console.log('@@TrtcCloud.instance2', TrtcCloud.instance);
+    }
+    return TrtcCloud.instance;
+  };
+  TrtcCloud.prototype.init = function () {
+    this.TRTC = new TRTC(this);
+    this.EVENT = this.TRTC.EVENT;
+  };
+  TrtcCloud.prototype.on = function (eventName, handler) {
+    this.emitter.on(eventName, handler);
+  };
+  TrtcCloud.prototype.enterRoom = function (params, scene) {
+    var sdkAppId = params.sdkAppId,
+      userId = params.userId,
+      userSig = params.userSig,
+      roomId = params.roomId;
+    this.TRTC.createPusher({});
+    var pusher = this.TRTC.enterRoom({
+      sdkAppID: sdkAppId,
+      userID: userId,
+      userSig: userSig,
+      roomID: roomId,
+      enableMic: true,
+      enableCamera: true // 进房默认开启视频上行
+    });
+
+    this.emitter.emit('enterRoom', pusher);
+  };
+  return TrtcCloud;
+}();
+
+module.exports = TrtcCloud;

package/src/trtc-player.js

@@ -0,0 +1,72 @@
+import TRTCCloud, {translateTRTCStreamId} from 'trtc-cloud-wx'
+
+const trtcCloud = TRTCCloud.getTRTCShareInstance()
+const trtc = trtcCloud.trtc
+const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
+
+Component({
+  properties: {
+    streamId: String
+  },
+  data: {
+    player: {},
+    TRTCStreamId: ''
+  },
+  lifetimes: {
+    attached() {
+      this.data.TRTCStreamId = this.getTRTCStreamId(this.data.streamId)
+      this.bindTRTCCloudEvent()
+    },
+    detached() {
+      this.unbindTRTCCloudEvent()
+    }
+  },
+
+  methods: {
+    // todo room uniapp 特供，因为 uniapp 打包导致组件传惨变量名更替 trtc-player 组建内部无法识别
+    setTRTCStreamId(id) {
+      return new Promise((resolve, reject) => {
+        try {
+          this.data.streamId = id
+          this.data.TRTCStreamId = this.getTRTCStreamId(id)
+          this.setData({streamId: this.data.streamId}, () => {
+            resolve()
+          })
+        } catch (err) {
+          reject(err)
+        }
+      })
+    },
+    playerAttributesChange(event) {
+      const {view, playerAttributes, callback} = event
+      if (view === this.data.streamId) {
+        this.setData({player: playerAttributes}, callback)
+      }
+    },
+    getTRTCStreamId(streamId) {
+      const tempArray = streamId.split('_')
+      const userId = tempArray.slice(0, -1).join('_')
+      const streamType = Number(tempArray[tempArray.length - 1])
+      return translateTRTCStreamId(userId, streamType)
+    },
+    bindTRTCCloudEvent() {
+      InterfaceEventEmitter.on('playerAttributesChange', this.playerAttributesChange, this)
+    },
+    unbindTRTCCloudEvent() {
+      InterfaceEventEmitter.off('playerAttributesChange', this.playerAttributesChange)
+    },
+    // 请保持跟 wxml 中绑定的事件名称一致
+    _playerStateChange(event) {
+      trtc.playerEventHandler(event)
+    },
+    _playerFullscreenChange(event) {
+      trtc.playerFullscreenChange(event)
+    },
+    _playerNetStatus(event) {
+      trtc.playerNetStatus(event)
+    },
+    _playerAudioVolumeNotify(event) {
+      trtc.playerAudioVolumeNotify(event)
+    },
+  }
+})

package/src/trtc-player.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/trtc-player.wxml

@@ -0,0 +1,12 @@
+<view class="trtc-player-container">
+    <live-player wx:if="{{player.streamID}}" class="trtc-player" id="{{player.streamID}}" data-userid="{{player.userID}}"
+    data-streamid="{{player.streamID}}" data-streamtype="{{player.streamType}}" src="{{player.src}}" mode="RTC"
+    autoplay="{{player.autoplay}}" mute-audio="{{player.muteAudio}}" mute-video="{{player.muteVideo}}"
+    orientation="{{player.orientation}}" object-fit="{{player.objectFit}}"
+    background-mute="{{player.enableBackgroundMute}}" min-cache="{{player.minCache}}" max-cache="{{player.maxCache}}"
+    sound-mode="{{player.soundMode}}" enable-recv-message="{{player.enableRecvMessage}}"
+    auto-pause-if-navigate="{{player.autoPauseIfNavigate}}" auto-pause-if-open-native="{{player.autoPauseIfOpenNative}}"
+    debug="{{player.debug}}" bindstatechange="_playerStateChange" bindfullscreenchange="_playerFullscreenChange"
+    bindnetstatus="_playerNetStatus" bindaudiovolumenotify="_playerAudioVolumeNotify" />
+    <view wx:if="{{player.stopVideo}}" class="trtc-dark-mask"></view>
+</view>

package/src/trtc-player.wxss

@@ -0,0 +1,16 @@
+.trtc-player-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.trtc-player {
+  height: 100%;
+  width: 100%;
+}
+.trtc-dark-mask {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  position: absolute;
+  top: 0;
+}

package/src/trtc-pusher.js

@@ -0,0 +1,64 @@
+import TRTCCloud from 'trtc-cloud-wx'
+
+const trtcCloud = TRTCCloud.getTRTCShareInstance()
+const trtc = trtcCloud.trtc
+const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
+
+Component({
+  properties: {
+    // trtcCloud: {
+    //   type: Object,
+    // }
+  },
+  data: {
+    pusher: {},
+  },
+  lifetimes: {
+    attached() {
+      this.bindTRTCCloudEvent()
+    },
+    detached() {
+      this.unbindTRTCCloudEvent()
+      trtcCloud.exitRoom()
+    },
+  },
+
+
+  methods: {
+    pusherAttributesChange(event) {
+      const {pusher, callback} = event
+      this.setData({pusher}, callback)
+    },
+    bindTRTCCloudEvent() {
+      InterfaceEventEmitter.on('pusherAttributesChange', this.pusherAttributesChange, this)
+    },
+    unbindTRTCCloudEvent() {
+      InterfaceEventEmitter.off('playerAttributesChange', this.pusherAttributesChange)
+    },
+    // 请保持跟 wxml 中绑定的事件名称一致
+    _pusherStateChangeHandler(event) {
+      trtc.pusherEventHandler(event)
+    },
+    _pusherNetStatusHandler(event) {
+      trtc.pusherNetStatusHandler(event)
+    },
+    _pusherErrorHandler(event) {
+      trtc.pusherErrorHandler(event)
+    },
+    _pusherBGMStartHandler(event) {
+      trtc.pusherBGMStartHandler(event)
+    },
+    _pusherBGMProgressHandler(event) {
+      trtc.pusherBGMProgressHandler(event)
+    },
+    _pusherBGMCompleteHandler(event) {
+      trtc.pusherBGMCompleteHandler(event)
+    },
+    _pusherAudioVolumeNotify(event) {
+      if (!trtcCloud.isEnterRoom) {
+        return
+      }
+      trtc.pusherAudioVolumeNotify(event)
+    }
+  }
+})

package/src/trtc-pusher.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/trtc-pusher.wxml

@@ -0,0 +1,19 @@
+<view class="trtc-pusher-container">
+    <live-pusher class="trtc-pusher" url="{{pusher.url}}" mode="{{pusher.mode}}" autopush="{{pusher.autopush}}"
+        enable-camera="{{pusher.enableCamera}}" enable-mic="{{pusher.enableMic}}" muted="{{!pusher.enableMic}}"
+        enable-agc="{{pusher.enableAgc}}" enable-ans="{{pusher.enableAns}}"
+        enable-ear-monitor="{{pusher.enableEarMonitor}}" auto-focus="{{pusher.enableAutoFocus}}"
+        zoom="{{pusher.enableZoom}}" min-bitrate="{{pusher.minBitrate}}" max-bitrate="{{pusher.maxBitrate}}"
+        video-width="{{pusher.videoWidth}}" video-height="{{pusher.videoHeight}}" beauty="{{pusher.beautyLevel}}"
+        whiteness="{{pusher.whitenessLevel}}" orientation="{{pusher.videoOrientation}}" aspect="{{pusher.videoAspect}}"
+        device-position="{{pusher.frontCamera}}" remote-mirror="{{pusher.enableRemoteMirror}}"
+        local-mirror="{{pusher.localMirror}}" background-mute="{{pusher.enableBackgroundMute}}"
+        audio-quality="{{pusher.audioQuality}}" audio-volume-type="{{pusher.audioVolumeType}}"
+        audio-reverb-type="{{pusher.audioReverbType}}" waiting-image="{{pusher.waitingImage}}"
+        beauty-style="{{pusher.beautyStyle}}" fps="{{pusher.fps}}" filter="{{pusher.filter}}"
+        bindstatechange="_pusherStateChangeHandler" bindnetstatus="_pusherNetStatusHandler"
+        binderror="_pusherErrorHandler" bindbgmstart="_pusherBGMStartHandler"
+        bindbgmprogress="_pusherBGMProgressHandler" bindbgmcomplete="_pusherBGMCompleteHandler"
+        bindaudiovolumenotify="_pusherAudioVolumeNotify" />
+    <camera wx:if="{{pusher.videoPreview}}" class="trtc-camera" device-position="{{pusher.frontCamera}}"></camera>
+</view>

package/src/trtc-pusher.wxss

@@ -0,0 +1,15 @@
+.trtc-pusher-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.trtc-pusher {
+  height: 100%;
+  width: 100%;
+}
+
+.trtc-camera {
+  height: 100%;
+  position: absolute;
+  top: 0;
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2015",
+    "lib": ["es2015", "es2017", "dom"],
+    "noImplicitAny": false,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "baseUrl": ".",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata":true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "files": [
+    "node_modules/miniprogram-api-typings/index.d.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}