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

webrtc h264 paler support & resolution codemode

m7s
superxxd 2 years ago
parent
98e9d622d3
commit
baeeb6aaa0
7 changed files with 208 additions and 123 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. 19
      test/main.html
  2. 73
      test/mqtt.js
  3. 3
      test/parameter.js
  4. 2
      test/start.js
  5. 23
      test/styles/style.css
  6. 105
      test/video.js
  7. 62
      test/windows.js

19
test/main.html
View File

@ -35,9 +35,20 @@
<option value="ws">WS</option>
<option value="httpFlv">HTTP-FLV</option>
</select>
<input type="text" id="inputUrl" value="webrtc://192.168.0.18: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"/>
<input type="text" id="inputUrl" value="webrtc://192.168.0.18:1988/live/livestream" style="width:240px"/>
<select id="decodeType" onchange="onSelectDecode()">
<option value="H264">H264</option>
<option value="H265">H265</option>
</select>
<select id="resolutionId" onchange="onSelectResolution()">
<option value="1080">F_1080</option>
<option value="720">F_720</option>
<option value="540">F_540</option>
<option value="360">F_360</option>
</select>
设备名称: <input type="text" name="devicename" id="deviceId" value="4E:7B:BF:71:D6:B4" style="width:80px"/>
拉流名称: <input type="text" name="streamname" id="streamId" value="metartc" style="width:80px"/>
</div>
</div>
<div class="canvasDiv">
@ -80,7 +91,7 @@
</video>
</div>
</div> -->
<!-- <video id="playCanvas" width="1920" height="1080"></video> -->
<canvas id="playCanvas" width="1920" height="1080"></canvas>
<!-- </div> -->
</div>

73
test/mqtt.js
View File

@ -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) {

3
test/parameter.js
View File

@ -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 模式

2
test/start.js
View File

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

23
test/styles/style.css
View File

@ -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 {

105
test/video.js
View File

@ -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;
}
if(!bDecodeH264){
player = new Worker("Player.js");
}
// H265transferworker = new Worker ("")
var el = document.getElementById("btnPlayVideo");
// var currentState = self.player.getState();
@ -75,6 +86,7 @@ function handleVideo() {
// playAudio();
// }
startDeviceSession(player);
if(!bDecodeH264){
player.onmessage = function (evt){
var objData = evt.data;
switch (objData.t) {
@ -97,6 +109,7 @@ function handleVideo() {
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;

62
test/windows.js
View File

@ -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;
}
Write Preview
Loading…
Cancel
Save