webrtc h264 paler support & resolution codemode

test/main.html

@@ -35,9 +35,20 @@
                     <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:300px"/>
+                <input type="text" id="inputUrl" value="webrtc://192.168.0.18:1988/live/livestream" style="width:240px"/>
-                设 备  名 称: <input type="text"  name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4" style="width:100px"/>
+                <select id="decodeType" onchange="onSelectDecode()">
-                拉 流  名 称: <input type="text"  name="streamname" id="streamId" value="metartc" style="width:100px"/>
+                    <option value="H264">H264</option>
+                    <option value="H265">H265</option>
+                </select>
+                <select id="resolutionId" onchange="onSelectResolution()">
+                    <option value="1080">F_1080</option>
+                    <option value="720">F_720</option>
+                    <option value="540">F_540</option>
+                    <option value="360">F_360</option>                                       
+                </select>                
+                设备名称: <input type="text"  name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4" style="width:80px"/>
+                拉流名称: <input type="text"  name="streamname" id="streamId" value="metartc" style="width:80px"/>
+
             </div>
         </div>
         <div class="canvasDiv">
@@ -80,7 +91,7 @@
                     </video>
                 </div>
             </div> -->
-              
+               <!-- <video id="playCanvas" width="1920" height="1080"></video> -->
               <canvas id="playCanvas" width="1920" height="1080"></canvas>
             <!-- </div> -->
         </div>

test/mqtt.js

@@ -7,6 +7,15 @@ var t = Date.now();
 function sleep(d){
 	while(Date.now - t <= d);
 }
