Главная Обзор Помощь
Регистрация Вход
zhouenguang
/
PrimordialUniverse
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

feat(core): trtc update

gemercheung 3 лет назад
Родитель
28fdeb6ba0
Сommit
9d4e599fb8
2 измененных файлов с 115 добавлено и 82 удалено
Разделённый вид Показать статистику Diff
  1. 102 68
      index.html
  2. 13 14
      webrtc/connection.js

+ 102 - 68
index.html
Просмотреть файл 

@@ -29,6 +29,19 @@
 
     <body>
 
       <canvas id="renderCanvas"></canvas>
 
 
+      <div
 
+        id="testVideoFeed"
 
+        style="
 
+          position: fixed;
 
+          width: 300px;
 
+          height: 300px;
 
+          z-index: 10000;
 
+          top: 0;
 
+          left: 0;
 
+        "
 
+      >
 
+        <video crossorigin="anonymous" playsinline autoplay muted></video>
 
+      </div>
 
       <div id="videoTextureBox">
 
         <video
 
           id="houseTexture0"
 
@@ -124,86 +137,107 @@
 
       <script src="./worker/index.js" type="module"></script>
 
       <script type="module">
 
         import { Connection } from "./webrtc/connection.js";
 
-        document.addEventListener("DOMContentLoaded", async() => {
 
+        document.addEventListener("DOMContentLoaded", async () => {
 
           const connection = new Connection();
 
           window.connection = connection;
 
-          connection.init(async()=>{
 
-          if(connection.client){
 
-            await connection.client.join({ roomId: 8889 })
 
-            console.log('userSig',connection.userSig)
 
-            connection.socket.emit('getPush',{
 
-                userId:123,
 
-                roomId: 8889,
 
-                sceneCode:"2111",
 
-                userSig:connection.userSig
 
-            })
 
-            connection.socket.on('getPush',(data)=>{
 
-                console.log('getPush',
 
-                `ffmpeg -loglevel info -re -stream_loop -1 -i   output.mp4  -c:v libx264 -preset fast -profile:v baseline -g 30 -sc_threshold 0 -b:v 1500k -c:a libfdk_aac -ac 2 -b:a 128k -f flv "${data}"`);
 
-            });
 
-            console.log('connection.client',connection.client);
 
-
 
-
 
-            connection.client.on('peer-join', event => {
 
-              console.log('peer-join',event)
 
-            });
 
-
 
-            connection.client.on('stream-added', event => {
 
+          const testConfig = {
 
+            userId: "11use2221ttttt2553",
 
+            roomId: "tk12291",
 
+            sdkAppId: 1400653314,
 
+            // role: "audience",
 
+            role: "audience",
 
+            sceneCode: "2111",
 
+          };
 
+          connection.init(testConfig, async () => {
 
+            if (connection.client) {
 
+              await connection.client.join({ roomId: testConfig.roomId });
 
+              console.log("userSig", connection.userSig);
 
+              connection.socket.emit("getPush", {
 
+                userId: testConfig.userId,
 
+                roomId: testConfig.roomId,
 
+                sceneCode: testConfig.sceneCode,
 
+                userSig: connection.userSig,
 
+              });
 
+              connection.socket.on("getPush", (data) => {
 
+                console.log(
 
+                  "getPush",
 
+                  `ffmpeg -loglevel info -re -stream_loop -1 -i  test.mkv  -c:v libx264 -preset fast -profile:v baseline -g 30 -sc_threshold 0 -b:v 1500k -f flv "${data}"`
 
+                );
 
+              });
 
+              console.log("connection.client", connection.client);
 
+
 
+              connection.client.on("peer-join", (event) => {
 
+                console.log("peer-join", event);
 
+              });
 
+
 
+              connection.client.on("stream-added", (event) => {
 
                 const remoteStream = event.stream;
 
                 const remoteUserId = remoteStream.getUserId();
 
-                console.log('received a remoteStream ID: ' + remoteStream.getId() + ' from user: ' + remoteUserId);
 
+                console.warn(
 
+                  "received a remoteStream ID: " +
 
+                    remoteStream.getId() +
 
+                    " from user: " +
 
+                    remoteUserId
 
+                );
 
                 // 若需要观看该远端流，则需要订阅它
 
                 connection.client.subscribe(remoteStream);
 
-             
-            });
 
-            // connection.client.on('network-quality', event => {
 
-            //         console.log(`network-quality, uplinkNetworkQuality:${event.uplinkNetworkQuality}, downlinkNetworkQuality: ${event.downlinkNetworkQuality}`)
 
-            //         // 自 v4.10.3 支持获取上、下行的 RTT 及丢包率
 
-            //         console.log(`uplink rtt:${event.uplinkRTT} loss:${event.uplinkLoss}`)
 
-            //         console.log(`downlink rtt:${event.downlinkRTT} loss:${event.downlinkLoss}`)
 
-            // })
 
-
 
-
 
-            connection.client.on('stream-subscribed', event => {
 
-                   const remoteStream = event.stream;
 
+              });
 
+              // connection.client.on('network-quality', event => {
 
+              //         console.log(`network-quality, uplinkNetworkQuality:${event.uplinkNetworkQuality}, downlinkNetworkQuality: ${event.downlinkNetworkQuality}`)
 
+              //         // 自 v4.10.3 支持获取上、下行的 RTT 及丢包率
 
+              //         console.log(`uplink rtt:${event.uplinkRTT} loss:${event.uplinkLoss}`)
 
+              //         console.log(`downlink rtt:${event.downlinkRTT} loss:${event.downlinkLoss}`)
 
+              // })
 
+
 
+              connection.client.on("stream-subscribed", (event) => {
 
+                const remoteStream = event.stream;
 
+
 
                 // 远端流订阅成功，在HTML页面中创建一个<video>标签，假设该标签ID为‘remote-video-view’
 
                 // 播放该远端流
 
-               remoteStream.play('remote-video-view');
 
-            });
 
-
 
-             connection.client.on('error', event => {
 
-              console.log('error',event)
 
-        
-            });
 
-         
-            // await connection.client.on('connection-state-changed', event => {
 
-            //   console.log('connection-state-changed',event)
 
-             
-            // });
 
-         
-         
-
 
-          
-                // 监听‘stream-removed’事件
 
-            // connection.client.on('stream-removed', event => {
 
-            //     const remoteStream = event.stream;
 
-            //     console.log('remoteStream ID: ' + remoteStream.getId() + ' has been removed');
 
-            //     // 停止播放并删除相应<video>标签
 
-            //     });
 
-            //     // 监听‘stream-updated’事件
 
-            // connection.client.on('stream-updated', event => {
 
-            //     const remoteStream = event.stream;
 
-            //     console.log('remoteStream ID: ' + remoteStream.getId() + ' was updated hasAudio: '
 
-            //                 + remoteStream.hasAudio() + ' hasVideo: ' + remoteStream.hasVideo());
 
-            // });
 
-                // 监听‘stream-subscribed’事件
 
-        
+                // console.log("remoteStream", remoteStream);
 
+                // remoteStream.resume();
 
+                remoteStream.play("testVideoFeed");
 
+                const frame = remoteStream.getVideoFrame();
 
+                const track = remoteStream.getVideoTrack();
 
+                console.warn("frame", frame, track);
 
+                console.warn("frame", remoteStream);
 
+              });
 
+
 
+              connection.client.on("error", (event) => {
 
+                console.log("error", event);
 
+              });
 
+
 
+              connection.client.on("connection-state-changed", (event) => {
 
+                console.warn("connection-state-changed", event);
 
+              });
 
+
 
+              // 监听‘stream-removed’事件
 
+              connection.client.on("stream-removed", (event) => {
 
+                const remoteStream = event.stream;
 
+                console.log(
 
+                  "remoteStream ID: " +
 
+                    remoteStream.getId() +
 
+                    " has been removed"
 
+                );
 
+                // 停止播放并删除相应<video>标签
 
+              });
 
+              // 监听‘stream-updated’事件
 
+              connection.client.on("stream-updated", (event) => {
 
+                const remoteStream = event.stream;
 
+                console.warn(
 
+                  "remoteStream ID: " +
 
+                    remoteStream.getId() +
 
+                    " was updated hasAudio: " +
 
+                    remoteStream.hasAudio() +
 
+                    " hasVideo: " +
 
+                    remoteStream.hasVideo()
 
+                );
 
+              });
 
+              // 监听‘stream-subscribed’事件
 
             }
 
           });
 
-        
         });
 
       </script>
 
-      <video id="remote-video-view" style="position: fixed;width:300px;height:300px;z-index: 10000;top:0;left:0"></video>
 
     </body>
 
     <script src="https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js"></script>
 
   </html>

+ 13 - 14
webrtc/connection.js
Просмотреть файл 

@@ -7,14 +7,16 @@ export class Connection {
 
     userSig: null;
 
   }
 
 
-  startSocket() {
 
+  startSocket(config) {
 
     //192.168.0.52:9099/?userId=123
 
-    this.socket = io("ws://192.168.0.152:9099", {
 
+    console.log("init-startSocket");
 
+    const { sdkAppId, roomId, userId } = config;
 
+    this.socket = io("wss://demo-kms.4dage.com", {
 
       reconnectionDelayMax: 10000,
 
       transports: ["websocket"],
 
       query: {
 
-        userId: "123",
 
-        roomId: "8888",
 
+        userId: userId,
 
+        roomId: roomId,
 
       },
 
     });
 
     this.socket.on("connect", (data) => {
 
@@ -29,27 +31,24 @@ export class Connection {
 
     // }, 3000);
 
   }
 
 
-  async init(callback) {
 
-    this.startSocket();
 
+  async init(config, callback) {
 
     console.log("init-trtc");
 
-    const config = {
 
-      sdkAppId: 1400653314,
 
-      //   roomId: "8888",
 
-      userId: "123",
 
-    };
 
-    const { sdkAppId, roomId, userId } = config;
 
+    this.startSocket(config);
 
+
 
+    const { sdkAppId, roomId, userId, role } = config;
 
     this.socket.on("getSign", async (data) => {
 
       const userSig = data;
 
       this.userSig = userSig;
 
       try {
 
         const client = TRTC.createClient({
 
-          mode: "rtc",
 
+          mode: "live",
 
           sdkAppId: sdkAppId,
 
           userId: userId,
 
+          role: role,
 
+          useStringRoomId: true,
 
           userSig,
 
         });
 
         this.client = client;
 
-        // await client.join();
 
         callback();
 
       } catch (error) {
 
         console.log("joinRoom error", error);