Git Product home page Git Product logo

wfs.js's Introduction

wfs.js - html5 player for raw h.264 streams.

A javascript library which implements websocket client for watching and focusing on raw h.264 live streams in your browser that works directly on top of a standard HTML5 element and MediaSource Extensions.

It works by transmuxing H264 NAL unit into ISO BMFF (MP4) fragments.

Also,Implement a demo server to push video streams.

Build

git clone https://github.com/ChihChengYang/wfs.js.git
cd wfs.js

wfs.js

Setup node.js/npm dev environment, then run:

npm install
npm run build

Demo server

Setup go's dev environment, then run:

go get "github.com/gorilla/websocket"
go get "github.com/satori/go.uuid"
go get "github.com/kardianos/osext"
./server/build_lite.sh

Demo server serves with raw h.264 files, yet that can be easily transfered and connected to RTSP or other sources (h.264 streaming).

Demo

  1. run ./demo/wfs_server

  2. open a browser e.g. Chrome , 127.0.0.1:8888

Reference

hls.js

wfs.js's People

Contributors

chihchengyang avatar karjonas avatar jootnet avatar noobtw avatar drauggres avatar dependabot[bot] avatar

Stargazers

Suri avatar 王宁 avatar  avatar Enrico avatar  avatar HaoYing Li avatar  avatar delichik avatar Jean Leao avatar  avatar janto avatar zhudp avatar  avatar Chris avatar dianjixz avatar  avatar Aersaud avatar  avatar Yining Huang avatar  avatar  avatar  avatar Lark avatar Qiuyun avatar  avatar yang avatar Oscura avatar Anonymous avatar  avatar Aaron mou avatar kromalee avatar  avatar HIVIEW avatar cchma avatar huyunlei avatar  avatar puhuaqiang avatar  avatar  avatar Anh Trinh avatar Aries avatar Carlita Kunde avatar DevilSpiderX avatar  avatar  avatar gol_ele avatar Patrick avatar CKeen avatar  avatar fandy avatar Kun avatar SPARON avatar  avatar zen avatar Jasper So avatar  avatar  avatar Sarah Cross avatar 御坂美琴 avatar Madao Chen avatar  avatar RedBull avatar Larry Lai avatar Katheleen OReilly avatar Zachary avatar  avatar  avatar Thunderball avatar Jun Zhan avatar Yue Chen avatar Gason Zhong avatar Zhan Rongrui avatar  avatar Kellyton avatar 杰叔叔捣鼓 avatar  avatar GaleHuang avatar Headson avatar zxyuan avatar  avatar damon lin avatar shuxin avatar tkly avatar  avatar yuenpok avatar Tac Tan avatar Chen Li avatar JamieJiang avatar  avatar XianyanLin avatar pompeybrain avatar shuiming avatar liangHuan avatar Steve Chan avatar samdus avatar liukefu avatar Guibo Li avatar Dale Bradshaw avatar Toly avatar  avatar

Watchers

James Cloos avatar 杰叔叔捣鼓 avatar Tianjie avatar  avatar  avatar  avatar  avatar hezhanbang avatar  avatar 王刚 avatar zgy520 avatar  avatar  avatar llasqweweq avatar  avatar North Yuan avatar  avatar Sergey Suzdaltsev avatar 凯 avatar davidcao avatar sunyingchun avatar  avatar  avatar cnglish avatar

wfs.js's Issues

请问支持Annex-B格式?

我的裸流是一下格式,但是播放不了! 000000010201d001217f487b40fcf54056d699d4d659b807013f3bb4bd5765bf56d47d5011b2f0526943239067a85c510bdf50e1c44bbc882618042a11803904157b203b5b4d6280a9fc87f03a83f1e5840a7d61c2098....

下载下来项目 为什么运行不了

执行了
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呢

not work on ios devices but work fine on safari

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')
};
`

Regarding streaming server

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

不能调用wfs.js内部函数&实时播放缓存问题

一、不能调用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()... ,或者修改配置为多页面应用,都未能成功解决。
请问有什么办法可以解决吗?

chrome tab页切换引起播放延迟加大

chrome 版本 84.0.4147.105(正式版本) (64 位)
win10 64位

切换tab到其他页面,再切换回来,发现视频从切换前开始播放, 后来似乎在努力追赶播放进度, 但切换时间过长还是无法追赶上。

有没有什么定位思路?

能不能把websocket模块提取出来

websocket模块是否能够提取出来,我的项目中需要自己打开websocket,然后处理每次接收到的数据后,才能得到真实的数据。

如何修改fMP4封装的帧率

我后端实现RTP流解析和NALU切片合并,把合并好的NALU通过websocket发送给前端wfs。
目前H264帧率为25,已将wfs中的H264_TIMEBASE改为3600,但是播放到20秒左右之后,视频会卡顿,播放器每隔每一秒出现缓冲一下的情况。
目前怀疑是封装时,帧率出现了问题。请问再已经修改了H264_TIMEBASE的情况下,还需修改哪些部分。
还有,现在对MP4的封装格式不了解,为什么PES2MP4SCALEFACTOR=4,这个是什么意思呢。

What's the license of wfs.js?

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.

Using chrome to play for about 13 hours, it stops automatically?

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 ?

generateVideoIS ERROR

我在使用这个库的时候,将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

能够解答下吗?

websocket管理

您好,请问websocket销毁,我调用wfs类的destroy方法就行了吗?

解码出现大量花屏

当H264裸流每次需处理的数据量越来越大时,会出现大量的花屏,请问这个有可以提供的解决思路么?

Support for H264 Main&High Profile?

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.

how to generate my h264 file?

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?

Websocket

How to use websocket method?
attachWebsocket?
How to link canvas in websocket?

谷歌浏览器无法显示

使用谷歌浏览器运行,没法打开视频,空白的,只能使用火狐浏览器播放;另外用火狐浏览器播放,有时视频播放一段又会从头开始,实在搞不懂

firefox 57 does not play normally

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 ?

problems when compiling

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

忽然不加载的问题。

1、我在一个页面接入了 wfs video的播放,但是在从其他页面切换回来这个页面时候很容易出现下面错误 internal error happened while processing wfsMediaAttached:client is not defined 然后video画面就加载不出来了。
2、一个页面放了两个 wfs + video 的播放。但是有一个很容易卡住就不动了,时间长了画面出现延迟。

Stream RTSP

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?

Change FPS

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!

faster than 1.0 speed

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?

win7无法正常播放

您好,我是用您的插件,在win10上可以正常播放,但是在win7上不能播放,请问可能是什么原因

cannot play w/o hardware acceleration in chrome 67 and chrome 66

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 ).

bug0

bug1

版本支持

ubuntu 版本下的 chrome(版本 79.0.3945.117)不支持解码格式吗 ?

Could you let me know how to debug dist/wfs.js?

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 streaming NAL Units

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

Parse H.264 stream failed

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!

PIPELINE_ERROR

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.