+// function CreateVideoDiv(el){
+// var parentDiv = document.createElement("div");//创建父div
+// // var parentDiv = document.getElementById('playCanvas')
+// parentDiv.className="webrtcPlayer";//给父div设置class属性
+// el.className="video";
+// el.setAttribute("id","remote-video");
+// parentDiv.appendChild(el);
+// window.document.body.appendChild(parentDiv);
+// }
 var bisOntrack = false;
 function OnTrack(pc){
     if(bisOntrack) return;
@@ -14,21 +23,14 @@ function OnTrack(pc){
     pc.ontrack = function (event) {
         console.log("ontrack", event.track.kind)
         var el = document.createElement(event.track.kind);
-        document.body.appendChild(el);
+        // document.body.appendChild(el);
 
 //属性width height autoplay id type src，也可以通过userVideo.setAttribute('type','video/mp4');来设置
         if(event.track.kind==="video"){
-            const canvasId = "playCanvas";
+            CreateVideoDiv(el);
-            canvas = document.getElementById(canvasId);
+            // window.document.body.appendChild(el);
-            var offsetY = canvas.offsetTop;
+        }else if(event.track.kind==="audio"){
-            var offsetX = canvas.offsetLeft;
+            window.document.body.appendChild(el);
-            el.offsetTop = offsetY;
-            el.offsetLeft = offsetX;
-            el.width = canvas.width;
-            el.height = canvas.height;
-            el.autoplay = true;
-            el.id = 'metaRTCVideo';
-            canvas.style.display="none";
         }
         el.srcObject = event.streams[0];
         el.autoplay = true;
@@ -37,6 +39,36 @@ function OnTrack(pc){
         // el.autoplay = true;
         }
 }
+// function OnTrack(pc){
+//     if(bisOntrack) return;
+//     bisOntrack=true;
+//     pc.ontrack = function (event) {
+//         console.log("ontrack", event.track.kind)
+//         if(event.track.kind==="video"){
+//         trackCache = event.track;
+    
+//         var el = document.getElementById('playCanvas')
+//         resStream = event.streams[0].clone()
+//         resStream.addTrack(trackCache)
+//         el.srcObject = resStream
+//         // KeyMouseCtrl()
+        
+//         }else{
+//         var el = document.createElement(event.track.kind);
+//         el.srcObject = event.streams[0];
+//         el.autoplay = true;
+//         document.getElementById("playCanvas").appendChild(el);
+        
+//           if (el.nodeName === "AUDIO") {
+//             el.oncanplay = () => {
+//                 el.controls = false; // 显示
+//                 el.autoplay = true;
+//             };
+//         }
+//     }   
+//   }
+// }
+
 function getStreamWebrtc(player) {
 
 
@@ -46,27 +78,30 @@ function getStreamWebrtc(player) {
     // initH265Transfer(pc,player);
     if(bAudio) {
     // initAudioDC(pc);
-        const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
+        pc.addTransceiver('audio', { direction: 'recvonly' });
         OnTrack(pc)
     }
     if(bVideo) {
         if(!bDecodeH264){
+            media_mode= "h265";
            initH265DC(pc,player);
         }else{
-            const { receivervideo } = pc.addTransceiver('video', { direction: 'recvonly' });
+            media_mode= "h264";
-            receivervideo.playoutDelayHint = 0.0;
+            pc.addTransceiver('video', { direction: 'recvonly' });
+            // receivervideo.playoutDelayHint = 0;
             OnTrack(pc)
         }
     }
 	// Populate SDP field when finished gathering
 	pc.oniceconnectionstatechange = e => {
         log(pc.iceConnectionState)
-
+        if(!bDecodeH264){
                 var state ={
                     t: kconnectStatusResponse,
                     s: pc.connectionState
                 }
                 player.postMessage(state)
+        }
 
     }
 
@@ -89,6 +124,8 @@ function getStreamWebrtc(player) {
                         }
                         msgdata["rtspaddr"] = rtspaddr;//document.getElementById("rtspId").value //KVMRTSPADDR;
                     }
+                    msgdata["resolution"]=p_Resolution;//document.getElementById("resolutionId").value;
+                    
                 }
                 if (bAudio) {
                     msgdata["audio"] = true;
@@ -170,7 +207,9 @@ initMqtt = function(player) {
 
                     let answer = JSON.parse(answerjsonstr);
                     console.log("answer:",answer);
-
+                    for (const receiver of pc.getReceivers()) {
+                        receiver.playoutDelayHint = 0;
+                      }
                     pc.setRemoteDescription(new RTCSessionDescription(answer));
                     // btnOpen();
                 } catch (e) {

test/parameter.js

@@ -44,7 +44,8 @@ var subtopic = "server_cmd/" +SERVER_NAME+ "/"+ WEB_SEQID + "/#";//+"/"+deviceID
 var pubtopic = "server_control" + "/" + SERVER_NAME;
 let bVideo=true;
 let bAudio=true;
-let bDecodeH264 = false; //H264直接用webrtc
+let bDecodeH264 = true; //H264直接用webrtc
+var p_Resolution ="1080";
 var bmqttStarted=false; 
 var bWebrtc = false;
 var bUseWebrtcP2P =true;//启动webrtc p2p 模式

test/start.js

@@ -17,7 +17,7 @@ importScripts("./audiodc.js")
 importScripts("./h265dc.js")
 importScripts("https://cdn.bootcdn.net/ajax/libs/mqtt/2.18.8/mqtt.min.js")
 importScripts("adapter-7.4.0.min.js")
-// importScripts("srs.sdk.p2p.js")
+importScripts("windows.js")
 importScripts("http.js")
 importScripts("metaRTC.js")
 // importScripts("miniAjax.js")

test/styles/style.css

@@ -20,27 +20,36 @@
 #btnFullscreen:hover {
     transform: scale(1.3);
 }
-#PlayerParameter {
+.video {
-    width: 852px;
+
-    height: 300px;
+    height: 100%;
-    background-color: rgb(105, 100, 100);
+    
+    width: 100%;
+    
+    display: block;
+    
+    }
+.webrtcPlayer {
+    width: 848px;
+    height: 448px;
+    background-color: rgb(14, 13, 13);
     border: 2px solid rgba(0, 0, 0, 0.9);
     position: absolute;
     left: 50%;
-    top: 50%;
+    top: 51.5%;
     transform: translate(-50%,-50%);
     z-index: 10;
 }
 #videoPlayer {
     width: 852px;
-    height: 536px;
+    height: 480px;
     background-color: white;
     border: 2px solid rgba(0, 0, 0, 0.9);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
-    z-index: 10;
+    z-index: 9;
 }
 
 #timeTrack {

test/video.js

@@ -11,23 +11,32 @@ function startPlay(url) {
      return;
    } 
    StartMetaRTC(url)
-//     // Close PC when user replay.
-//     if (sdk) {
-//         sdk.close();
-//     }
-//     sdk = new SrsRtcPlayerAsync();
 
-//     // https://webrtc.org/getting-started/remote-streams
-//     // $('#rtc_media_player').prop('srcObject', sdk.stream);
-// //         var url = $("#txt_url").val();
-// //    // parse_webrtc(url);
-//     sdk.play(url.value).then(function(session){
-//          console.log("play url ",url.value);
-//         //  $('#datachannel_form').show();
-//     }).catch(function (reason) {
-//         sdk.close();
-//     });
 };
+function onSelectDecode(){
+    var decodetype=document.getElementById("decodeType");
+    if(decodetype.value==="H264"){
+        bDecodeH264=true;
+    }else{
+        bDecodeH264=false;
+    }
+}
+function onSelectResolution() {
+    // switch resolution {
+    //     case "1080":
+    //         resolut = 1
+    //     case "720":
+    //         resolut = 2
+    //     case "540":
+    //         resolut = 3
+    //     case "360":
+    //         resolut = 4
+    //     default:
+    //         resolut = 2
+    //     }
+    var resolution=document.getElementById("resolutionId");    
+    p_Resolution=resolution.value;
+}
 function onSelectProto(){
     var porotocol=document.getElementById("protocol");
     var url=document.getElementById("inputUrl");
@@ -61,7 +70,9 @@ function handleVideo() {
         default:
             return;    
     }
+    if(!bDecodeH264){
        player = new Worker("Player.js");
+    }  
     // H265transferworker = new Worker ("")
     var el = document.getElementById("btnPlayVideo");
     // var currentState = self.player.getState();
@@ -75,6 +86,7 @@ function handleVideo() {
     //     playAudio();
     // }
     startDeviceSession(player);
+    if(!bDecodeH264){
         player.onmessage = function (evt){
             var objData = evt.data;
             switch (objData.t) {
@@ -97,6 +109,7 @@ function handleVideo() {
             decoder_type: DECODER_TYPE
         };
         player.postMessage(req);
+    }
     el.src = "img/pause.png";
 
 }
@@ -106,12 +119,14 @@ function netstatus(status){
    }
 }
 function stopDecoder(){
+    if(bDecodeH264) return;
     var req = {
         t: kendPlayerCoderReq,
     };
     player.postMessage(req);
 }
 function stopVideo(){
+
     stopDecoder();
     endWebrtc();
     endMqtt();
@@ -124,6 +139,10 @@ function stopVideo(){
 }
 
 function fullscreen(){
+    if(bDecodeH264){
+        FullScreen();
+         return;
+    }
     if(!webglPlayer) {
         const canvasId = "playCanvas";
         canvas = document.getElementById(canvasId);
@@ -136,63 +155,7 @@ function fullscreen(){
 //用missle解码器
 // var USE_MISSILE = false;
 var webt1=new Date().getTime();
-// function webgldisplayVideoFrame(obj) {
-//     switch(DECODER_TYPE){
-
-//     //     // var obj = {
-//     //     //     data: y,u,v,
-//     //     //     stride_y, stride_u, stride_v, 
-//     //     //     width,
-//     //     //     height
-//     //     // }
-//     //     // WebGLPlayer.prototype.renderFrameyuv = function ( 
-//     //     //     videoFrameY, videoFrameB, videoFrameR,
-//     //     //     width, height)
-//     //     var videoFrameY =  new Uint8Array(obj.y);
-//     //     var videoFrameB =  new Uint8Array(obj.u);
-//     //     var videoFrameR =  new Uint8Array(obj.v);
-//     //     var width = obj.width;
-//     //     var height = obj.height;
-//     //     if(!webglPlayer) {
-//     //         const canvasId = "playCanvas";
-//     //         canvas = document.getElementById(canvasId);
-//     //         webglPlayer = new WebGLPlayer(canvas, {
-//     //             preserveDrawingBuffer: false
-//     //         });
-//     //     }
-    
-//     //     const t2=new Date().getTime()-webt1;   
-//     //     console.log("display time:"+t2+" width:"+width+" height"+height);    
-//     //     webglPlayer.renderFrameyuv( 
-//     //             videoFrameY, videoFrameB, videoFrameR,
-//     //             width, height);
-//     //    webt1 = new Date().getTime()      
-//     //    break;        
-    
-//     case kDecoder_decodeer_js:
-//     case kDecoder_prod_h265_wasm_combine_js:
-//         var data = new Uint8Array(obj.data);
-//         var width = obj.width;
-//         var height = obj.height;
-//         var yLength = width * height;
-//         var uvLength = (width / 2) * (height / 2);
-//         if(!webglPlayer) {
-//             const canvasId = "playCanvas";
-//             canvas = document.getElementById(canvasId);
-//             webglPlayer = new WebGLPlayer(canvas, {
-//                 preserveDrawingBuffer: false
-//             });
-//         }
 
-//         const t2=new Date().getTime()-webt1;
-//         console.log("display time:"+t2+" width:"+width+" height"+height+" yLength"+yLength+" uvLength"+uvLength);
-//         webglPlayer.renderFrame(data, width, height, yLength, uvLength);
-//         webt1 = new Date().getTime();
-//     default:
-
-//         break;
-//    }
-// }
 function webgldisplayVideoFrame(obj) {
     var data = new Uint8Array(obj.data);
     var width = obj.width;

test/windows.js

@@ -0,0 +1,62 @@
+
+
+function CreateVideoDiv(el){
+    var parentDiv = document.createElement("div");//创建父div
+    // var parentDiv = document.getElementById('playCanvas')
+    parentDiv.className="webrtcPlayer";//给父div设置class属性
+    // parentDiv.offsetTop=parentDiv.offsetTop+50;
+    el.className="video";
+    // el.offsetTop=parentDiv.offsetTop+50;
+    el.setAttribute("id","remote-video");
+    parentDiv.appendChild(el);
+    window.document.body.appendChild(parentDiv);
+}
+function FullScreen() {
+
+        var ele = document.getElementById("remote-video");
+
+        if (ele.requestFullscreen) {
+
+            ele.requestFullscreen();
+            ele.controls = false;
+            ele.controlsList = "nodownload noplaybackrate nofullscreen noremoteplayback";
+
+        } else if (ele.mozRequestFullScreen) {
+
+            ele.mozRequestFullScreen();
+
+        } else if (ele.webkitRequestFullScreen) {
+
+            ele.webkitRequestFullScreen();
+            ele.controls = false;
+            ele.controlsList = "nodownload noplaybackrate nofullscreen noremoteplayback";
+
+        }
+
+        ele.controls = false;
+
+}
+
+//退出全屏
+
+function exitFullscreen() {
+
+    var de =document.getElementById("remote-video");
+    if (de.isFullScreen) {
+        return
+    }
+    if (de.exitFullscreen) {
+
+        de.exitFullscreen();
+
+    } else if (de.mozCancelFullScreen) {
+
+        de.mozCancelFullScreen();
+
+    } else if (de.webkitCancelFullScreen) {
+
+        de.webkitCancelFullScreen();
+
+    }
+    return false;
+}