Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into zj

src/components/LivePlaying.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="video">
-        <video src=""></video>
+    <div class="video" id="local_stream">
+        <!-- <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>