ant-media / Ant-Media-Server

Ant Media Server is a live streaming engine software that provides adaptive, ultra low latency streaming by using WebRTC technology with ~0.5 seconds latency. Ant Media Server is auto-scalable and it can run on-premise or on-cloud.
https://antmedia.io
Other
4.23k stars 618 forks source link

A working example of javascript SDK for webRTC #6584

Open SuperElectron opened 1 month ago

SuperElectron commented 1 month ago

Hi, I have a reactjs application and I want to use the javascript sdk, with typescript ...is there a complete example that works?

This one sets you up, but you cannot actually run the code because it is not complete

This one you just use the antMedia UI, but I don't know how to use this as a developer making a web application

These are all HTML

Iframe embed (wrong, copy and paste is different and doesnt have explation of how to use playOrder=webrtc)

Copy and paste, minor adjustments ... can't seem to get it working

This one makes me use my web camera and microphone, and can't connect to the stream-id. It's still incomplete so I played with it until it got something working, but it only works with my webcam no matter what stream-id i use.

Not sure if I'd ever use this with reactJS, not sure how to integrate

Not really reactJS applicable

Web player looks nice, but can't find working example. Plug it in, get browser errors

Long story short, is there a complete working example for reactJS?

lastpeony commented 1 month ago

React example in this documentation is working: https://antmedia.io/docs/guides/playing-live-stream/embedded-web-player/ What kind of error do you get? Also webrtc sdk in react is working. In the end its all javascript. See javascript samples here and adapt them in react. https://github.com/ant-media/StreamApp/tree/master/src/main/webapp/samples If you are using nextjs dont forget to declare the component as client side render.

rahul7827 commented 1 month ago

Also webrtc sdk in react is working. In the end its all javascript. See javascript samples here and adapt them in react.

💯

burak-58 commented 3 weeks ago

Hi @SuperElectron, Did you have a chance to try what @lastpeony suggested? If it worked for you, we can close the issue.

SuperElectron commented 3 weeks ago

Hey all, I should have been a little clearer. Here is my use case: This is what i was trying to do ....

A remote camera ffmpeg ---> rtmp

Ant Media

Web application


(1) embedded-web-player I used this one here (https://antmedia.io/docs/guides/playing-live-stream/embedded-web-player/) but it only connects with my web camera and I could not get it to actually connect with an incoming stream. For this reason I say it is not a complete example because there is a code snippet, but not a working example (for example I can pull the code and just run it).

(2) StreamApp sample https://github.com/ant-media/StreamApp/tree/master/src/main/webapp/samples

Thanks in advance, and I appreciate the responses :)

lastpeony commented 2 weeks ago

If you want a complete working example which you dont want to edit a single line of code or do anything related to development when stream is in broadcasting status on your ant media server just go to this url https://your_server:5443/{APP-NAME}/play.html?id={your_stream_id} example: https://test.antmedia.io:5443/LiveApp/play.html?id=teststream

this will try to play the stream with streamId "teststream" with webrtc first. If it cannot play with webrtc it will switch to HLS

this play.html page uses web player under the hood.

The code in web player doc page should be plug and play. All you need to do is replace your servers url and stream id after you integrated it to your project.

SuperElectron commented 2 weeks ago

I moved on to other SDK. Let me know if in the future you have something with next.js or react.js that works for streaming an incoming camera (not my webcam). Cheers

burak-58 commented 1 week ago

Hi @SuperElectron, Normally I expect that you could use the web player in your react project. Could you please share your experience with us. It may be any error message in the console, lack of documentation or difficulty with any document or anything else.