From baeeb6aaa0d0882d6c97cf440a0281689432dd33 Mon Sep 17 00:00:00 2001 From: superxxd Date: Fri, 2 Sep 2022 11:39:03 +0800 Subject: [PATCH] webrtc h264 paler support & resolution codemode --- test/main.html | 19 ++++-- test/mqtt.js | 73 ++++++++++++++++----- test/parameter.js | 3 +- test/start.js | 2 +- test/styles/style.css | 23 +++++-- test/video.js | 149 ++++++++++++++++-------------------------- test/windows.js | 62 ++++++++++++++++++ 7 files changed, 208 insertions(+), 123 deletions(-) create mode 100644 test/windows.js diff --git a/test/main.html b/test/main.html index c2be0ed..a447a6b 100644 --- a/test/main.html +++ b/test/main.html @@ -35,9 +35,20 @@ - - 设 备 名 称: - 拉 流 名 称: + + + + 设备名称: + 拉流名称: +
@@ -80,7 +91,7 @@
--> - + diff --git a/test/mqtt.js b/test/mqtt.js index 8e67e04..cb37c3d 100644 --- a/test/mqtt.js +++ b/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"; - canvas = document.getElementById(canvasId); - var offsetY = canvas.offsetTop; - var offsetX = canvas.offsetLeft; - el.offsetTop = offsetY; - el.offsetLeft = offsetX; - el.width = canvas.width; - el.height = canvas.height; - el.autoplay = true; - el.id = 'metaRTCVideo'; - canvas.style.display="none"; + CreateVideoDiv(el); + // window.document.body.appendChild(el); + }else if(event.track.kind==="audio"){ + window.document.body.appendChild(el); } 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' }); - receivervideo.playoutDelayHint = 0.0; + media_mode= "h264"; + 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) { diff --git a/test/parameter.js b/test/parameter.js index 83471de..c368e51 100644 --- a/test/parameter.js +++ b/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 模式 diff --git a/test/start.js b/test/start.js index fe9a27d..b3a424a 100644 --- a/test/start.js +++ b/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") diff --git a/test/styles/style.css b/test/styles/style.css index a942dd0..0ec077c 100644 --- a/test/styles/style.css +++ b/test/styles/style.css @@ -20,27 +20,36 @@ #btnFullscreen:hover { transform: scale(1.3); } -#PlayerParameter { - width: 852px; - height: 300px; - background-color: rgb(105, 100, 100); +.video { + + height: 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 { diff --git a/test/video.js b/test/video.js index b193bcb..cd4c36e 100644 --- a/test/video.js +++ b/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; } - player = new Worker("Player.js"); + if(!bDecodeH264){ + player = new Worker("Player.js"); + } // H265transferworker = new Worker ("") var el = document.getElementById("btnPlayVideo"); // var currentState = self.player.getState(); @@ -75,28 +86,30 @@ function handleVideo() { // playAudio(); // } startDeviceSession(player); - 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; - } + if(!bDecodeH264){ + 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); } - var req = { - t: kstartPlayerCoderReq, - 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; diff --git a/test/windows.js b/test/windows.js new file mode 100644 index 0000000..8d73729 --- /dev/null +++ b/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; +} \ No newline at end of file