Skip to content

React integration examples

English
Russian

Initializing search

Overview
Web Call Server 5.2
Web Call Server 5.2
- WCS 5.2 release notes
- Quick deployment and testing of the server
- WCS update to 5.2
- Installing and testing
  Installing and testing
- Removing
- Working with the server
  Working with the server
  - Architecture
    Architecture
    
    Architecture
    
    Server core (WCS Core)
    
    Main commands
  - Core settings
    Core settings
    
    Core settings
    
    flashphoner.properties config file
    
    Settings file loadbalancing.xml
    
    Settings file log4j.properties
    
    Settings file watchdog.log4j.properties
    
    Settings file watchdog.properties
    
    Settings file wcs-core.properties
    
    Settings file rtsp.auth
    
    Key store wss.jks
    
    File flashphoner.serverid
    
    Certificate myflashphoner-ca
    
    SDP settings files
    
    Settings file database.yml
    
    WCS.version
  - SSL certificates management
    SSL certificates management
    
    SSL certificates management
    
    Websocket SSL
    
    HTTPS
    
    Receiving and importing Let's Encrypt SSL certificate
  - Logging
    Logging
    
    WCS Core logs
  - Monitoring
    Monitoring
    
    Monitoring
    
    Using SSH tunnel
    
    Connecting from JConsole
    
    Connecting from Visual VM
    
    Connecting from Java Mission Control
    
    WCS integration to Prometheus
    
    WCS to Zabbix integration
    
    Load and resource usage information
    
    Information about errors and configuration parameters
    
    Stream parameters monitoring with REST API
    
    Server health check
    
    Centralized stream statistics and CDN events collection to MySQL DB
    
    Centralized server data logging to ClickHouse DB
  - Command line interface
    Command line interface
    
    Command line interface
    
    Using and accessing command line
    
    Access restriction from certain interfaces
    
    Complete list of CLI commands
    
    Public key authorization
    
    Users management
    
    Applications management
    
    Server settings management
  - CLI v 2
    CLI v 2
    
    CLI v 2
    
    Using and accessing CLI v 2
    
    Access restriction to CLI v2 from certain interfaces
    
    Complete list of CLI v 2 commands
    
    Streams management
    
    Connections management
    
    CDN node management
  - Network traffic analysis
    Network traffic analysis
    
    Network traffic analysis
    
    Websocket
    
    WebRTC
    
    RTSP / RTP
    
    RTMP
    
    SIP
    
    RTP
    
    HLS
    
    REST / HTTP
    
    RTMFP
  - Server domain name support as external address
  - HTTP interfaces access restriction
  - Websocket connections restriction by domain
  - Stream publishing and playback restriction by name
  - Websocket client URI configuration
  - Media ports management
  - Server ports configuration to accept client connections
  - Thread pools tuning
  - Diagnostics and troubleshooting
    Diagnostics and troubleshooting
    
    Diagnostics and troubleshooting
    
    Preparing an error report
    
    Possible problems and how to solve them
    
    Accessory tools
    
    How to get license number
    
    CPU load investigation
    
    Stack trace logging
    
    DNS testing and caching
  - Server tuning recommendations
  - Memory management in Java
  - Server performance testing
  - Before moving to production
