fajiao
/
webrtc_H265player
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

modify ui for opt select webrtc mqtt signaling

m7s
superxxd 2 years ago
parent
bd5424f9a6
commit
93d386ed61
4 changed files with 55 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

12
test/h265dc.js
View File

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

32
test/main.html
View File

@ -10,6 +10,18 @@
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body> <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="container" id="videoPlayer">
<div class="sideBar"> <div class="sideBar">
<span class="no-padding"> <span class="no-padding">
@ -18,11 +30,14 @@
<div id="input"> <div id="input">
<select id="protocol" onchange="onSelectProto()"> <select id="protocol" onchange="onSelectProto()">
<option value="webrtc">WEBRTC</option> <option value="webrtc">WEBRTC</option>
<option value="mqtt">MQTT</option>
<option value="http">HTTP</option> <option value="http">HTTP</option>
<option value="ws">WS</option> <option value="ws">WS</option>
<option value="httpFlv">HTTP-FLV</option> <option value="httpFlv">HTTP-FLV</option>
</select> </select>
<input type="text" id="inputUrl" value="webrtc://192.168.0.4:1988/live/livestream" style="width:300px"/> <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> </div>
<div class="canvasDiv"> <div class="canvasDiv">
@ -62,23 +77,6 @@
</span> </span>
</div> </div>
</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 id="footer">Copyright &copy; 2022 xiangxudong.All rights reserved.webrtc datachannel H265 Player Demo 2022</div>
</div> </div>
<!-- <div style="margin: 20px;"> <!-- <div style="margin: 20px;">

30
test/video.js
View File

@ -26,12 +26,38 @@ function startPlay(url) {
sdk.close(); 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() { function handleVideo() {
var porotocol=document.getElementById("protocol"); var porotocol=document.getElementById("protocol");
if(porotocol.val==="webrtc"){
var url=document.getElementById("inputUrl"); 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; rtrun;
case "mqtt":
MqttServer=url.value;
break;
default:
return;
} }
player = new Worker("Player.js"); player = new Worker("Player.js");
// H265transferworker = new Worker ("") // H265transferworker = new Worker ("")

Write Preview
Loading…
Cancel
Save