langhuihui / jessibuca Goto Github PK
View Code? Open in Web Editor NEWJessibuca是一款开源的纯H5直播流播放器
Home Page: https://jessibuca.com
License: GNU General Public License v3.0
Jessibuca是一款开源的纯H5直播流播放器
Home Page: https://jessibuca.com
License: GNU General Public License v3.0
之前另一位同学的 issue 被 close了,这里遇到了同样的问题,纯 aac音频无法播放,请教。
第一步:npm i;
第二步: npm run dev;
第三步:打开chrome 输入 http://localhost:3000/
第四步:点击打开播放器;
第五步:{ws-raw 即ws://localhost/live/test (该协议只能对接monibuca服务器)
ws-flv 即ws://localhost/live/test.flv
http-flv 即http://localhost/live/test.flv}三个url任选一个输入,点击播放。
三种方式,console中都有报错:index.js:3 WebSocket connection to 'ws://localhost:8080/jessica/live/rtc' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
哪个步骤出问题了吗?还是需要配置什么?
this.setVideoSize函数中添加如下代码,
var img = new Image();
img.onload = function () {
console.log('img loaded');
}
img.src = "data:image/png;base64,...";
浏览器提示“Image is not defined”, 而在其他js中运行则不会有这个错误,看起来是和wasm运行环境有关。work.js中其他地方运行同样如此。
请问如何配置才能在setVideoSize中执行Image加载?
视频播放过程中被,经常出现电流声,放着放着会卡一下
不好意思,找很久沒找到。
可否說一下是否有相關的指令
1080P视频,H265格式,播放一段时间或者刚开始加载偶发 整个浏览器崩溃
RT
rtmp正常推流,更改分辨率(高-》低)后,画面会一直绿屏,刷新页面重新打开播放器也是绿屏。vlc及西瓜播放器此时都播放正常。低改高不会,切换摄像头也不会。录制的视频用vlc播放正常。
请问这个问题该如何解决?
网上找资料,有说是因为关键帧和sps、pps的信息,播放器解析失败的问题。
流在拉,但是没有图像,报错信息Uncaught RuntimeError: memory access out of bounds
想问下是什么原因导致的?
不管是使用make.py编译后的js还是原工程自带的js
在客户端页面点击连接按钮时,服务器报错
Client connected:127.0.0.1:62065 -> 0.0.0.0:1936
Handlers count changed: 2->3
IsAlive not yet implemented
服务器端生成的KEY:UPeO+3ujF7F6T7rghwdSPAirZEw=
服务器端欲发送信息:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: UPeO+3ujF7F6T7rghwdSPAirZEw=
Unable to validate client
ValidateClient at offset 323 in file:line:column E:\VSProjects\csharprtmp-master
\Core\Protocols\Rtmp\InboundRTMPProtocol.cs:93:13
PerformHandshake at offset 86 in file:line:column E:\VSProjects\csharprtmp-maste
r\Core\Protocols\Rtmp\InboundRTMPProtocol.cs:113:13
PerformHandshake at offset 380 in file:line:column E:\VSProjects\csharprtmp-mast
er\Core\Protocols\Rtmp\InboundRTMPProtocol.cs:38:29
Client not validated
导致客户端不能正常响应。是要在ssl的环境下吗?或者这问题应该怎么解决。
期待您的回复
Safari & 手机移动浏览器 不支持 OffscreenCanvas
来个demo吧。API页面也访问不了了。
谢谢,采用何种协议呢
播放视频后调用clearView()、close()、jessibuca.destroy()都无法将画布清空,背景还是显示视频的最后画面图像;
声音不对劲,然后我用QQ浏览器好像无法播放,官网测试播放器是最新版本效果嘛?
我的配置
var jessibucaConfig = { container: document.getElementById("myVideodiv"), videoBuffer : 0.5, // 最大缓冲时长,单位秒 isResize : false, decoder : "xxxx/jessibuca/index.js", timeout : 60, loadingText : "加载中", hasAudio : true, //typeof (this.hasAudio) =="undefined"? true: this.hasAudio, debug : false, supportDblclickFullscreen : true, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。 //showBandwidth: true,//显示网速 operateBtns : { fullscreen : true, screenshot : true, play : true, audio : true, }, record : "record", vod : true, forceNoOffscreen : true, isNotMute : false, };
当我修改了container的宽高大小时候再调用resize()方法调正视频画面大小会导致浏览器卡住直至崩溃。
我clone 您的vue例子,在本地跑不起来,点击播放没有效果,但是单独放在html 就没有问题,是否需要将renderer.js 改造下?
in https://raw.githubusercontent.com/langhuihui/jessibuca/worker/README.md
the image is invalid in part
## 基本原理
<img src="/tech.png">
full image url is : https://github.com/langhuihui/jessibuca/blob/worker/tech.png
测试时,我才用四分屏,每个屏幕都绑定了一个
new window.Jessibuca(...)
对象,配置都一样,同时播放四路视频,然后全部关闭视频
for (var i = 0; i < 4; i++) { var this_jessibuca = jessibucaObj[i]; /*console.log("player:",player);*/ if (this_jessibuca != null) { //this_jessibuca.pause(); this_jessibuca.close(); this_jessibuca.clearView(); } }
该功能会出现问题,存在部分屏幕还原到黑屏状态,部分仍然存在视频停止后的画面图片;
我目前的解决办法是加入了延迟,并多调用几次。
`for (var i = 0; i < 4; i++) {
var this_jessibuca = jessibucaObj[i];
/console.log("player:",player);/
if (this_jessibuca != null) {
//this_jessibuca.pause();
this_jessibuca.close();
this_jessibuca.clearView();
setTimeout((_obj,time)=>{
_obj.close();
setTimeout((obj)=>{
obj.clearView();
},time,_obj);
},1000 + 20*i,this_jessibuca,150 * i);
}
}`
但任然无法解决这个问题,多尝试几次还会存在无法全部关闭的效果;
播放http或者https的flv文件,编码h264 aac,视频只能播放2s左右,声音持续在播放。
请问如何初始化这个项目?能否在README中提供开发指引。
当前版本无论是截图按钮还是 screenshot 方法, 都只能实现截图后下载文件的默认行为. 外部无法控制截图之后的行为. 比如截图之后拿到 base64 进行后续操作.
现在我 fork 了一份, 打算加上这些支持. 目标如下:
问题如下:
null
时返回 base64 是否合理.可以同时播放2路直播流吗?
请问执行了yarn;yarn serve之后还需要改什么吗?点了播放一直加载中
chrome最新版92,播放器插件的支持还是不好,播放几秒或者1分钟就停止了0kb/s,360浏览器的chrome86或者火狐没问题。
目前iPhone只能支持HLS,rtmp支持吗
音频与视频播放时候延迟越来越大,H264+aac。音视频也不同步
不支持只有aac音频或者只有h264视频的源
firefox 反复切换,画面就加载不出来了。
播放视频的音频有电流声请问怎么解决
IOS 没有声音,有方案解决吗?
h265 解码,画面延迟越来越大,请问有参数可以跳帧或者减小延迟吗?
使用苹果11中的原生浏览器:
Safari
播放地址:
https://bofang.672582.com/11746255920221565/esl_csgo.flv(我本地的推送流)
播放域名:
http://jessibuca.monibuca.com/player.html
现象:通过代码里面的demo播放的时候出现声音时有时无正常播放的时候也会出现声音失真能明显感觉到卡顿的,而且播放有时会出现声音和画面不同步。PC端播放偶尔也会出现相同的问题,偶尔出现声音不卡顿了也会出现失真的现象,下载了代码的demo在配置后videoBuff参数后画面不卡顿但是声音还是迟钝感非常明显,后来发现如果音量比较大的话才会出现这种状况。有的时候也会出现画面像那种按了慢放的那种感觉一样。
浏览器:
Google Chrome
播放地址:
https://bofang.672582.com/11746255920221565/esl_csgo.flv(我本地的推送流)
播放器配置:
var h5lc = new Jessibuca({
container,//ff.js
decoder: decoder + ".js",
videoBuffer: 5,
audioBuffer: 15,
isWebGL:true,
isNotMute: true,
showBandwidth: true,
operateBtns: {
fullscreen:true,
screenshot:true,
play: true,
audio: true
},
});
附:
windows
通过官方提供的编译的命令通过,make.py编译代码
但是提示报错找不到字节码库的这个文件'~/.emscripten'
很多字节码库早obj文件目录下是存在的是不是每次编译时都需要重新生成?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.