更新

package.json

@@ -14,6 +14,7 @@
     "jsonwebtoken": "^8.5.1",
     "loadsh": "0.0.4",
     "naf-core": "^0.1.2",
+    "trtc-js-sdk": "^4.4.0",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.4",
     "vue-router": "^3.2.0",

src/views/live/index.vue

@@ -1,20 +1,116 @@
 <template>
   <div id="index">
     <p>直播管理</p>
+    <el-button @click="liveon">直播</el-button>
+    <el-button @click="shareon">分享</el-button>
+    <el-button @click="lookon">观看</el-button>
+    <div id="room-root" class="col-div">
+      <div id="share-video" class="video-box col-div" style="justify-content: flex-end"></div>
+      <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+    </div>
+    <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+import TRTC from 'trtc-js-sdk';
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      client_: null,
+      localStream_: null,
+      sdkAppId_: '1400380125',
+      userId_: 'test1',
+      userSig_:
+        'eJw1zMEKgkAUheF3udtC7oxOmdAmqk1FVGrrbG5xGZPJmUSI3j3RWp7vh-OGdHsKGqohARkgjPvNmirPN*7Zk-PiF5w2F2tZQyIixDBGIdVQPD*oUzUTKpZTxEGptVz3rpTEvzq*d7-5ZHTIl6*GVHQ21m2u7rgWbbqST2Kx2y-KLMSiyCoszRw*XweDMRU_',
+    };
+  },
+  created() {
+    this.initclient();
+  },
+  methods: {
+    async initclient() {
+      this.client_ = TRTC.createClient({
+        mode: 'live',
+        sdkAppId: this.sdkAppId_,
+        userId: this.userId_,
+        userSig: this.userSig_,
+      });
+    },
+    async liveon() {
+      await this.client_.join({ roomId: 8888, role: 'anchor' });
+      const localStream_ = TRTC.createStream({
+        audio: true,
+        video: true,
+        userId: this.userId_,
+      });
+      await localStream_.initialize();
+      console.log('initialize local stream success');
+      // publish the local stream
+      await this.client_.publish(localStream_);
+      localStream_.play('main-video');
+      //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+    },
+    async shareon() {
+      const shareId = 'share-userId';
+      const shareClient = TRTC.createClient({
+        mode: 'videoCall',
+        sdkAppId: this.sdkAppId_,
+        userId: shareId,
+        userSig:
+          'eJwtzMEKgkAUheF3mW0ld8yZVGgRFFFMFFiQ7sS52iUUm9GKondP1OX5DvxfdlaR80TDQuY6wKb9Jo1VQzn1bG*pwVlr0ez0*Ft9T*uaNAu5BzD3gbtieBoqsVMRcBn4HshB8V2T6V0IFwDGChVdXp3i-epVtdEky7DgpV0HR4nSs49FJD9XlSg85Je03G7iJfv9AdKzNAI_',
+      });
+      shareClient.setDefaultMuteRemoteStreams(true);
+      await shareClient.join({ roomId: 8888 });
+      const localStream = TRTC.createStream({ audio: false, screen: true });
+      await localStream.initialize();
+      console.log('initialize share stream success');
+      await shareClient.publish(localStream);
+      this.client_.on('stream-added', event => {
+        const remoteStream = event.stream;
+        const remoteUserId = remoteStream.getUserId();
+        if (remoteUserId === shareId) {
+          // 取消订阅自己的屏幕分享流
+          client.unsubscribe(remoteStream);
+        } else {
+          // 订阅其他一般远端流
+          client.subscribe(remoteStream);
+        }
+      });
+    },
+    async lookon() {
+      const client = TRTC.createClient({
+        mode: 'live',
+        sdkAppId: this.sdkAppId_,
+        userId: 'test2',
+        userSig:
+          'eJwtzF0LgjAUxvHvsttCzpZLJ3QTvZBJVCpRd5JHOYzF0CFC9N0T9fL5PfD-sixJvQ4bFjHhAVuOm0r8OKpoZIetE-PRlrqwlkoWcR9gFQIXcnocGRxUKr5WAfBwUuwtNaNLKQBgrlA9dDHpYpOebotqf81Vcdc9xrbzg8fxotXTnA-1Ns126mWz94b9-hIRMTw_',
+      });
+      await client.join({ roomId: 8888, role: 'anchor' });
+      client.on('stream-subscribed', event => {
+        const remoteStream = event.stream;
+        // 远端流订阅成功，播放远端音视频流
+        remoteStream.play('look-video');
+      });
+      // 监听远端流增加事件
+      client.on('stream-added', event => {
+        const remoteStream = event.stream;
+        // 订阅远端音频和视频流
+        client.subscribe(remoteStream, { audio: true, video: true, screen: true }).catch(e => {
+          console.error('failed to subscribe remoteStream');
+        });
+
+        // 仅订阅音频数据
+        // client.subscribe(remoteStream, { audio: true, video: false }).catch(e => {
+        //  console.error('failed to subscribe remoteStream');
+        // });
+      });
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -27,4 +123,52 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+#room-root {
+  width: 100%;
+  height: 100%;
+  min-width: 1500px;
+  min-height: 700px;
+  align-items: flex-start;
+  background-color: #f0f0f0;
+}
+#main-video {
+  float: left;
+  width: 32%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+#share-video {
+  float: left;
+  width: 40%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+#look-video {
+  width: 80%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+.video-box {
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  font-size: 14px;
+  color: #888888;
+  z-index: 9;
+  justify-content: center;
+}
+div[id^='player'] {
+  background-color: #d8d8d8 !important;
+}
+</style>