search

bilibili / flv.js

HTML5 FLV Player
Apache License 2.0
22.82k stars 3.38k forks source link

Stream FLV ffmpeg #86

Open alesimoes opened 7 years ago

alesimoes commented 7 years ago

I'm trying to send an image from my webcam to flv.js using websocket. But it is not in line with the format of the video. When I save the video and open the saved video it works perfectly.

Line of code to send the video to the websocket server: $ Avconv -i http: // camAddress / ovif -s 340x190 -c: v libx264 -b: v 128k -profile: v baseline -c: a aac -b: a 8k -strict experimental -f flv http: // ServerWebsocket.

If I change put to save the video with the same parameters and open with flv.js work.

Error captured: image

xqq commented 7 years ago

"Non-FLV, Unsupported media type!" means wrong FLV header (13 bytes)

alesimoes commented 7 years ago

OK. How do you make the websocket stream available to FLV.js?

I am sending using ffmpeg / avconv and I use WEBRTC as a stream server.

Thank you!

xqq commented 7 years ago

You need to write a websocket stream server on your own.

alesimoes commented 7 years ago

You can send me a example of your websocket server?

a1q123456 commented 7 years ago

you need to send flv header first, then send flv tag & prev tag size. remember ffmpeg only sends flv avcdecoderconfigurationrecord tag at the first start packet, you need to store it, when websocket connection established, first send flv header then send onMetadata script tag after that, you send avcdecoderconfigurationrecord tag before other video tag.

refer: https://www.adobe.com/content/dam/Adobe/en/devnet/flv/pdfs/video_file_format_spec_v10.pdf

xqq commented 7 years ago

good job

alesimoes commented 7 years ago

worked perfectly. But I still have a problem. Upon receiving the FLV header in a stream that is already active, I needed to restart the flv.js data. It's possible? Is there a method that rules flv.js?

a1q123456 commented 7 years ago

Check what are you sent from websocket , you should only send flv tag and prev tage size. not including rtmp header. Tage type13 is rtmp shared object which would never be sent from ffmpeg. 

Get Outlook for iOS

On Sun, Jan 29, 2017 at 11:57 PM +0800, "Alexandre Simões" notifications@github.com wrote:

Okay. I did it. But when it completes the bytes that were informed in bytesize I have the tagtype = 13;

 Var tagType = _v.getUint8 (0);

                            Var dataSize = _v.getUint32 (0,! Le) & 0x00FFFFFF;

                            If (offset + 11 + dataSize + 4> chunk.byteLength)

                            {

                                // data not enough for parsing

                                Console.log ("Invalid Package: Offset" + offset);

                                Console.log ("Invalid Package: DataSize" + dataSize);

                                Console.log ("Invalid package: chunk.byteLength" + chunk.byteLength);

                                Break;

                            }

                            If (tagType! == 8 && tagType! == 9 && tagType! == 18)

                            {

                                _logger2.default.w (this.TAG, 'Unsupported tag type' + tagType + ', skipped');

                                // consume the whole tag (skip it)

                                Offset + = 11 + dataSize + 4;

                                continues;

                            }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

alesimoes commented 7 years ago

Tanks, a1q123456 . I changed it. worked perfectly! I need restart a flv.js with a bad package detected. It's possible? Example. flvPlayer.reload ();

radojko commented 7 years ago

Asxtecnologia, can you share what websocket server that you are using, I would like also test live FLV over websockets.

szhansen commented 7 years ago

anybody could give me a example of your websocket server?

i use ffmpeg stream flv

a1q123456 commented 7 years ago

See my last git repo

Get Outlook for iOS

On Sat, Mar 18, 2017 at 6:14 PM +0800, "Hansen" notifications@github.com wrote:

anybody could give me a example of your websocket server?

i use ffmpeg stream flv

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

a1q123456 commented 7 years ago

Latest i mean

Get Outlook for iOS

On Sat, Mar 18, 2017 at 6:14 PM +0800, "Hansen" notifications@github.com wrote:

anybody could give me a example of your websocket server?

i use ffmpeg stream flv

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

szhansen commented 7 years ago

it's "a1q123456/rtmp-sharp-server"

???

a1q123456 commented 7 years ago

Yes

Get Outlook for iOS

On Sat, Mar 18, 2017 at 6:22 PM +0800, "Hansen" notifications@github.com wrote:

it's "a1q123456/rtmp-sharp-server"

???

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

alesimoes commented 7 years ago

Hi

I do not use RTSPSharp. The websocket server is simple it is only a bridge .. where every byte it receives it sends to the clients without any processing. The client, in the case flv.js will treat the bytes .. In ffmpeg you need to use it sending to tcp, so it does not send the RTMP headers

EXAMPLE OF THE CALL: Ffmpeg -i {0} -s 480x240 -r 10 -bufsize 800k -vb 800k -c: v libx264 -preset superfast -crf 40 -crf_max 55 -profile: v baseline -c: a aac -b: a 16k -strict experimental -f flv tcp: // {2}

szhansen commented 7 years ago

hi,asxtecnologia, could you give me completely solution,include the websoket server ? I try to use bellow solution,but fail ,could you help to take a look for me ? my solution is: 1.run ffserver to 'broadcast' a flv video in http ,such as 'http://192.168.1.100:8090/live.flv' 2.run ffmpeg to steam a raspiberry camera video to ffserver ,such as : 'raspivid -t 0 -w 1280 -h 720 -fps 25 -o - | ffmpeg -i - -vcodec copy -an -r 25 -f flv http://127.0.0.1:8090/feed1.ffm '

  1. run nodejs server on port 8080: var flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: 'true', url: 'http://192.168.1.100:8090/live.flv' }); 4.run chrome to open url: http://192.168.1.100:8080/live.flv, but fail: 'Fetch API cannot load http://192.168.1.100:8090/test.flv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.100:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.'
alesimoes commented 7 years ago

You're probably not getting why you're sending the package encapsulated in the rtmp protocol You need to send to a pure socket endpoint, using: -f flv tcp: //

So ffmpeg will not send using the rtmp protocol.

Understood?

I have 2 servers, a pure tcp server that is responsible for receiving the bytes ... these bytes are sent to a websocket server in the cloud, so the flv connects only to the socket server in the cloud.

xqq commented 7 years ago

You just didn't configure CORS header. https://github.com/Bilibili/flv.js/blob/master/docs/cors.md