package.json

@@ -9,11 +9,13 @@
   },
   "dependencies": {
     "@ant-design-vue/use": "^0.0.1-alpha.6",
+    "@types/trtc-js-sdk": "^4.3.0",
     "ant-design-vue": "^2.0.0-beta.9",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.9.1",
     "postcss-pxtorem": "^5.1.1",
+    "trtc-js-sdk": "^4.6.5",
     "vod-js-sdk-v6": "^1.4.10",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",

src/components/LivePlaying.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="video">
+    <div class="video" id="local_stream">
-        <video src=""></video>
+        <!-- <video src=""></video> -->
     </div>
 </template>
 <style lang="scss" scoped>
@@ -9,7 +9,7 @@
     height: 449px;
     border-radius: 17px;
     background-color: #0f0;
-    // overflow: hidden;
+    overflow: hidden;
     >video{
         width: 100%;
         height: 100%;

src/components/LiveingWatcher.vue

@@ -117,7 +117,6 @@
         width: 57px;
         height: 57px;
         border-radius: 50%;
-        background-color: #0f0;
       }
     }
   }

src/types/index.d.ts

@@ -15,9 +15,6 @@ declare module 'axios' {
     }
 }
 
-
-
-
 // 图片选择
 export interface ImgInfo {
     file: string;

src/types/trtc-js-sdk.d.ts

@@ -0,0 +1,4 @@
+declare module 'trtc-js-sdk' {
+    export function createClient(info: any): any
+    export function createStream(info: any): any
+}

src/views/regime/Liveing.vue

@@ -9,7 +9,7 @@
         <div class="top">
         <div class="left">直播页面</div>
         <div class="right">
-            <img src="@/static/images/liveshare.png" alt="" />
+            <img src="@/static/images/liveshare.png" alt="" @click="fenxiang()" />
             <img src="@/static/images/liveend.png" alt="" />
         </div>
         </div>
@@ -174,7 +174,6 @@
             width: 228px;
             height: 132px;
             border-radius: 18px;
-            background: #0f0;
         }
         .name {
             position: absolute;
@@ -188,17 +187,107 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, onMounted } from "vue";
 import LivePlaying from "@/components/LivePlaying.vue";
 import LiveingWatcher from "@/components/LiveingWatcher.vue";
+import TRTC from "trtc-js-sdk"
 
 export default defineComponent({
-  components: {
+    components: {
         LivePlaying,
         LiveingWatcher,
-  },
+    },
-  setup() {
+    setup() {
         console.log(1);
-  },
+        let client: any;
+        let localStream: any;
+        let statie = true;
+        onMounted(()=>{
+            init(pingmu);
+
+        })
+        function fenxiang(){
+            console.log(localStream)
+           
+
+            // client.unpublish(localStream).then(() => {
+            //     // 关闭屏幕分享流
+            //     console.log("关闭")
+            //     client.leave().then(() => {
+            //     // leaving room success
+            //         console.log("关闭成功")
+            //     }).catch((error: string) => {
+            //         console.error('leaving room failed: ' + error);
+            //     });
+            // });
+            init(statie ? shexiang : pingmu);
+            statie = !statie;
+        }
+        function init(fun: any){
+            const el = document.querySelector("#local_stream");
+            if(el){
+                el.innerHTML = ""
+            }
+            client = TRTC.createClient({
+                mode: 'rtc',
+                sdkAppId: '1400400340',
+                userId: 10,
+                userSig: 'cf1e5db5d230ce6fee3fa23ba779c68a597dd229c11cd9ee315e5ffd6b9bf415'
+            });
+            client
+            .join({ roomId: 11 })
+            .catch((error: string) => {
+                console.error('进房失败 ' + error);
+            })
+            .then(() => {
+                console.log('进房成功');
+                fun()
+            });
+        }
+        function pingmu(){
+            localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });
+
+            localStream
+            .initialize()
+            .catch((error: string) => {
+                console.error('初始化本地流失败 ' + error);
+            })
+            .then(() => {
+                console.log('初始化本地流成功');
+                client
+                .publish(localStream)
+                .catch((error: string) => {
+                    console.error('本地流发布失败 ' + error);
+                })
+                .then(() => {
+                    localStream.play('local_stream');
+                    console.log('本地流发布成功');
+                });
+            });
+        }
+        function shexiang(){
+            localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
+            localStream
+            .initialize()
+            .catch((error: string) => {
+                console.error('初始化本地流失败 ' + error);
+            })
+            .then(() => {
+                console.log('初始化本地流成功');
+                client
+                .publish(localStream)
+                .catch((error: string) => {
+                    console.error('本地流发布失败 ' + error);
+                })
+                .then(() => {
+                    localStream.play('local_stream');
+                    console.log('本地流发布成功');
+                });
+            });
+        }
+        return{
+            fenxiang
+        }
+    },
 });
 </script>

yarn.lock

@@ -1148,6 +1148,11 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
   integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
 
+"@types/trtc-js-sdk@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/@types/trtc-js-sdk/-/trtc-js-sdk-4.3.0.tgz#8a3fd551861c25448c62021bbf8529e5061a2994"
+  integrity sha512-VYTe3dYLbT4hBG2pZQTRuuXketJethmix6ymIT1ExohkAOmOS4kYAuK1HUuG0HpxUWINlIC6vJ2T/RgVFH3c5g==
+
 "@types/uglify-js@*":
   version "3.11.0"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.0.tgz#2868d405cc45cd9dc3069179052103032c33afbc"
@@ -9045,6 +9050,11 @@ trim-newlines@^1.0.0:
   resolved "https://registry.npm.taobao.org/trim-newlines/download/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
+trtc-js-sdk@^4.6.5:
+  version "4.6.5"
+  resolved "https://registry.npmjs.org/trtc-js-sdk/-/trtc-js-sdk-4.6.5.tgz#a093ccc9637a17f75403ae5e68ef1f193d513d39"
+  integrity sha512-ggRHhbGh9t32FKUZIJTIBQEcqT1nCTogpg0nzhUc0BtHuhDy1Gq8HA8f7EztV03Wqny7sbxL4k60IdEB9YY3EQ==
+
 "true-case-path@^1.0.2":
   version "1.0.3"
   resolved "https://registry.npm.taobao.org/true-case-path/download/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"