Help with WebRTC, Webcams and getUserMedia.

WebRTC and rendering help.
This article provides help on video/audio streaming, webRTC troubleshooting, webcams, setup, and more.

Browser capabilities can be checked including JavaScript API, codec and webRTC support, in the Browser Capabilities Web App
WebRTC is used in the Commew Web App for easy chat widget communication.

Recommended environment

Development environment: Windows 8/10 + Chrome
Caution: Make sure to use the latest version of the browser you are using.
Supported browsers: Usually, in addition to Chrome, any Chromium based browser (For example: Brave, Edge, and more: https://en.wikipedia.org/wiki/Chromium_(web_browser)#Active) and Firefox is also supported. Firefox is usually very similar to Chrome, but small differences can sometimes lead to bugs and performance issues. ※ Update (2022/05/13): New versions of Edge use Chromium, so has generally the same features as Chrome.
IE: Internet Explorer should be avoided.
Other browsers: Old versions of Edge have better support than IE, but Chrome and Firefox are preferred. It is important to be especially aware that Edge used to use ORTC not WebRTC.
OS: There are usually no problems using another OS, but hardware related bugs may occur in rare circumstances.

Plugins and extensions

Internet Explorer(IE):

Does not support WebRTC, but there is a plugin for supporting WebRTC in IE: Temasys

Screenshare in Chrome:

At the time of writing this document, obtaining screen data in Chrome without an extension was not possible.

However, this is now (2022/05/13) possible using “getDisplayMedia”. Support for this can be checked in this getDisplayMedia Demo

API information can be found here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#examples

An extension can be independently developed, or a stream can be obtained by using the extension below.

How to use HTTPS required functions when using HTTP

Functions that might not reveal private data are progressively requiring encryption.
The best counter-measure for this is obviously to switch your website to https.

Details below:

However, if not supporting https, then the following counter-measures are available:

Use an old browser

Due to vulnerabilities and inconvenience, this method is NOT RECOMMENDED. If going to use this method, a limited secure environment(Local, single domain) should be used.
Information can be found below, but compared to previously, this method has become difficult.

It is necessary to find the installation file from before the function limitation was added from the app history page.

Https only support for getUserMedia happened in version 47 for Chrome and version 46 for Chromium.
The portable version is better than the installer version of Chromium to use because there is no auto-update
feature.
Use version 45 from the link below for the appropriate Chromium (Portable).
For the Installer version of Chromium, each is grouped by commit number, which is difficult to determine from the version number. Important versions are 45 and below (Commit number < 31****).

Https support changes for Firefox in the link above were posted in April 2015 so versions 35.0 and before should be fine.
However, at the time of writing(2017/08/09), it seems getUserMedia can still be used on HTTP pages.

Old browsers tend to have webRTC and getUserMedia bugs and specification differences, which may result in code not working.

Install file

Source

Flag permissions

Chromium: –allow-running-insecure-content
The flags below can be used. Refer to the links below for command line information:
–unsafely-treat-insecure-origin-as-secure
–use-fake-device-for-media-stream
–use-fake-ui-for-media-stream

Chromium:
https://peter.sh/experiments/chromium-command-line-switches/
Firefox:
https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options?redirectlocale=en-US&redirectslug=Command_Line_Options
about:config

Setting exceptions via flags

Currently (2017/08/09), Chrome supports using flags, Firefox has no problems without flags.

Use another browser

Firefox can be used at the current time of writing (2017/08/09).
Functions only available in https for Chrome have been available using HTTP for a while in Firefox.
This is subject to change in the future.

Other

Counter-measure below for 「Secure Connection Failed」 in Firefox issue:
about:config
security.tls.insecure_fallback_hosts = 「www.domain.com」
https://superuser.com/questions/826232/how-to-bypass-the-secure-connection-failed-warning-in-firefox-33

Microphone/Webcam permissions

Due to this feature possibly revealing private information, please refer to “Permission required functions“.
The permissions mechanism allows separate access to device audio and video. Both simultaneously access the audio/video from the same and separate device is possible.
Depending on the environment, an error may occur if the function settings and the allowed device statuses do not match. If a problem occurs, both the settings and permission statuses should be checked.
Depending on the browser (Confirmed in Chrome), default devices may be available. This is not very useful for accessing media, but this may fix specific errors when you want to allow a media type but do not have the correct device.
The available permissions that can be selected may change depending on installed software (Audio management software).

Microphone/webcam problems

Fail to acquire audio from device with multiple functions: Depending on the browser(Occurred multiple times in Firefox), audio of a device can not be acquired. For
example, both video and audio functionality exists for a webcam, but audio can not be acquired. In this case, there is a chance that the application will stop, depending on the source code. This can be solved by using a separate device for each function.
Unsupported browser: Check whether your browser can use getUserMedia: http://caniuse.com/#search=getusermedia
Update to a new browser.
No device: There is a chance the device is not inserted. Please check the device is properly inserted.
The environment does not support the device: Check whether the device can be used on other websites.
If the above fails, check whether it can be used in other browsers or elsewhere in the OS.
If the device does not work on the OS, try reinstalling the drivers and contacting the manufacturer.

Permission required functions

Functions that might reveal private information often require permissions due to standardized specifications.
Permissions are mainly controlled via displaying upon execution, in-app flags or setting files.
The easiest method is “displaying upon execution”. When the function is executed, a pop-up should be displayed.
The selection made should be usable across the session. When on an https URL, it is common for the selection to be remembered.

Web camera environment

When using a webcam, the following is recommended to play clear video:

Brighten the room. When there is little light, the image quality becomes rough and loses sharpness. It especially causes issues for image recognition.

Microphone environment

When using a microphone, the following is recommended to play clear audio:

Do not output audio too close to the microphone. When audio is outputted too close to a microphone, the audio from the microphone is inputted into the microphone again, causing a howling effect.

WebGL support

Pages with a canvas (Image rendering functionality) often use WebGL. Even more so when rendering in 3D.
In order for the code to work and performance not to drop, WebGL should be enabled.

Chrome: chrome://flags/　Enabled by default, but should check each WebGL flag.
Firefox: about:config Make sure webgl.disabled = false + about:support WebGL rendering details are correct.

WebRTC issue report tools

WebRTC issue reporting

The following information should be provided when reporting WebRTC issues.
It becomes a lot easier to handle issues as more accurate data is provided.

OS (Including version number)
Browser (Including version number)
Web camera (Source of video)
Microphone (Source of audio)
Network speed
Network topology
Allowed and blocked ports for TCP and UDP
ICE Candidates log(If available)

WebRTC ports

WebRTC uses the following ports.

Signalling: 80 or 443
STUN/TURN: (default)3478, (Google STUN)19305 or 19307, (TLS)5349, (HTTP)80 or 443
P2P: 0~65535 (Often, 50000 and above)

Notes

Please consider trying out the Commew Web App for P2P communication, trying out WebRTC, testing out webcams, and more.