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