Browse Source

add rotate

worker
wancheng1990 4 years ago
parent
commit
f073352233
  1. 22
      .vuepress/components/DemoPlayer.vue
  2. 36
      .vuepress/components/renderer.js
  3. 8
      .vuepress/dist/404.html
  4. 6
      .vuepress/dist/index.html
  5. 6
      .vuepress/dist/player.html
  6. 6
      .vuepress/dist/thirdparty/libde265/index.html
  7. 23
      api.md
  8. 36
      public/renderer.js

22
.vuepress/components/DemoPlayer.vue

@ -13,7 +13,7 @@
<button @click="destroy">销毁</button>
<button v-if="isMute" @click="cancelMute">取消静音</button>
<template v-else>
<button @click="mute">静音</button>
<button @click="mute">静音</button>
音量
<select v-model="volume" @change="volumeChange">
<option value="1">100</option>
@ -22,6 +22,12 @@
<option value="0.25">25</option>
</select>
</template>
<span>旋转</span>
<select v-model="rotate" @change="rotateChange">
<option value="0">0</option>
<option value="90">90</option>
<option value="270">270</option>
</select>
<button @click="fullscreen">全屏</button>
<button @click="screenShot">截图</button>
@ -65,7 +71,8 @@
err: "",
speed: 0,
performance: '',
volume: 1
volume: 1,
rotate: 0
};
},
computed: {
@ -98,7 +105,7 @@
this.jessibuca = new Jessibuca(Object.assign({
container: this.$refs.container,
decoder: this.decoder,
videoBuffer: Number(this.$refs.buffer.value),
videoBuffer: Number(this.$refs.buffer.value), //
isResize: false,
text: '',
background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg',
@ -160,9 +167,10 @@
this.jessibuca.on('bps', function (bps) {
// console.log('bps', bps);
});
let _ts = 0;
this.jessibuca.on('timeUpdate', function (ts) {
// console.log('timeUpdate',ts);
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
})
this.jessibuca.on('videoInfo', function (info) {
@ -228,7 +236,9 @@
volumeChange() {
this.jessibuca.setVolume(this.volume);
},
rotateChange() {
this.jessibuca.setRotate(this.rotate);
},
destroy() {
if (this.jessibuca) {
this.jessibuca.destroy();

36
.vuepress/components/renderer.js

@ -53,6 +53,7 @@
audio: false
}, opt.operateBtns || {});
this._opt.keepScreenOn = opt.keepScreenOn === true;
this._opt.rotate = typeof opt.rotate === 'number' ? opt.rotate : 0;
if (!opt.forceNoGL) this._initContextGL();
this._audioContext = new (window.AudioContext || window.webkitAudioContext)();
@ -463,7 +464,7 @@
break
case "playAudio":
if (_this.playing && !_this.quieting) {
_this._opt.isDebug && console.log('playAudio');
_this._opt.isDebug && console.log('playAudio,ts', msg.ts);
_this._playAudio(msg.buffer)
}
break
@ -574,11 +575,24 @@
this.quieting = false;
};
/**
* link to cancelMute
*/
Jessibuca.prototype.audioResume = function () {
this.cancelMute();
};
/**
* 设置旋转角度
*/
Jessibuca.prototype.setRotate = function (deg) {
deg = parseInt(deg, 10)
const list = [0, 90, 270];
if (this._opt.rotate === deg || list.indexOf(deg) === -1) {
return;
}
this._opt.rotate = deg;
this.resize();
};
Jessibuca.prototype._initStatus = function () {
@ -715,7 +729,7 @@
if (!context) return false;
var _this = this
this._playAudio = function (buffer) {
_this._isDebug() && console.log('_initAudioPlanar-_playAudio');
// _this._isDebug() && console.log('_initAudioPlanar-_playAudio');
var frameCount = buffer[0][0].length
var audioBuffer = context.createBuffer(channels, frameCount * buffer.length, samplerate);
var copyToCtxBuffer = function (fromBuffer) {
@ -725,19 +739,16 @@
for (var i = 0; i < frameCount; i++) {
nowBuffering[i + j * frameCount] = fromBuffer[j][channel][i]
}
//postMessage({ cmd: "setBufferA", buffer: fromBuffer[j] }, '*', fromBuffer[j].map(x => x.buffer))
}
}
}
var playNextBuffer = function () {
_this._audioPlaying = false;
//console.log("~", _this._audioPlayBuffers.length)
if (_this._audioPlayBuffers.length) {
playAudio(_this._audioPlayBuffers.shift());
}
};
var playAudio = function (fromBuffer) {
// _this._isDebug() && console.log('_initAudioPlanar-playAudio');
if (!fromBuffer) return
if (_this._audioPlaying) {
_this._limitAudioPlayBufferSize();
@ -747,8 +758,8 @@
_this._audioPlaying = true;
copyToCtxBuffer(fromBuffer);
var source = context.createBufferSource();
source.buffer = audioBuffer;
// _this._isDebug() && console.log('audioBuffer', audioBuffer.duration * 1000)
source.connect(_this._gainNode);
_this._gainNode.connect(context.destination);
source.start();
@ -1502,6 +1513,7 @@
}
var resizeWidth = this._canvasElement.width;
var resizeHeight = this._canvasElement.height;
var rotate = this._opt.rotate;
var wScale = width / resizeWidth;
var hScale = height / resizeHeight;
var scale = wScale > hScale ? hScale : wScale;
@ -1515,8 +1527,14 @@
scale = wScale > hScale ? wScale : hScale;
}
this._opt.isDebug && console.log('wScale', wScale, 'hScale', hScale, 'scale', scale);
this._canvasElement.style.transform = "scale(" + scale + ")"
let transform = "scale(" + scale + ")";
if (rotate) {
transform += ' rotate(' + rotate + 'deg)'
}
this._opt.isDebug && console.log('wScale', wScale, 'hScale', hScale, 'scale', scale, 'rotate', rotate);
this._canvasElement.style.transform = transform;
this._canvasElement.style.left = ((width - resizeWidth) / 2) + "px"
this._canvasElement.style.top = ((height - resizeHeight) / 2) + "px"
}

8
.vuepress/dist/404.html

@ -8,13 +8,13 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/8.b1971db2.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/3.da803b5d.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
<link rel="preload" href="/assets/css/0.styles.3498c6d6.css" as="style"><link rel="preload" href="/assets/js/app.790582d1.js" as="script"><link rel="preload" href="/assets/js/8.b1971db2.js" as="script"><link rel="prefetch" href="/assets/js/10.a5d473fb.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.97362a79.js"><link rel="prefetch" href="/assets/js/3.fbfd7e37.js"><link rel="prefetch" href="/assets/js/4.98355633.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.3680bc72.js"><link rel="prefetch" href="/assets/js/7.91ad5e57.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.3498c6d6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/" class="router-link-active">
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">
Take me home.
</a></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/8.b1971db2.js" defer></script>
<script src="/assets/js/app.790582d1.js" defer></script><script src="/assets/js/8.b1971db2.js" defer></script>
</body>
</html>

6
.vuepress/dist/index.html

@ -8,8 +8,8 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/9.a9dfd281.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
<link rel="preload" href="/assets/css/0.styles.3498c6d6.css" as="style"><link rel="preload" href="/assets/js/app.790582d1.js" as="script"><link rel="preload" href="/assets/js/3.fbfd7e37.js" as="script"><link rel="preload" href="/assets/js/9.a9dfd281.js" as="script"><link rel="prefetch" href="/assets/js/10.a5d473fb.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.97362a79.js"><link rel="prefetch" href="/assets/js/4.98355633.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.3680bc72.js"><link rel="prefetch" href="/assets/js/7.91ad5e57.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js">
<link rel="stylesheet" href="/assets/css/0.styles.3498c6d6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="logo.png" alt="Jessibuca" class="logo"> <span class="site-name can-hide">Jessibuca</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
@ -49,6 +49,6 @@ ffmpeg(h264-aac)</p> <div class="language-bash extra-class"><pre class="lang
</code></pre></div><h2 id="基本原理"><a href="#基本原理" class="header-anchor">#</a> 基本原理</h2> <img src="/tech.png"></div> <div class="footer">
GPL Licensed | Copyright © 2020-present dexter
</div></main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/9.a9dfd281.js" defer></script>
<script src="/assets/js/app.790582d1.js" defer></script><script src="/assets/js/3.fbfd7e37.js" defer></script><script src="/assets/js/9.a9dfd281.js" defer></script>
</body>
</html>

6
.vuepress/dist/player.html

@ -8,8 +8,8 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/11.5b4fb341.js" as="script"><link rel="preload" href="/assets/js/4.a1cfdbbd.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
<link rel="preload" href="/assets/css/0.styles.3498c6d6.css" as="style"><link rel="preload" href="/assets/js/app.790582d1.js" as="script"><link rel="preload" href="/assets/js/3.fbfd7e37.js" as="script"><link rel="preload" href="/assets/js/11.5b4fb341.js" as="script"><link rel="preload" href="/assets/js/4.98355633.js" as="script"><link rel="prefetch" href="/assets/js/10.a5d473fb.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.97362a79.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.3680bc72.js"><link rel="prefetch" href="/assets/js/7.91ad5e57.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.3498c6d6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="logo.png" alt="Jessibuca" class="logo"> <span class="site-name can-hide">Jessibuca</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
@ -17,6 +17,6 @@
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div class="root"><div class="container-shell"><div id="container" class="container"></div> <div class="input"><div>输入URL:</div> <input autocomplete="on" value> <button>播放</button></div> <!----> <div class="option"><span>缓冲(秒):</span> <input type="number" value="0.2" style="width:50px"> <input type="checkbox"><span>wasm</span> <select><option selected="selected">h264</option> <option>h265</option></select> <input type="checkbox"><span>自适应</span></div></div></div> <ul><li>支持3种格式:</li></ul> <ol><li>ws-raw 即ws://localhost/live/test (该协议只能对接<a href="https://monibuca.com" target="_blank" rel="noopener noreferrer">monibuca服务器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</li> <li>ws-flv 即ws://localhost/live/test.flv</li> <li>http-flv 即http://localhost/live/test.flv</li></ol> <ul><li>注意http协议会有跨域问题,需要设置cors头</li> <li>协议同时支持https、wss</li> <li>demo播放器只提供AAC的解码演示</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/11.5b4fb341.js" defer></script><script src="/assets/js/4.a1cfdbbd.js" defer></script>
<script src="/assets/js/app.790582d1.js" defer></script><script src="/assets/js/3.fbfd7e37.js" defer></script><script src="/assets/js/11.5b4fb341.js" defer></script><script src="/assets/js/4.98355633.js" defer></script>
</body>
</html>

6
.vuepress/dist/thirdparty/libde265/index.html

@ -8,8 +8,8 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/12.2293222f.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
<link rel="preload" href="/assets/css/0.styles.3498c6d6.css" as="style"><link rel="preload" href="/assets/js/app.790582d1.js" as="script"><link rel="preload" href="/assets/js/3.fbfd7e37.js" as="script"><link rel="preload" href="/assets/js/12.2293222f.js" as="script"><link rel="prefetch" href="/assets/js/10.a5d473fb.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/2.97362a79.js"><link rel="prefetch" href="/assets/js/4.98355633.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.3680bc72.js"><link rel="prefetch" href="/assets/js/7.91ad5e57.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.3498c6d6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="logo.png" alt="Jessibuca" class="logo"> <span class="site-name can-hide">Jessibuca</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
@ -50,6 +50,6 @@ using cmake on other platforms.</p> <h1 id="prebuilt-binaries"><a href="#prebuil
General Public License. The sample applications are distributed under
the terms of the GNU General Public License.</p> <p>See <code>COPYING</code> for more details.</p> <p>Copyright (c) 2013-2014 Struktur AG
Contact: Dirk Farin <a href="mailto:farin@struktur.de">farin@struktur.de</a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/12.2293222f.js" defer></script>
<script src="/assets/js/app.790582d1.js" defer></script><script src="/assets/js/3.fbfd7e37.js" defer></script><script src="/assets/js/12.2293222f.js" defer></script>
</body>
</html>

23
api.md

@ -134,6 +134,15 @@ jessibuca.mute()
jessibuca.cancelMute()
```
### audioResume()
- **用法**
留给上层用户操作来触发音频恢复的方法。
iPhone,chrome等要求自动播放时,音频必须静音,需要由一个真实的用户交互操作来恢复,不能使用代码。
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
### isWebGL()
- **返回值**:`boolean`
- **用法**
@ -233,6 +242,8 @@ jessibuca.play()
- **用法**
设置最大缓冲时长,单位秒,播放器会自动消除延迟。
等同于 `videoBuffer` 参数。
```js
// 设置 200ms 缓冲
jessibuca.setBufferTime(0.2)
@ -242,18 +253,21 @@ jessibuca.setBufferTime(0.2)
- **参数**
- `{number} deg`
- **用法**
设置旋转角度,只支持,0 ,90,180,270 四个值。
设置旋转角度,只支持,0(默认) ,180,270 三个值。
> 可用于实现监控画面小窗和全屏效果,由于iOS没有全屏API,此方法可以模拟页面内全屏效果而且多端效果一致。
```js
jessibuca.setRotate(0)
jessibuca.setRotate(90)
jessibuca.setRotate(180)
jessibuca.setRotate(270)
```
### setVolume(volume)
- **参数**
- `{number} volume`
@ -264,6 +278,8 @@ jessibuca.setRotate(270)
2. 当为0时,完全无声
3. 当为1时,最大音量,默认值
> 区别于 mute 和 cancelMute 方法,虽然设置setVolume(0) 也能达到 mute方法,但是mute 方法是不调用底层播放音频的,能提高性能。而setVolume(0)只是把声音设置为0 ,以达到效果。
```js
jessibuca.setVolume(0.2)
@ -284,6 +300,8 @@ console.log(result) // true
### setKeepScreenOn()
- **用法**
开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
其余平台为模拟实现,此时为兼容实现,并不保证所有浏览器都支持
```js
jessibuca.setKeepScreenOn()
@ -319,6 +337,7 @@ jessibuca.setFullscreen(false)
jessibuca.screenshot("test","png",0.5)
```
### on(event, callback)
- **参数**

36
public/renderer.js

@ -53,6 +53,7 @@
audio: false
}, opt.operateBtns || {});
this._opt.keepScreenOn = opt.keepScreenOn === true;
this._opt.rotate = typeof opt.rotate === 'number' ? opt.rotate : 0;
if (!opt.forceNoGL) this._initContextGL();
this._audioContext = new (window.AudioContext || window.webkitAudioContext)();
@ -463,7 +464,7 @@
break
case "playAudio":
if (_this.playing && !_this.quieting) {
_this._opt.isDebug && console.log('playAudio');
_this._opt.isDebug && console.log('playAudio,ts', msg.ts);
_this._playAudio(msg.buffer)
}
break
@ -574,11 +575,24 @@
this.quieting = false;
};
/**
* link to cancelMute
*/
Jessibuca.prototype.audioResume = function () {
this.cancelMute();
};
/**
* 设置旋转角度
*/
Jessibuca.prototype.setRotate = function (deg) {
deg = parseInt(deg, 10)
const list = [0, 90, 270];
if (this._opt.rotate === deg || list.indexOf(deg) === -1) {
return;
}
this._opt.rotate = deg;
this.resize();
};
Jessibuca.prototype._initStatus = function () {
@ -715,7 +729,7 @@
if (!context) return false;
var _this = this
this._playAudio = function (buffer) {
_this._isDebug() && console.log('_initAudioPlanar-_playAudio');
// _this._isDebug() && console.log('_initAudioPlanar-_playAudio');
var frameCount = buffer[0][0].length
var audioBuffer = context.createBuffer(channels, frameCount * buffer.length, samplerate);
var copyToCtxBuffer = function (fromBuffer) {
@ -725,19 +739,16 @@
for (var i = 0; i < frameCount; i++) {
nowBuffering[i + j * frameCount] = fromBuffer[j][channel][i]
}
//postMessage({ cmd: "setBufferA", buffer: fromBuffer[j] }, '*', fromBuffer[j].map(x => x.buffer))
}
}
}
var playNextBuffer = function () {
_this._audioPlaying = false;
//console.log("~", _this._audioPlayBuffers.length)
if (_this._audioPlayBuffers.length) {
playAudio(_this._audioPlayBuffers.shift());
}
};
var playAudio = function (fromBuffer) {
// _this._isDebug() && console.log('_initAudioPlanar-playAudio');
if (!fromBuffer) return
if (_this._audioPlaying) {
_this._limitAudioPlayBufferSize();
@ -747,8 +758,8 @@
_this._audioPlaying = true;
copyToCtxBuffer(fromBuffer);
var source = context.createBufferSource();
source.buffer = audioBuffer;
// _this._isDebug() && console.log('audioBuffer', audioBuffer.duration * 1000)
source.connect(_this._gainNode);
_this._gainNode.connect(context.destination);
source.start();
@ -1502,6 +1513,7 @@
}
var resizeWidth = this._canvasElement.width;
var resizeHeight = this._canvasElement.height;
var rotate = this._opt.rotate;
var wScale = width / resizeWidth;
var hScale = height / resizeHeight;
var scale = wScale > hScale ? hScale : wScale;
@ -1515,8 +1527,14 @@
scale = wScale > hScale ? wScale : hScale;
}
this._opt.isDebug && console.log('wScale', wScale, 'hScale', hScale, 'scale', scale);
this._canvasElement.style.transform = "scale(" + scale + ")"
let transform = "scale(" + scale + ")";
if (rotate) {
transform += ' rotate(' + rotate + 'deg)'
}
this._opt.isDebug && console.log('wScale', wScale, 'hScale', hScale, 'scale', scale, 'rotate', rotate);
this._canvasElement.style.transform = transform;
this._canvasElement.style.left = ((width - resizeWidth) / 2) + "px"
this._canvasElement.style.top = ((height - resizeHeight) / 2) + "px"
}

Loading…
Cancel
Save