From fbd79c75f4f54972063f970441ba1f29949e1b4b Mon Sep 17 00:00:00 2001
From: zhangdongfang <zhangdongfang@xinnongcloud.com>
Date: Tue, 20 Sep 2022 15:48:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAm7s=E5=88=86=E6=94=AF,?=
 =?UTF-8?q?=E7=94=A8=E4=BB=A5=E6=92=AD=E6=94=BEm7s=E6=B5=81,=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E5=AF=B9=E5=BA=94m7s=20v3=E6=89=A9=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/main.html        | 40 +++----------------
 test/metaRTC.js       | 92 +++++++++++++++++++++++++------------------
 test/styles/style.css | 13 +++++-
 test/video.js         | 48 ++++++++++++++++------
 test/windows.js       | 13 +++++-
 5 files changed, 118 insertions(+), 88 deletions(-)

diff --git a/test/main.html b/test/main.html
index a447a6b..a1ac2cd 100644
--- a/test/main.html
+++ b/test/main.html
@@ -35,11 +35,12 @@
                     <option value="ws">WS</option>
                     <option value="httpFlv">HTTP-FLV</option>
                 </select>
-                <input type="text" id="inputUrl" value="webrtc://192.168.0.18:1988/live/livestream" style="width:240px"/>
-                <select id="decodeType" onchange="onSelectDecode()">
+                <!-- <input type="text" id="inputUrl" value="webrtc://192.168.0.18:1988/live/livestream" style="width:240px"/> -->
+                <input type="text" id="inputUrl" value="http://127.0.0.1:8081/api/webrtc/playpro?streamPath=live/livestream" style="width:240px"/>
+<!--                 <select id="decodeType" onchange="onSelectDecode()">
                     <option value="H264">H264</option>
                     <option value="H265">H265</option>
-                </select>
+                </select> -->
                 <select id="resolutionId" onchange="onSelectResolution()">
                     <option value="1080">F_1080</option>
                     <option value="720">F_720</option>
@@ -62,38 +63,7 @@
                 <span></span>
                 <span></span>
             </div>
-            <!-- <canvas id="playCanvas" width="852" height="480"></canvas>
-             -->
-             <!-- <div style="margin-top: 10px"> -->
-              <!-- <div class="video-main">
-                <br><video controlsList="nodownload noplaybackrate nofullscreen noremoteplayback"
-                        disablePictureInPicture id="remote-video" autoplay class="m-0 p-0"
-                        style="position: relative; top: 0; left: 0; z-index: 1;width:100%; height:100%;object-fit:fill">
-                        <style type="text/css">
-                            video::-webkit-media-controls {
-                                display: none !important;
-                            }
-    
-                            /*video隐藏全屏按钮*/
-                            video::-webkit-media-controls-fullscreen-button {
-                                display: none !important;
-                            }
-    
-                            /*video隐藏音量控制*/
-                            video::-webkit-media-controls-volume-control-container {
-                                display: none !important;
-                            }
-    
-                            video::-webkit-progress-bar {
-                                display: none !important;
-                            }
-                        </style>
-                    </video>
-                </div>
-            </div> -->
-               <!-- <video id="playCanvas" width="1920" height="1080"></video> -->
-              <canvas id="playCanvas" width="1920" height="1080"></canvas>
-            <!-- </div> -->
+            <!-- <canvas id="playCanvas" width="1920" height="1080"></canvas> -->
         </div>
         <div class="sideBar">
             <span class="no-padding">
