Supported platforms and browsers
|MS Cromium Edge|
+ (iOS 14.6+)
1. The browser establishes a connection to the server via the Websocket protocol and sends the publish command.
2. The browser captures the image of an HTML5 Canvas element and sends a WebRTC stream to the server.
3. The second browser establishes a connection also via Websokcet and sends the play command.
4. The second browser receives the WebRTC stream and plays the stream on the page.
Quick manual on testing
Capturing a video stream from HTML5 Canvas and preparing for publishing
1. For test we use:
2. Press "Start". This starts streaming from HTML5 Canvas on which test video fragment is played:
3. To make shure that stream goes to server, open chrome://webrtc-internals
4. Playback graphs chrome://webrtc-internals
Below is the call flow in the Canvas Streaming example
1. Establishing a connection to the server.
2. Receiving from the server an event confirming successful connection.
ConnectionStatusEvent ESTABLISHED code
2.1. Set up and start HTML5 Canvas capturing
set up video capturing from Canvas code
draw on Canvas using requestAnimationFrame() or setTimeout() code
play test video fragment on Canvas code
set up audio capturing from Canvas code
3. Publishing the stream.
4. Receiving from the server an event confirming successful publishing of the stream.
StreamStatusEvent, status PUBLISHING code
5. Sending the audio-video stream via WebRTC
6. Stopping publishing the stream.
7. Receiving from the server an event confirming successful unpublishing of the stream.
StreamStatusEvent, статус UNPUBLISHED code
You can use this capability to capture your own video stream rendered in the browser, for example:
Capturing from a video-element works in Chrome:
Capturing from a canvas-element works in Chrome 66, Firefox 59 and Mac OS Safari 11.1:
cacheLocalResources parameter is ignored and local resources are not cached while
customStream is used.
Using requestAnimationFrame API
Since WebSDK build 2.0.200 the following example is added to use requestAnimationFrame API to draw image on HTML5 Canvas:
This is modern method comparing to drawing by timer, but this requires a browser tab to be active while canvas stream is capturing. If user switches to another browser tab or minimizes browser window to background, requestAnimationFrame API will stop. Drawing by timer does not stop in this case excluding mobile browsers.
1. Capturing from an HTML5 Video element does not work in Firefox on certain platforms and in old Safari versions.
Solution: use this capability only in the browsers supporting it.
2. In the Media Devices when performing HTML5 Canvas capturing:
- in Firefox, the local video does not display what is rendered;
- in Chrome, the local video does not display black background.
Solution: take browser specific behavior into account during development.
3. If the web applicaiton is inside an iframe element, publishing of the video stream may fail.
Symptoms: IceServer errors in the browser console.
Solution: put the app out of iframe to an individual page.
4. If publishing of the stream goes under Windows 10 or Windows 8 and hardware acceleration is enabled in the Google Chrome browser, bitrate problems are possible.
Symptoms: low quality of the video, muddy picture, bitrate shown in chrome://webrtc-internals is less than 100 kbps.
Solution: turn off hardware acceleration in the browser, switch the browser of the server to use the VP8 codec.
5. In some Chrome Canary builds H264 video is not publishing from canvas when hardware acceleration is enabled
Symptoms; ther is no video in a stream published from a canvas, but there is audio only
Solution: disable hardware acceleration in browser setting or publish VP8
6. Canvas capturing may stop while switching to another browser tab or minimizing browser window
Symptoms: canvas stream is freezing while playing it, player does not receive video and audio packets
Solution: hold the browser tab in foreground while capturing canvas from it.
7. Stream publishing resolution cannot exceed the canvas size
Symptoms: stream publishing picture size is equal or less than HTML5 Canvas elemet on the page size (width x height)
a) use HTML5 Canvas of appropriate size on the page to publish a desired resolution
b) transcode the stream picture to the desired size at server side