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
Split 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);
//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
View File

@ -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
View File

@ -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
View File

@ -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 ("")

Write Preview
Loading…
Cancel
Save