Browse Source

modify ui for opt select webrtc mqtt signaling

m7s
superxxd 2 years ago
parent
commit
93d386ed61
  1. 2
      test/decoder_simd.js
  2. 12
      test/h265dc.js
  3. 32
      test/main.html
  4. 30
      test/video.js

2
test/decoder_simd.js

@ -84,7 +84,7 @@ Decoder.prototype.decode=function(){
Module.HEAPU8.set(packet, cacheBuffer);
//void VideoDecoder::decode(string input, unsigned int isKeyFrame, unsigned int timestamp)
Module._decode(cacheBuffer,size,typedArray.iskeyframe,typedArray.pts);
if (cacheBuffer != null) {
if (cacheBuffer !== null) {
Module._free(cacheBuffer);
cacheBuffer = null;
}

12
test/h265dc.js

@ -39,7 +39,7 @@ var h265DC;
// var h265DC4;
var bWorking=false;
var h265dataFrame=[];
var h265data;
var h265data=null;
// var h265data2=null;
// var h265data3=null;
// var h265data4=null;
@ -132,6 +132,10 @@ var receivet1=new Date().getTime();
var bRecH265=false;
function initH265DC(pc,player) {
console.log("initH265DC",Date());
bFindFirstKeyFrame=false;
bRecH265=false;
isKeyFrame=false;
receivet1=new Date().getTime();
h265DC = pc.createDataChannel("h265");
// var ctx = canvas.getContext("2d");
@ -141,7 +145,7 @@ function initH265DC(pc,player) {
if(bRecH265){
if(isString(event.data)) {
console.log("reveive: "+event.data)
if(event.data.indexOf("h265 end")!=-1){
if(event.data.indexOf("h265 end")!==-1){
bRecH265=false;
// console.log("frame ok",":",event.data," len:"+h265datalen)
if(h265datalen>0){
@ -191,7 +195,7 @@ function initH265DC(pc,player) {
return;
}
}else{
if (h265data != null) {
if (h265data !== null) {
h265data=appendBuffer(h265data,event.data);
} else if (event.data.byteLength < expectLength) {
@ -213,7 +217,7 @@ function initH265DC(pc,player) {
if(isString(event.data)) {
let startstring = event.data
// console.log("reveive: "+startstring)
if(startstring.indexOf("h265 start")!=-1){
if(startstring.indexOf("h265 start")!==-1){
console.log(event.data );
const startarray=startstring.split(",");
// startstr := "h265 start ,FrameType:" + frametypestr + ",Packetslen:" + strconv.Itoa(glength) + ",packets:" + strconv.Itoa(count) + ",rem:" + strconv.Itoa(rem)

32
test/main.html

@ -10,6 +10,18 @@
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- <div class="row">
<form action="demo_form.html" method="get">
服务器名称: <input type="text" name="servername" id="serverId" value="rtmpserver1">
拉 流 名 称: <input type="text" name="streamname" id="streamId" value="kvs">
设 备 名 称: <input type="text" name="devicename" id="deviceId" value="0A:2A:BE:6C:03:2E">
设 备 名 称: <input type="text" name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4"><br>
数 据 发 送:<input type="text" name="msgout" id="controlInput" value="msgout"><button type="button" onclick="controlSend()" id="control-send">发送控制消息</button><br>
数 据 接 收:<input type="text" name="msgin" id="control_output" value="msgin"><br>
</form>
</div> -->
<div class="container" id="videoPlayer">
<div class="sideBar">
<span class="no-padding">
@ -18,11 +30,14 @@
<div id="input">
<select id="protocol" onchange="onSelectProto()">
<option value="webrtc">WEBRTC</option>
<option value="mqtt">MQTT</option>
<option value="http">HTTP</option>
<option value="ws">WS</option>
<option value="httpFlv">HTTP-FLV</option>
</select>
<input type="text" id="inputUrl" value="webrtc://192.168.0.4:1988/live/livestream" style="width:300px"/>
设 备 名 称: <input type="text" name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4" style="width:100px"/>
拉 流 名 称: <input type="text" name="streamname" id="streamId" value="metartc" style="width:100px"/>
</div>
</div>
<div class="canvasDiv">
@ -62,23 +77,6 @@
</span>
</div>
</div>
<div><style type="text/css">
div{width:800px;height:280px;margin:10px auto;color:rgb(9, 32, 95);font-size:16px;}
.box1{background: #71a879;text-align: center;}
</style>
<div class="row">
<form action="demo_form.html" method="get">
服务器名称: <input type="text" name="servername" id="serverId" value="rtmpserver1">
拉 流 名 称: <input type="text" name="streamname" id="streamId" value="kvs">
<!-- 设 备 名 称: <input type="text" name="devicename" id="deviceId" value="0A:2A:BE:6C:03:2E"> -->
设 备 名 称: <input type="text" name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4"><br>
数 据 发 送:<input type="text" name="msgout" id="controlInput" value="msgout"><button type="button" onclick="controlSend()" id="control-send">发送控制消息</button><br>
数 据 接 收:<input type="text" name="msgin" id="control_output" value="msgin"><br>
</form>
</div>
</div>
</div>
<div id="footer">Copyright &copy; 2022 xiangxudong.All rights reserved.webrtc datachannel H265 Player Demo 2022</div>
</div>
<!-- <div style="margin: 20px;">

30
test/video.js

@ -26,12 +26,38 @@ function startPlay(url) {
sdk.close();
});
};
function onSelectProto(){
var porotocol=document.getElementById("protocol");
var url=document.getElementById("inputUrl");
switch(porotocol.value){
case "webrtc":
url.value="webrtc://192.168.0.4:1988/live/livestream"
//startPlay(url);
break;
case "mqtt":
url.value="ws://192.168.0.18:8083/mqtt"
break;
default:
return;
}
}
function handleVideo() {
var porotocol=document.getElementById("protocol");
if(porotocol.val==="webrtc"){
var url=document.getElementById("inputUrl");
startPlay(url);
if(url.value===""){
alert("Please input your url addr");
return;
}
switch(porotocol.value){
case "webrtc":
startPlay(url.value);
rtrun;
case "mqtt":
MqttServer=url.value;
break;
default:
return;
}
player = new Worker("Player.js");
// H265transferworker = new Worker ("")

Loading…
Cancel
Save