- Server functions
- Streaming video functions
  Streaming video functions
  - Stream capturing and publishing to the server
    Stream capturing and publishing to the server
    
    From a web camera in a browser via WebRTC
    
    From the computer screen (screen sharing) in a browser via WebRTC
    
    From an HTML5 Canvas element (whiteboard) in a browser via WebRTC
    
    Using RTMP encoder
    Using RTMP encoder
    
    Using RTMP encoder
    
    Using ffmpeg
    
    Using OBS Studio
    
    Using Wirecast
    
    Using Adobe FMLE
    
    From an IP camera via RTSP
    
    From other server via RTMP
    
    RTMP stream republishing from other RTMP server
    
    From another WCS server via WebRTC
    
    From an Android mobile app via WebRTC
    
    From an iOS mobile app via WebRTC
    
    Capturing VOD from a file
    
    RTP stream publishing via RTSP
    
    MPEG-TS RTP stream publishing
    
    WebRTC publishing via WHIP
    
    Using Flash Player via RTMP
    
    Automatic streams capture on server start
    
    RTSP-interleaved stream capture from dump file
    
    Managing camera and microphone
    
    Bitrate management when capturing WebRTC stream in browser
    
    Key frames management while capturing WebRTC in browser
    
    Published stream normalizing
    
    Jitter buffer and frames collection in stream published
  - Captured stream management
    Captured stream management
    
    Stream recording
    
    Stopping the video stream on the server side
    
    Taking a PNG snapshot of the stream
    
    Stream decoding
    
    Stream transcoding
    
    Stream watermarking
    
    FPS filter
    
    Using AAC codecs
    
    WebRTC stream picture rotation
    
    Minimal publishing bitrate control
    
    Decoded frames interception and handling
    
    Decoded frames interception and hangling with OpenCV
    
    Server audio processing
    
    Injecting one stream into another
  - Playing a video stream from the server
    Playing a video stream from the server
    
    In a browser via WebRTC
    
    In a browser via MSE
    
    In a browser via Websocket + Canvas, WSPlayer
    
    In a browser via HLS
    
    In an Android mobile application via WebRTC
    
    In an iOS mobile application via WebRTC
    
    In a player via RTSP
    
    In a player via RTMP
    
    In a browser with Delight Player
    
    In a browser via WebRTC ABR
    
    In a browser using Flash Player via RTMP
    
    Stream availability for playback
  - Publishing and playing stream via WebRTC over TCP
  - Publisher and player channel quality control
  - WebRTC traffic encryption hardware acceleration
  - DTLS support for WebRTC streaming
  - WebRTC RTP bundle support
  - IPv6 support for WebRTC
  - Websocket traffic proxying for WebRTC publishing/playing
  - H264 encoding profiles management
  - Stream event passing to subscribers
  - Republishing a video stream
    Republishing a video stream
    
    Republishing a video stream
    
    Republishing to other RTMP server
    Republishing to other RTMP server
    
    Republishing to other RTMP server
    
    Republishing to Youtube
    
    Republishing to Facebook
    
    Republishing to WCS
    
    Republishing to Wowza
    
    Republishing to AWS MediaLive
    
    Republishing to Azure Media Services
    
    Republishing to Periscope, Twitch, Telergam etc
    
    To another WCS server via WebRTC
  - Working with chat rooms
- Stream mixer functions
  Stream mixer functions
- SFU functions with Simulcast
- Streaming video CDN functions
  Streaming video CDN functions
- Streaming video and SIP integration functions
  Streaming video and SIP integration functions
- WebRTC SIP gateway functions
  WebRTC SIP gateway functions
  - SIP calls in a WebRTC-compatible browser
  - SIP calls using Android SDK
  - SIP calls using iOS SDK
  - DTMF support
  - SIP complex functions
    SIP complex functions
    
    A call between two browsers made via the SIP server
    
    A call to a SIP conference
    
    A call to a mobile phone via the SIP server
    
    Known issues
- Hardware acceleration support for video transcoding
- Working through Firewall
  Working through Firewall
  - HAProxy
  - TURN server
- Load testing
  Load testing
- Load balancing
  Load balancing
  - Load balancer setup based on HAProxy
  - Obsoleted internal balancer functions
    Obsoleted internal balancer functions
    
    Obsoleted internal balancer functions
    
    Balancer architecture
    
    Configuring and starting the balancer
- Raw WebSocket API
- REST API
  REST API
- REST Hooks
  REST Hooks
  - REST Methods
  - Invoking a REST method
  - Authorization on backend
  - Four types of REST methods
    Four types of REST methods
    
    Four types of REST methods
    
    Type 1 - the connect method
    
    Type 2 - the direct invoke
    
    Type 3 - the event
    
    Type 4 - the incoming call
  - The list of methods and their parameters
  - restClientConfig object description
  - Controlling REST methods
  - The match between client invocations and REST methods
  - REST methods object fields
  - Event states
  - Data exchange - OnDataEvent
  - Error handling
  - Sending custom error message to a client
  - Using REST hook to authorize user by domain
- WCS in Amazon EC2
  WCS in Amazon EC2
- WCS on Digital Ocean
- WCS on Google Cloud Platform
  WCS on Google Cloud Platform
  - WCS on Google Cloud Platform
  - GCP load balancer with autoscale quick setup
- WCS in Yandex.Cloud
- WCS in Docker
- WCS in Equinix Metal (ex Packet.Net)
- WCS in WSL 2
- Billing
- Technical support
Web SDK 2.0
Web SDK 2.0
- Overview
- WebSDK 2.0 release notes
- Web server installation
- Building JavaScript API from sources
- NPM package
- Backward compatibility
- WebSDK streaming video examples
  WebSDK streaming video examples
- WebSDK SIP functions examples
  WebSDK SIP functions examples
- React integration examples
  React integration examples
- Vue integration examples
  Vue integration examples
  - Two Way Streaming Vue
