You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

255 lines
8.1 KiB

2 years ago
var webglPlayer, canvas, videoWidth, videoHeight, yLength, uvLength;
var player=null;
var sdk = null; // Global handler to do cleanup when replaying.
// var DECODER_TYPE = kDecoder_decodeer_js;
// var DECODER_TYPE = kDecoder_prod_h265_wasm_combine_js;
function startPlay(url) {
if(url===undefined||url.value===""){
alert("url is null")
return;
}
StartMetaRTC(url,player)
// // 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 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;
}
}
2 years ago
function handleVideo() {
var porotocol=document.getElementById("protocol");
var url=document.getElementById("inputUrl");
if(url.value===""){
alert("Please input your url addr");
return;
}
switch(porotocol.value){
case "webrtc":
startPlay(url.value);
return;
case "mqtt":
MqttServer=url.value;
break;
default:
return;
}
2 years ago
player = new Worker("Player.js");
2 years ago
// H265transferworker = new Worker ("")
2 years ago
var el = document.getElementById("btnPlayVideo");
// var currentState = self.player.getState();
// if (currentState == playerStatePlaying) {
// el.src = "img/play.png";
// } else {
// el.src = "img/pause.png";
// }
// if(bAudio){
// setAudioDecoder(1) //mse 0 contex
// playAudio();
// }
2 years ago
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);
}
2 years ago
break;
2 years ago
case kplaterNetStatus:
netstatus(objData.s)
break;
2 years ago
default:
break;
}
}
var req = {
t: kstartPlayerCoderReq,
decoder_type: DECODER_TYPE
2 years ago
};
player.postMessage(req);
2 years ago
el.src = "img/pause.png";
2 years ago
}
2 years ago
function netstatus(status){
if(status==="disconnected"){
stopVideo();
}
}
2 years ago
function stopDecoder(){
var req = {
t: kendPlayerCoderReq,
};
player.postMessage(req);
}
2 years ago
function stopVideo(){
2 years ago
stopDecoder();
2 years ago
endWebrtc();
endMqtt();
2 years ago
var el = document.getElementById("btnPlayVideo");
// var currentState = self.player.getState();
// if (currentState == playerStatePlaying) {
el.src = "img/play.png";
// } else {
// el.src = "img/pause.png";
}
function fullscreen(){
if(!webglPlayer) {
const canvasId = "playCanvas";
canvas = document.getElementById(canvasId);
webglPlayer = new WebGLPlayer(canvas, {
preserveDrawingBuffer: false
});
}
webglPlayer.fullscreen();
2 years ago
}
//用missle解码器
// var USE_MISSILE = false;
2 years ago
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;
// }
// }
2 years ago
function webgldisplayVideoFrame(obj) {
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()
}
function missle_renderFrame(obj){
/*
var obj = {
data: y,u,v,
stride_y, stride_u, stride_v,
width,
height
}
var objData = {
t: kVideoFrame_Missle,
s: pts,
d: obj
};
*/
let videoFrameY = obj.data.y;
let videoFrameB = obj.data.u;
let videoFrameR = obj.data.v;
let width = obj.data.width;
let height = obj.data.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()
// gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// gl.clearColor(0.0, 0.0, 0.0, 0.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.y.fill(width, height, videoFrameY);
// gl.u.fill(width >> 1, height >> 1, videoFrameB);
// gl.v.fill(width >> 1, height >> 1, videoFrameR);
// gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
2 years ago
}