zhw2590582 / FlvPlayer

:lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas
https://flvplayer.js.org
MIT License
302 stars 83 forks source link

播放器效果非常好 但是能提供.d.ts吗? 感谢 :) #29

Closed AegeanRagdolls closed 4 years ago

AegeanRagdolls commented 4 years ago

我使用typescript 开发的 不知道 能否提供一下定义文件? 如果可以 真的是太感谢了 ~ 另外 我想直接把播放器 直接 在 pixi中进行渲染 是不是 我手动调用 动画帧 并且 修改 runder 中的代码就可以了呢?~ 还有就是 发现 华为较老的机型的默认浏览器 好像无法使用.

zhw2590582 commented 4 years ago

手动调用动画帧是什么意思,老机型用不了很正常,毕竟用了WebAssembly

AegeanRagdolls commented 4 years ago

我看源码中是在decoder/index.js 中调用的animationFrame 我想使用pixi渲染它, 我是不是需要在pixi的animationFrame 中去调用 使用同一个GL上下文 ? , 我前端是半路出家的,之前做游戏的,有些地方不是很懂 抱歉哈~

zhw2590582 commented 4 years ago

Pixi是什么,还是不明白你的应用场景

AegeanRagdolls commented 4 years ago

不好意思 , 是我没有讲清楚. 我在使用一个2d webGL 渲染库 因为我看到flvPlayer 也是渲染在canvas上的 , 这样我的主页面 就有两个canvas了, 我希望可以在一个canvas中渲染 例如 将flvPlayer的画面渲染到一张sprite上, 这样我在打开关闭player并且做一些打开或者关闭的动画可能比较方便(我不太熟系直接去操作dom..) ~ 所以 , 我想要使用其他的渲染库去渲染flvPlayer~

zhw2590582 commented 4 years ago

你应该是想把现有的canvas传入到flvPlayer吧,你可以把你的canvas当成参数传进来,如:

var flv = new FlvPlayer({
    canvas: document.querySelector('canvas'),
});

然后修改一下/src/player/template.js,如:

export default function template(flv, player) {
    const { options } = flv;
    const cacheCss = options.container.style.cssText;
    options.container.classList.add('flvplayer-container');

    options.container.innerHTML = `<div class="flvplayer-player"></div>`;

    flv.on('destroy', () => {
        options.container.innerHTML = '';
        options.container.style.cssText = cacheCss;
        options.container.classList.remove('flvplayer-container');
    });

    Object.defineProperty(player, '$container', {
        value: options.container,
    });

    Object.defineProperty(player, '$player', {
        value: options.container.querySelector('.flvplayer-player'),
    });

    Object.defineProperty(player, '$canvas', {
        value: options.canvas,
    });
}

不过这样做的话,你就没办法使用flvplayer-control.js

AegeanRagdolls commented 4 years ago

好的 谢谢您 我是试一下~

AegeanRagdolls commented 4 years ago

您好 , 不好意思还有还有个问题想请教一下~.. 在长时间直播播放时 image,内存显示在缓慢增长 , 如果我将浏览器 切换至后台时,很快内存就会增长至1g左右 直到浏览器崩溃 . 另外 直播的话 可以快进吗? 有的时候 在一些无意的操作下 会导致视频直播有一些延迟~ 我想吧视频快进一下,让直播尽量比较比较时时~ 感谢~

zhw2590582 commented 4 years ago

内存过大问题已经尽力了,或者你可以把视频分辨率调低些。直播是不能快进的,至于解决方法可能我要优化一下代码才能有。

AegeanRagdolls commented 4 years ago

嗯呢 好的~ 谢谢您了~ 另外 您可以 在源码上加入自定义渲染吗? image 这是我在您的源码加的测试代码 , 这样直接使用您解码库的数据, 如果使用了其他的 webgl 库的话~ 只需要在使用的地方写一些gl代码就以当做插件使用 ~ 并且一个canvas渲染~ 我在一台16年的华为上测试单canvas比双canvas帧率提升了20帧左右~ 在使用第三发渲染库的情况下基本可以保持60FPS,也可以直接传出yuv-buffer~ (这样我就可以偷懒~在更新您的库以后,就不用再去改代码了 ~ 23333)

zhw2590582 commented 4 years ago

这样会把参数复杂化,而且一般人也不会知道渲染器怎么构造。这个库将来也不会有大改动,所以建议你在这基础上直接修改更适合。

AegeanRagdolls commented 4 years ago

好的~ 谢谢您~