chihchengyang / wfs.js Goto Github PK
View Code? Open in Web Editor NEWhtml5 player for raw h.264 streams
License: BSD 2-Clause "Simplified" License
html5 player for raw h.264 streams
License: BSD 2-Clause "Simplified" License
Hello!
The player is working fine!
But my fllow of frames is 7fps.
The player "buffer" a few frames, play it in (30 fps maybe) and stuck until next "buffer".
I made a few test, but without success...
Where in the code I can change the fps of the mp4?
Thank you!
Hi ChihChengYang,
I use WebRTC to send/receive the h264 raw data, how can i feed received h264 raw data to wfs.js?
您好,我看文档说h264的起始位置是0x00,0x00,0x00,0x01或者0x00,0x00,0x01,请问为什么在_read函数内会基于0x00,0x00,0x00寻找起始位置?是因为要去掉对齐的字节码吗?
使用谷歌浏览器运行,没法打开视频,空白的,只能使用火狐浏览器播放;另外用火狐浏览器播放,有时视频播放一段又会从头开始,实在搞不懂
我的裸流是一下格式,但是播放不了! 000000010201d001217f487b40fcf54056d699d4d659b807013f3bb4bd5765bf56d47d5011b2f0526943239067a85c510bdf50e1c44bbc882618042a11803904157b203b5b4d6280a9fc87f03a83f1e5840a7d61c2098....
1、我在一个页面接入了 wfs video的播放,但是在从其他页面切换回来这个页面时候很容易出现下面错误 internal error happened while processing wfsMediaAttached:client is not defined 然后video画面就加载不出来了。
2、一个页面放了两个 wfs + video 的播放。但是有一个很容易卡住就不动了,时间长了画面出现延迟。
I use the following command to generate new h264 file, and the newly h264 file can be played by mplayer
. BTW, a.mp4
is of 1080P@25FPS
ffmpeg -i a.mp4 -vcodec h264 a.264
However, the browser says
trying to append although a media error occured, flush segment and abort
Could you please provide an example command?
how to play aac raw data with adts live stream?
The wfs.js is great but it doesn't work when I tried to use it without hardware acceleration in chrome. The message shown in console is: 'trying to append although a media error occured, flush segment and abort'.
And I also checked the error message of the HTMLMediaElement and it said: 'Failed to send video packet for decoding: timestamp=700000 duration=33333 size=100037 side_data_size=0 is_key_frame=1 encrypted=0 discard_padding (ms)=(0, 0)'
This problem doesn't occur in firefox ( version 60 ).
您好,我是用您的插件,在win10上可以正常播放,但是在win7上不能播放,请问可能是什么原因
HI i already have a websocket setup with outputs NAL Units how i use the wfs to play the stream on browser ?
let wfs = new Wfs();
function onStreamDataReceived( nal )
{
//.....how do i pass the nal i receive to you wfs obj ??
}
Please help
就是视频播放差不多13个小时多,就自己卡住了?百思不得其解,不知道是哪个部分限制了播放,导致视频卡住
Is It support H265 format?
When to support h265? I'm looking forward to it
Hello,
Just need to feed your player with my own NALUs on an already working project with Broadway.
How to do this ?
Pascal
I use wfs.js in my project.
why it show:
internal error happened while processing wfsH264DataParsing:logger is not defined?
一、不能调用wfs.js内部函数=>无法控制websocket何时连接
我的项目是由Vue编写的,之前自己写过一个websocket(要接受除视频以外的其他实时数据),由于wfs.js中也有一个websocket,所以想把两个整合起来,但是尝试了多种方法都不行。其中一种方法是尝试调用wfs.js中的send()
方法,但无法调用。我想知道下面代码中的new Wfs()
是wfs.js代码中的var Wfs = function()...
吗?如果是,为什么它认识Wfs()
却不认识WebsocketLoader()
?有什么办法可以调用wfs.js中的websocket相关函数吗?
window.onload = function() {
if (Wfs.isSupported()) {
var video1 = document.getElementById("video1"),
wfs = new Wfs();
//var websocketLoader = new WebsocketLoader();
//报错:WebsocketLoader未定义
wfs.attachMedia(video1, 'ch1');
//websocketLoader .onWebsocketMessageSending();
}
};
2.实时播放缓存问题
我的应用是单页面应用,其中点击出现小窗口,视频页面是要经过至少两个点击操作才能出现的。根据我查到的资料得知,wfs.js里的函数是 立即执行函数(匿名函数) 的写法,因此一打开网页就会连接websocket,并且收到视频数据。因此等我打开视频页面时,已经有20-30s的缓存,这不符合实时性的要求。我尝试过去掉 window.onload = function()...
,或者修改配置为多页面应用,都未能成功解决。
请问有什么办法可以解决吗?
It seems the remuxer only supports for H264 Baseline Profile. When it comes to Main or High Profile, video just gets blurry and it may never come back to be normal.
It can play normally, but the screen will pause to load when playing,So how do we solve this
When I use chrome to play video for about 13 hours(47720 seconds), it stops, as the same time, it outputs
"trying to append although a media error occurred, flush segment and abort" in the log.
Although I tied to set the duration of the media source to equal to infinity, but it still happened.
So, I add these codes below:
if (this.media.currentTime >= this.media.duration) {
console.log("auto refresh.");
this.wfs = new Wfs();
this.wfs.attachMedia(this.media, this.url);
return;
}
Fortunately, it works. But it still takes 2~3 seconds to refresh the video element.
I wonder if there is any idea better to make the video to play continuously ?
Hi,
I got a problem with wfs.js that it seems works not good when the system of PC is windows 7. Because the stream works very well when the system is windows 10, however, nothing shows with windows 7. And I got a log 'trying to append although a media error occured, flush segment and abort', already test on 2 PC with windows 10 and 3 PC with windows 7, the results were what I said before. Can you tell me what's the problem? Or if I want to solve it, what's the solution, thank you so much!
你好,求教个问题:
我推H264流的时候,也会推G711A的音频流
请问如何实现音视频同步播放?
谢谢。
发现video标签有丢帧现象,而且能不能知道那一帧渲染或者没有渲染?
I found out that even in Chrome, the video was played faster than 1.0 speed. For example, I have a 1:26 footage, but wfs.js finished it in 1:12.
Is it because there are something wrong with the calculation of dts/pts in mp4-remuxer.js?
How to use websocket method?
attachWebsocket?
How to link canvas in websocket?
not work on ios devices but work fine on safari:
ERROR: {"__zone_symbol__currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","cancelFn":null,"runCount":0},"line":1278,"column":23,"sourceURL":"http://localhost:8080/Users/simeon/Library/Developer/CoreSimulator/Devices/3DCDACB6-7444-4C28-BB99-C0C158317734/data/Containers/Bundle/Application/2xx/www/assets/js/wfs.js"}
// wfs.js
`
1277: var typeSupported = {
1278: mp4: MediaSource.isTypeSupported('video/mp4'),
1279: // mp2t : wfs.config.enableMP2TPassThrough && MediaSource.isTypeSupported('video/mp2t')
};
`
我在使用这个库的时候,将H264数据传过来,前端报了这个错误:
Websocket Open!
websocket-loader.js:48 6289
websocket-loader.js:63 frames, len:1
mp4-remuxer.js:217 generateVideoIS ERROR==> mediaError
websocket-loader.js:48 1226
websocket-loader.js:54 7510
能够解答下吗?
ubuntu 版本下的 chrome(版本 79.0.3945.117)不支持解码格式吗 ?
Hi,
It may be silly question but why do you need yyyyyyy.txt file for serving stream over web socket?
Also how did you generate that (yyyyyyy.txt) file? Is it not possible sending byte stream on the fly instead of reading chunk size from txt file?
Thanks
Samir
能否调整播放的帧率? 比如播放一个1秒5帧的视频
Thanks for this great tool, currently I cannot get it to work.
I've set it up as per example, connect to my websocket, and I start pushing the nal unit from the websocket. My server will always send one complete NAL unit with each message, H264 Baseline profile, however in browser I get the following error:
PIPELINE_ERROR_DECODE: Failed to send video packet for decoding: {timestamp=733333 duration=33333 size=8209 is_key_frame=1 encrypted=0}
Any ideas?
有的视频是 25帧的所以设置的 H264_TIMEBASE = 3000 比较合适,但是如果视频是 60帧的话播放延迟就会也越来越长,怎么解决?
websocket模块是否能够提取出来,我的项目中需要自己打开websocket,然后处理每次接收到的数据后,才能得到真实的数据。
当H264裸流每次需处理的数据量越来越大时,会出现大量的花屏,请问这个有可以提供的解决思路么?
Hi,
I have many problems when I run this project. I want to learn it but it's difficult for me. Could you please contact me with email? [email protected] I'm Chinese too.
I install Go just now. When I run the file, error comes out like this:
go build -o wfs_server server/wfs_server_lite.go server/wfs_websockets_hub.go
#command-line-arguments
server/wfs_websockets_hub.go:27:21: multiple-value uuid.NewV4() in single-value context
Please please teach me some. Thank you very much.
Yushen
执行了
wfs.js
setup node.js/npm dev environement
cd wfs.js
npm install
npm run build
然后用vcode形成一个liveServer 打开demo的index.html页 一直在转圈。
操作步骤哪里出错了?
我看写的readme.md里
run ./demo/wfs_server
我在demo下没找到这个wfs.server呢
看到在aac.js 文件中只有生成空白帧的方法,可否提供封装aac 的方法?
Hi, what's the license of this awesome js? Please add a LICENSE
file in this repo so that we know if it can be used in commercial cases or further redistribution.
Currently I am working on livestream for RTSP stream like rtsp://xxx , is that possible to use this library as the tool? Can I directly set up a node Websocket server and channel that stream to the frontend by using this library?
chrome 版本 84.0.4147.105(正式版本) (64 位)
win10 64位
切换tab到其他页面,再切换回来,发现视频从切换前开始播放, 后来似乎在努力追赶播放进度, 但切换时间过长还是无法追赶上。
有没有什么定位思路?
我后端实现RTP流解析和NALU切片合并,把合并好的NALU通过websocket发送给前端wfs。
目前H264帧率为25,已将wfs中的H264_TIMEBASE改为3600,但是播放到20秒左右之后,视频会卡顿,播放器每隔每一秒出现缓冲一下的情况。
目前怀疑是封装时,帧率出现了问题。请问再已经修改了H264_TIMEBASE的情况下,还需修改哪些部分。
还有,现在对MP4的封装格式不了解,为什么PES2MP4SCALEFACTOR=4,这个是什么意思呢。
Yeah. it is very basic step, but I couldn't find the way to debug the wfs.js
Im using nodeclipse plugin in eclipse. but I can't figure it out how to debug the code of browserified dist/wfs.js
I hope I can trace it in the files of src/*
Thanks in advance. and I appreciate your code work.
谷歌浏览器运行之后就报这个错误了,目前除了火狐浏览器可以使用,其它都不行,郁闷
您好,请问websocket销毁,我调用wfs类的destroy方法就行了吗?
When I use wfs.js to receive h.264 stream by websocket, firefox plays video faster than 1.0 speed, and endOfStream() function make it restart from begging.
How can I prevent it ?
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.