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

创建m7s分支,用以播放m7s流,需要对应m7s v3扩展开发

m7s
zhangdongfang 2 years ago
parent
61460bcec0
commit
fbd79c75f4
5 changed files with 118 additions and 88 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. 40
      test/main.html
  2. 74
      test/metaRTC.js
  3. 13
      test/styles/style.css
  4. 36
      test/video.js
  5. 13
      test/windows.js

40
test/main.html
View File

@ -35,11 +35,12 @@
<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:240px"/>
<select id="decodeType" onchange="onSelectDecode()">
<!-- <input type="text" id="inputUrl" value="webrtc://192.168.0.18:1988/live/livestream" style="width:240px"/> -->
<input type="text" id="inputUrl" value="http://127.0.0.1:8081/api/webrtc/playpro?streamPath=live/livestream" style="width:240px"/>
<!-- <select id="decodeType" onchange="onSelectDecode()">
<option value="H264">H264</option>
<option value="H265">H265</option>
</select>
</select> -->
<select id="resolutionId" onchange="onSelectResolution()">
<option value="1080">F_1080</option>
<option value="720">F_720</option>
@ -62,38 +63,7 @@
<span></span>
<span></span>
</div>
<!-- <canvas id="playCanvas" width="852" height="480"></canvas>
-->
<!-- <div style="margin-top: 10px"> -->
<!-- <div class="video-main">
<br><video controlsList="nodownload noplaybackrate nofullscreen noremoteplayback"
disablePictureInPicture id="remote-video" autoplay class="m-0 p-0"
style="position: relative; top: 0; left: 0; z-index: 1;width:100%; height:100%;object-fit:fill">
<style type="text/css">
video::-webkit-media-controls {
display: none !important;
}
/*video隐藏全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
/*video隐藏音量控制*/
video::-webkit-media-controls-volume-control-container {
display: none !important;
}
video::-webkit-progress-bar {
display: none !important;
}
</style>
</video>
</div>
</div> -->
<!-- <video id="playCanvas" width="1920" height="1080"></video> -->
<canvas id="playCanvas" width="1920" height="1080"></canvas>
<!-- </div> -->
<!-- <canvas id="playCanvas" width="1920" height="1080"></canvas> -->
</div>
<div class="sideBar">
<span class="no-padding">

74
test/metaRTC.js
View File

@ -1,6 +1,7 @@
// Internal APIs.
var __internal = {
defaultPath: '/rtc/v1/play/',
// defaultPath: '/api/webrtc/playpro',
prepareUrl: function (webrtcUrl) {
var urlObject = self.__internal.parse(webrtcUrl);
var schema="http:";
@ -136,47 +137,75 @@
};
var datachannel=null;
function StartMetaRTC(url){
function StartMetaRTC(url,player){
var conf = __internal.prepareUrl(url);
pc = new RTCPeerConnection({
iceServers: ICEServermetaRTC
});
if(bAudio) {
pc = new RTCPeerConnection(null);
const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
OnTrack(pc)
}
if(bVideo) {
// if(bAudio) {
// const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
// OnTrack(pc)
// }
if(bVideo) {
initH265DC(pc,player);
if(!bDecodeH264){
media_mode= "h265";
// H265transferworker = new Worker ("")
}else{
media_mode= "h264";
}
const { receivervideo } = pc.addTransceiver('video', { direction: 'recvonly' });
OnTrack(pc)
// 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)
}
}
pc.onicecandidate = event => {
if (event.candidate === null) {
var offer=pc.localDescription
var data = {
api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl,
clientip: null, sdp: offer.sdp
api: conf.apiUrl,
tid: conf.tid,
streamurl: conf.streamUrl,
clientip: null,
sdp: offer.sdp,
// type: "answer"
type: "offer"
};
console.log("Generated offer: ", data);
console.log("Generated conf: ", conf);
ajax({
type:"POST",
url:conf.apiUrl,
// url:conf.apiUrl+conf.urlObject.app+"/"+conf.urlObject.stream,
url:conf.streamUrl,
dataType:"json",
data:offer.sdp+"}",
data:JSON.stringify(data),
beforeSend:function(){
//some js code
},
success:function(msg){
console.log(msg)
if(!msg.isH265){
media_mode= "h264";
bDecodeH264 = true
stopH265()
OnTrack(pc)
}else{
CreateCanvas()
}
pc.setRemoteDescription(new RTCSessionDescription({type: 'answer', sdp: msg.sdp}));
},
error:function(){
@ -186,22 +215,9 @@ pc.onicecandidate = event => {
}
}
datachannel=self.pc.createDataChannel('chat');
datachannel.onopen = function(event) {
console.log("datachannel onopen: ", event);
}
datachannel.onmessage = function(event) {
console.log("receive message: ", event.data);
// $('#datachannel_recv').val(event.data);
}
datachannel.onerror=function(event) {
console.log("datachannel error: ", event.data);
}
datachannel.onclose=function(event) {
console.log("datachannel close: ");
}
pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
}

13
test/styles/style.css
View File

@ -29,7 +29,7 @@
display: block;
}
.webrtcPlayer {
/*.webrtcPlayer {
width: 848px;
height: 448px;
background-color: rgb(14, 13, 13);
@ -39,6 +39,17 @@
top: 51.5%;
transform: translate(-50%,-50%);
z-index: 10;
}*/
.webrtcPlayer {
width: 852px;
height: 480px;
background-color: rgb(14, 13, 13);
border: 2px solid rgba(0, 0, 0, 0.9);
/* position: absolute; */
/* left: 50%; */
/* top: 51.5%; */
/* transform: translate(-50%,-50%); */
z-index: 10;
}
#videoPlayer {
width: 852px;

36
test/video.js
View File

@ -10,17 +10,39 @@ function startPlay(url) {
alert("url is null")
return;
}
StartMetaRTC(url)
player = new Worker("Player.js");
};
function onSelectDecode(){
var decodetype=document.getElementById("decodeType");
if(decodetype.value==="H264"){
bDecodeH264=true;
var el = document.getElementById("btnPlayVideo");
StartMetaRTC(url,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{
bDecodeH264=false;
webgldisplayVideoFrame(objData.d);
}
break;
case kplaterNetStatus:
netstatus(objData.s)
break;
default:
break;
}
}
var req = {
t: kstartPlayerCoderReq,
decoder_type: DECODER_TYPE
};
player.postMessage(req);
el.src = "img/pause.png";
};
function onSelectResolution() {
// switch resolution {
// case "1080":

13
test/windows.js
View File

@ -9,8 +9,19 @@ function CreateVideoDiv(el){
// el.offsetTop=parentDiv.offsetTop+50;
el.setAttribute("id","remote-video");
parentDiv.appendChild(el);
window.document.body.appendChild(parentDiv);
body = document.getElementsByClassName("canvasDiv")[0]
// window.document.body.appendChild(parentDiv);
body.appendChild(parentDiv);
}
function CreateCanvas(){
var parentDiv = document.createElement("canvas");//创建父div
parentDiv.setAttribute("width",1920)
parentDiv.setAttribute("height",1080)
parentDiv.id = "playCanvas"
body = document.getElementsByClassName("canvasDiv")[0]
body.appendChild(parentDiv);
}
function FullScreen() {
var ele = document.getElementById("remote-video");

Write Preview
Loading…
Cancel
Save