diff --git a/test/metaRTC.js b/test/metaRTC.js
index 965b48f..c65bee2 100644
--- a/test/metaRTC.js
+++ b/test/metaRTC.js
@@ -1,6 +1,7 @@
    // Internal APIs.
    var  __internal = {
     defaultPath: '/rtc/v1/play/',
+    // defaultPath: '/api/webrtc/playpro',
     prepareUrl: function (webrtcUrl) {
         var urlObject = self.__internal.parse(webrtcUrl);
         var schema="http:";
@@ -136,47 +137,75 @@
 };
 
 var datachannel=null;
-function StartMetaRTC(url){
+function StartMetaRTC(url,player){
     var conf = __internal.prepareUrl(url);
-    pc = new RTCPeerConnection({
-        iceServers: ICEServermetaRTC
-});
 
-if(bAudio) {
+    pc = new RTCPeerConnection(null);
 
-    const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
-    OnTrack(pc)
-}
-if(bVideo) {
+    // if(bAudio) {
 
-    const { receivervideo } = pc.addTransceiver('video', { direction: 'recvonly' });
-    OnTrack(pc)
+    //     const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
+    //     OnTrack(pc)
+    // }
+    if(bVideo) {
+        initH265DC(pc,player);
+        if(!bDecodeH264){
+            media_mode= "h265";
+            // H265transferworker = new Worker ("")
+        }else{
+            media_mode= "h264";            
+        }
+        const { receivervideo } = pc.addTransceiver('video', { direction: 'recvonly' });
+        // OnTrack(pc)
+
+    }
 
-}
-// Populate SDP field when finished gathering
-pc.oniceconnectionstatechange = e => {
-    log(pc.iceConnectionState)
-}
 
-pc.onicecandidate = event => {
+    // Populate SDP field when finished gathering
+    pc.oniceconnectionstatechange = e => {
+        log(pc.iceConnectionState)
+        if(!bDecodeH264){
+            var state ={
+                t: kconnectStatusResponse,
+                s: pc.connectionState
+            }
+            player.postMessage(state)
+        }
+    }
+
+    pc.onicecandidate = event => {
         if (event.candidate === null) {
             var offer=pc.localDescription
             var data = {
-                api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl,
-                clientip: null, sdp: offer.sdp
+                api: conf.apiUrl, 
+                tid: conf.tid, 
+                streamurl: conf.streamUrl,
+                clientip: null, 
+                sdp: offer.sdp,
+                // type: "answer"
+                type: "offer"
             };
             console.log("Generated offer: ", data);
+            console.log("Generated conf: ", conf);
 
             ajax({ 
                 type:"POST", 
-                url:conf.apiUrl, 
+                // url:conf.apiUrl+conf.urlObject.app+"/"+conf.urlObject.stream, 
+                url:conf.streamUrl, 
                 dataType:"json", 
-                data:offer.sdp+"}", 
+                data:JSON.stringify(data), 
                 beforeSend:function(){ 
                   //some js code 
                 }, 
                 success:function(msg){ 
-                  console.log(msg) 
+                  if(!msg.isH265){
+                     media_mode= "h264";
+                     bDecodeH264 = true
+                     stopH265()
+                     OnTrack(pc)
+                  }else{
+                    CreateCanvas()
+                  }
                   pc.setRemoteDescription(new RTCSessionDescription({type: 'answer', sdp: msg.sdp}));
                 }, 
                 error:function(){ 
@@ -186,22 +215,9 @@ pc.onicecandidate = event => {
 
         }
     }
-	datachannel=self.pc.createDataChannel('chat');
-
-	datachannel.onopen = function(event) {
-		console.log("datachannel onopen: ", event);
-	}
-	datachannel.onmessage = function(event) {
-	  console.log("receive message: ", event.data);
-	//   $('#datachannel_recv').val(event.data);
-	}
-	datachannel.onerror=function(event) {
-	  console.log("datachannel error: ", event.data);
-	}
-	datachannel.onclose=function(event) {
-	  console.log("datachannel close: ");
-	}
-pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)   
+    
+    pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)   
+
 
 }
 
diff --git a/test/styles/style.css b/test/styles/style.css
index 0ec077c..70f1e11 100644
--- a/test/styles/style.css
+++ b/test/styles/style.css
@@ -29,7 +29,7 @@
     display: block;
     
     }
-.webrtcPlayer {
+/*.webrtcPlayer {
     width: 848px;
     height: 448px;
     background-color: rgb(14, 13, 13);
@@ -39,6 +39,17 @@
     top: 51.5%;
     transform: translate(-50%,-50%);
     z-index: 10;
+}*/
+.webrtcPlayer {
+    width: 852px;
+    height: 480px;
+    background-color: rgb(14, 13, 13);
+    border: 2px solid rgba(0, 0, 0, 0.9);
+    /* position: absolute; */
+    /* left: 50%; */
+    /* top: 51.5%; */
+    /* transform: translate(-50%,-50%); */
+    z-index: 10;
 }
 #videoPlayer {
     width: 852px;
diff --git a/test/video.js b/test/video.js
index dbab533..7144a46 100644
--- a/test/video.js
+++ b/test/video.js
@@ -6,21 +6,43 @@ var sdk = null; // Global handler to do cleanup when replaying.
 // var DECODER_TYPE = kDecoder_prod_h265_wasm_combine_js;
 function startPlay(url) {
        
-   if(url===undefined||url.value===""){
-    alert("url is null")
-     return;
-   } 
-   StartMetaRTC(url)
+    if(url===undefined||url.value===""){
+        alert("url is null")
+        return;
+    }
+    player = new Worker("Player.js");
+ 
+    var el = document.getElementById("btnPlayVideo");
+    StartMetaRTC(url,player)
 
-};
-function onSelectDecode(){
-    var decodetype=document.getElementById("decodeType");
-    if(decodetype.value==="H264"){
-        bDecodeH264=true;
-    }else{
-        bDecodeH264=false;
+
+    player.onmessage = function (evt){
+        var objData = evt.data;
+        switch (objData.t) {
+        case kplayeVideoFrame:
+            if(DECODER_TYPE===kDecoder_missile_decoder_js){
+                missle_renderFrame(objData.d)
+            }else{
+                webgldisplayVideoFrame(objData.d);
+            }
+            break;
+        case kplaterNetStatus:
+            netstatus(objData.s)
+            break;    
+        default:
+            break;
+        }    
     }
-}
+    var req = {
+        t: kstartPlayerCoderReq,
+        decoder_type: DECODER_TYPE
+    };
+    player.postMessage(req);
+
+    el.src = "img/pause.png";
+
+};
+
 function onSelectResolution() {
     // switch resolution {
     //     case "1080":
diff --git a/test/windows.js b/test/windows.js
index 8d73729..096d758 100644
--- a/test/windows.js
+++ b/test/windows.js
@@ -9,8 +9,19 @@ function CreateVideoDiv(el){
     // el.offsetTop=parentDiv.offsetTop+50;
     el.setAttribute("id","remote-video");
     parentDiv.appendChild(el);
-    window.document.body.appendChild(parentDiv);
+    body = document.getElementsByClassName("canvasDiv")[0]
+    // window.document.body.appendChild(parentDiv);
+    body.appendChild(parentDiv);
 }
+function CreateCanvas(){
+    var parentDiv = document.createElement("canvas");//创建父div
+    parentDiv.setAttribute("width",1920)
+    parentDiv.setAttribute("height",1080)
+    parentDiv.id = "playCanvas"
+    body = document.getElementsByClassName("canvasDiv")[0]
+    body.appendChild(parentDiv);
+}
+
 function FullScreen() {
 
         var ele = document.getElementById("remote-video");