- Logging
- Video publishing and playback on mobile devices
- Websocket connection control options
- How to reconnect to a stream automatically
- Publishing a stream using custom HTML5 video element
- Playing a stream in custom HTML5 video element
- Start stream playback with muted audio
- Muted audio notification when starting a stream playback automatically
- Rewinding (DVR) while playing HLS
- Publishing channel bandwidth testing
- Restore streaming from a chosen camera in iOS Safari
- WebSDK error handling
- Flash SDK
  Flash SDK
  - Flash Streaming
  - Flash Video Chat
iOS SDK 2.0
iOS SDK 2.0
- Overview
- iOS SDK release notes
  iOS SDK release notes
  - iOS SDK 2.5 release notes
  - iOS SDK 2.6 release notes
- How to build examples using Xcode before 10
- How to build examples using Xcode 10 and higher
- Swift Package Manager support
- iOS SDK Swift framework integration
- Using WebRTC framework shipped with iOS SDK
- ARM64 architecture support to build on ARM based Mac
- Excluding hardware architectures before uploading to AppStore
- iOS SDK streaming video examples
  iOS SDK streaming video examples
- iOS SDK SIP functions examples
  iOS SDK SIP functions examples
- iOS SDK Swift framework examples
  iOS SDK Swift framework examples
- iOS SDK error handling
- Logging
- Using RTCMTLVideoView to display a video
- Full screen video displaying
- Custom HTTP headers using while establishing Websocket connection
- Using UDP or TCP transport for WebRTC
- Muting playback volume
- Audio/video track status detection: muted/unmuted
- Sending JSON data to stream subscribers
- Stream availability checking
- Publishing bitrate constraints support
- Connection to an existing session
Android SDK 1.0 (Android 7 and older)
Android SDK 1.0 (Android 7 and older)
- Overview
- Android SDK 1.0 release notes
- Android SDK streaming video examples
  Android SDK streaming video examples
- Android SDK SIP functions examples
  Android SDK SIP functions examples
- Android SDK error handling
- SurfaceViewRenderer management in Android application
- Stream publishing from Android application in background mode
- WebRTC playback volume control
- Server SSL certificates checking while Websocket connection establishing
- Bluetooth headphone usage
- Publishing/playback channel quality control
- Using UDP or TCP transport for WebRTC publishing/playback
- Audio/video track status detection: muted/unmuted
Android SDK 1.1 (Android 8 and newer)
Android SDK 1.1 (Android 8 and newer)
SFU SDK 2.0
SFU SDK 2.0
- Overview
- SFU SDK release notes
- Building SFU SDK from source
- NPM package
- SFU SDK Examples
  SFU SDK Examples
  - Building the examples
  - SFU SDK builds before 2.0.248
    SFU SDK builds before 2.0.248
    
    SFU client
    SFU client
    
    SFU client
    
    main.js - main application logic
    
    controls.js - code to handle client controls
    
    chat.js - code to handle chat in the room
    
    display.js - code that is responsible for displaying local and remote media
    
    SFU common modules
    SFU common modules
    
    SFU common modules
    
    config.js - room configuration and local media access
    
    display.js - video and audio capturing and displaying
    
    SFU Player
    
    SFU Two Way Streaming
    
    WebRTC ABR Player
  - SFU SDK builds 2.0.248 and later
    SFU SDK builds 2.0.248 and later
    
    SFU client
    SFU client
    
    SFU client 2.0.248 and later
    
    main.js
    
    controls.js
    
    chat.js
    
    SFU common modules
    SFU common modules
    
    config.js
    
    display.js
    
    stats.js
    
    util.js
    
    SFU Player
    
    SFU Two Way Streaming
    
    WebRTC ABR Player
    
    SFU Bitrate Test
  - Audio/video tracks identification
  - Websocket server connection control
  - Video ABR playback using WebRTC statistics data
  - Publishing channel bandwidth testing
- Web server installation
WCS OAM 1.0
WCS OAM 1.0
- Overview
- WCS OAM 1.0 release notes
- Backend server installation and update
- Backend server setup and launch
- WCS setup
- Stream metrics storage
  Stream metrics storage
- Stream history storage in SQL DB
- Interaction with backend server
- Data acquisition from WCS
  Data acquisition from WCS
- Obtaining stream information from backend server
- Obtaining realtime stream information
  Obtaining realtime stream information
  - Obtaining realtime stream information
  - Alarm management
- Testing with web interface
OBS WebRTC 1.0
OBS WebRTC 1.0
WCS test stand 1.0
WCS test stand 1.0

React integration examples¶

Conference React

Two Way Streaming React

Two Way Streaming in Typescript

© 2009-2022 Flashphoner

Made with Material for MkDocs