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 @@ WS HTTP-FLV - - + + + F_1080 F_720 @@ -62,38 +63,7 @@ - - - - - - + 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");