Error: Read Econnreset Npm Err Socket Io
webrtc
Spider web realtime communication SDK
This is a ready to deploy webrtc SDK and SaaS for a customized and flexible communication and collaboration solution .
Architecture
The Solution primarily contains nodejs frameworks for hosting the projection and webbsockets over socket.io to perform offering - answer handshake and share SDP (Session description protocol ). 
Technologies used
-
WebRTC Web based real time communication framework. read more than on webrtc
-
Node ( v10.0.0) Asynchronous event driven JavaScript runtime
-
socket.io ( v0.9) Communication and signalling
Notation : while its possible to utilize whatsoever prtotocol like SIP , XMPP , AJAX , JSON etc for this purpose , modifying thsi libabry will require a lot of rework . Information technology would be advisble to start from apprtc straight in that case .
- Grunt It is a task Runner and its used to automate running of command in gruntfile
grunt -verbose SDK
Project is divided into 4 parts
- Cadre RTC Conn Lib
- Wrappers for the Core Lib containing feature sets and widgets like screensharing , recording , pointer share , motorcar learning , face detection etc
- Demo Applicatins similar two party full-features , multi-political party full features etc which implement and utilise the SDK by invoking the constructirs , emitters and listeners .
- SIgnaller over socket.io for SDP excahnge on offer reply model
Building the SDK
Download the dev dependencies by setting the NODE_ENV to dev . This will install all grunt and gulp dependencies used for building the SDK
NODE_ENV=development npm install To build the RtcConn , outputs RTCMultiConn
grunt rtcconn To build the webrtcdev lib . Information technology encapsulates the rtcconn core along with external libs for building various custom features . Outputs webrtcdevelopment.js , webrtcdevelopment_header.js , webrtcdevelopment.css , webrtcdevelopment_header.css and webrtcdevelopmentserver.js
gulp production Steps
To run this project following steps need to be followed in that order :
i. Get the project from github
git clone https://github.com/altanai/webrtc.git webrtc 2. install nvm ( node version manager )
coil -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | fustigate . ~/.nvm/nvm.sh nvm install v12.0.0 nvm use v12.0.0 3. install npm and update the dependencies It will read the package.json and update the dependencies in node_modules folder on project location
sudo apt-get install npm npm install four. Modify ENV variables and Test
To change the ports for running the https server and rest server, goto env.json
{ "hostname" : "host" , "enviornment" : "local" , "host" : "localhost" , "jsdebug" : truthful, "httpsPort" : 8086, "restPort" : 8087 } To run the tests
5. Start up the Server
To start the Server in dev mode and stop the server as soon equally Ctrl+ C is hit or the terminal widnow is closed .
read more than well-nigh node
To first the Server using npm beginning ( using packet.json) , behaves aforementioned as before run using node. Nosotros use supervisor to restart the server incase of exceptions or new lawmaking .
6. JS and CSS Libs
Brand a webpage and give holders for video and button elements that SDK will utilise .
Within the head tag of html build/webrtcdevelopment_header.css build/webrtcdevelopment_header.js
Later the body tag of html build/webrtcdevelopment.css build/webrtcdevelopment.js
or use the minified scripts build/webrtcdevelopment_min.css build/webrtcdevelopment_min.js
seven. Configure
Create the webrtc dom object with local and remote objects
local object :
var local = { video : "myAloneVideo" , // proper noun of the local video element videoClass : "" , // class of the localvideo videoContainer : "singleVideoContainer" , // outer container of the video element userDisplay : false , // exercise yous desire to display user details userMetaDisplay : false , userdetails:{ // users details include name , email , color username : username , usercolor : "#DDECEF" , useremail : useremail , role : "participant" // role of user in the session , can be participant , admin , inspector } } remote object :
var remote = { videoarr : [ "myConferenceVideo" , "otherConferenceVideo" ] , // conatiners for the video subsequently session is fabricated // commencement ane is usually the local video holder followed past remote video holders videoClass : "" , maxAllowed : "6" , videoContainer : "confVideoContainer" , userDisplay : simulated , userMetaDisplay : faux , dynamicVideos : fake } Incoming and outgoing media configuration ( self explanatory ) :
var incoming = { audio : truthful , video : true , information : truthful , screen: true } ; var outgoing = { audio : truthful , video : true , data : true , screen: truthful } ; webrtcdomobj = new WebRTCdom ( local , remote , incoming , outgoing ) ; 7. Adding Widgets
set widgets (explained in section beneath)
Set up widgets and their properties
viii. Creating session
Get session id automatically
sessionid = webrtcdevobj . makesessionid ( "reload" ) ; or get session proper name from user
sessionid = webrtcdevobj . makesessionid ( "noreload" ) ; 9. Create a session json object with turn credentials and the session created from above pace
set up preference for the incoming and outgoing media connectedness. By default all are set up to true .
var incoming = { sound: true , video: true , data: true , screen: true } ; var approachable = { audio: true , video: truthful , data: truthful , screen: true } ; 10. finally initiate the webrtcdev constructor
webrtcdevsessionobj = webrtcdevobj . setsession ( local , remote , incoming , outgoing , session , getWidgets ( ) ) ; 11. Offset the session
webrtcdevobj . startCall ( webrtcdevsessionobj ) Widgets
Currently available widgets are * Conversation * Fileshare * Timer * Describe * Screen Record * Screen Share * Video Tape * Snapshot * Minimising/ maximising Video * Mute (audio and/or video) * Describe on Sail and Sync * Text Editor and Sync * Reconnect
Description of Widgets with SDK invocation
i. Chat
User RTCDataConnection api from webRTC to send peer to peer nessages inside a session. If camera is present the SDK captures a screenshot with user's cemars feed at the isnatnt of typing the message and send along with the message.
When the chat widget is agile , if the dom specified by the container id is present then webSDK uses as it is, else it creates ane default box
{ active: true, container: { id: "chatContainer" // dom id of the conversation conatiner }, inputBox:{ text_id: "chatInputText" , // dom id of the chta's input box sendbutton_id: "chatSendButton" , // dom id for the chat's send button minbutton_id: "minimizeChatButton" // dom id for minimizing the Chat conaginer }, chatBox:{ id: "chatBoard" // dom id for the conversation board where all messages are dispalyed }, push:{ // on and off push states for the chat widget button class_on: "btn btn-alert glyphicon glyphicon-font topPanelButton" , html_on: "Chat" , class_off: "btn btn-success glyphicon glyphicon-font topPanelButton" , html_off: "Conversation" } } Upcoming : Adding emoticons to Chat
2. File-share
Uses the RTCDataConnection API from WebRTC to exchange files peer to peer. Progress bar is displayed for the chunks of file transferrred out of total number of chunks. Many different kindes of file transfer accept been tested such every bit media files ( mp3 , mp4 ) , text or pdf files , microsoft pr libra office dicuments , images ( jpg , png etc ) etc .
File share widgets creates uses 2 containers - File Share and File List . If the dom ids of the container are not present on the page , the SDK crestes default conainers and appends them to page
The list of files with buttons to view , hibernate or remove them from file viewers are in file Viewer container . Displaying or playing the text or media files happens in file share container , which also has button to maximize , minimize the viewer window or in example of images to rotate them.
For divided file share container
{ agile : true, fileShareContainer : "fileSharingRow", // File sharing container fileshare:{ // components of file sharing container rotateicon:"assets/images/refresh-icon.png", // rotate icon minicon:"assets/images/arrow-icon-down.png", // min icon maxicon:"assets/images/arrow-icon.png", // max icon closeicon:"assets/images/cantankerous-icon.png" // shut icon }, fileListContainer : "fileListingRow", // File Listing container container filelist:{ // components of file listing conainer downloadicon:"", // icon donwload trashicon:"", // icon trash saveicon:"", // icon salvage showicon:"", // icon testify hideicon:"", // icon hide }, button:{ id: "fileshareBtn", // dom for widget button to call file share class_on: "col-xs-8 text-middle fileshareclass", html:"File" }, props:{ fileShare:"divided", // Tin be divided for two particiapnts , chatpreview , single for many participants , hidden fileList:"divided" // same equally aboev Can be divided , single , hidden } } or for single file share container for all peers
allow filesharewidget = { active: true, fileShareContainer: "fileSharingRow" , fileshare: { rotateicon: "assets/images/refresh-icon.png" , minicon: " " , maxicon: " " , closeicon: "avails/images/cross-icon.png" }, fileListContainer: "fileListingRow" , filelist: { minicon: " " , maxicon: " " , downloadicon: " " , trashicon: " " , saveicon: " " , showicon: " " , hideicon: " " , stopuploadicon: " " }, button: { id: "fileshareBtn" , class_on: "file-share" , html: "File" }, props: { fileShare: "single" , //Can be divided , chat preview , single , hidden fileList: "single" //Can be divided , unmarried , hidden }, sendOldFiles: false // If new participant join conf , or listener join , then should he receive old files or not } iii. Timer
Creates or assigns a timer for teh ongoing sesssion . Also displays the geolocation and timezone of the peers if perssion if provided . Timer can start upwards or downwards. Can be used for billing and policy control .
{ agile: true, type: "forward" , // Forwards timer starts from 0:0 : 00 goes thereafter, astern timer ticks backword from prespecified time limit counter:{ hours: "countdownHours" , // dom id for hours minutes: "countdownMinutes" , // dom id for mins seconds : "countdownSeconds" // dom if for seconds }, upperlimit: { // upperlimit of time for the session hour:0 , min: 3 , sec: 60 }, span:{ // dom ids for local and remote time labels currentTime_id: "currentTimeArea" , currentTimeZone_id: "currentTimeZoneArea" , remoteTime_id : "remoteTimeArea" , remoteTimeZone_id: "remoteTimeZoneArea" , class_on: " " }, container:{ id:'collapseThree', minbutton_id:'timerBtn' }, button :{ id: 'timerBtn' // dom for widget timer button to call } } 4. Screen Record
Records everything nowadays on the tab selected forth with sound and displays recording equally mp4 file. Employ an extension and pre-declared safe-site to facilitate captuing the tab.
{ active : true, videoRecordContainer: truthful, // container for storing or displaying recorded video button:{ // button to control screen control widget and its on / off states id: "scrRecordBtn" , class_on: "btn btn-lg screenRecordBtnClass On" , html_on:'', class_off: "btn btn-lg screenRecordBtnClass Off" , html_off: '' } } 5. Screen-share
One of the most powerful features of the SDK is to capture the current screen and share it with peer over RTC Peer connectedness channel. Simmilar to csreen record , uses an extension and pre-declared site ownership to capture the screen and share as peer to peer stream . Button for screen share has three states -
- install button for inline installation of extension from page ,
- share screen push and
- view push button for incoming screen by peer .
{ active : true, screenshareContainer: "screenShareRow" , // container to display screen existence shared button:{ installButton:{ // widget button to start inline installation of extension id: "scrInstallButton" , class_on: "screeninstall-btn on" , html_on: "Stop Install" , class_off: "screeninstall-btn off" , html_off: "ScreenShare" }, shareButton:{ // widget button to start sharing screen , deactivated once already agile or when peer is sharig id: "scrShareButton" , class_on: "btn btn-lg on" , html_on:'<img championship= "Cease Screen Share" src=avails/images/icon_ 2 .png />', class_off: "btn btn-lg off" , html_off:'<img title= "Start Screen Share" src=assets/images/icon_ 2 .png />', class_busy: "btn btn-lg busy" , html_busy:'<img title= "Peer is Sharing Screen" src=assets/images/icon_ 2 .png />' }, viewButton:{ // button to view the icnoming screen share id: "scrViewButton" , class_on: "screeninstall-btn on" , html_on: "Stop Viewing" , class_off: "screeninstall-btn off" , html_off: "View Screen" } } } 6. Video Record
Records video-stream. Created for each peer video .
{ active : true, videoRecordContainer : true, push:{ class_on:"pull-correct btn btn-modify-video2_on videoButtonClass on", html_on:"<i class='fa fa-circle' title='Terminate recording this Video'></i>", class_off:"pull-right btn btn-modify-video2 videoButtonClass off", html_off:"<i class='fa fa-circle' title='Record this Video'></i>" } } 7. Snapshot
Takes a snapshot from video stream . Will be created for each inidvidual peer video .
{ active : true, snapshotContainer: true, button:{ class_on: "pull-right btn btn-modify-video2 videoButtonClass", html_on:"<i class='fa fa-th-large' title='Take a snapshot'></i>" } } 8. Minimising/ maximising Video
To enable the user to spotter video in full screen mode or to inimize the video to hide it from screen. Will exist seprately created for each individual peer video .
{ active: true, max: { button: { // button to maximise the video to full screen fashion id: 'maxVideoButton', class_on:"pull-right btn btn-modify-video2 videoButtonClass On", html_on:"<i grade='fa fa-laptop' title='total Screen'></i>", class_off:"pull-right btn btn-modify-video2 videoButtonClass Off", html_off:"<i class=' fa fa-laptop' championship='total Screen'></i>" } } , min : { button: { // push to minimize or hide the video id : 'minVideoButton', class_on:"pull-right btn btn-modify-video2 videoButtonClass On", html_on:"<i course='fa fa-minus' title='minimize Video'></i>", class_off:"pull-right btn btn-modify-video2 videoButtonClass Off", html_off:"<i class='fa fa-minus' title='minimize Video'></i>" } } } nine. Mute (sound and/or video)
Mutes the audio or video of the peer video . Created for each peer video.
{ active: imitation, audio: { active: false, button: { class_on: "pull-right videoButtonClass on", html_on: "<i class='fa fa-microphone-slash'></i>", class_off: "pull-right videoButtonClass off", html_off: "<i course='fa fa-microphone'></i>" } }, video: { active: false, button: { class_on: "pull-right videoButtonClass on", html_on: "<i class='fa fa-video-photographic camera'></i>", class_off: "pull-right videoButtonClass off", html_off: "<i class='fa fa-video-photographic camera'></i>" } } } 10 . Reconnect
Allows a user to recoonect a session without refreshing a page . Will enable him to driblet the session and create a new one.
{ active : fake, button : { id: "reconnectBtn", class:"btn btn-success glyphicon glyphicon-refresh topPanelButton", html:"Reconnect", resyncfiles : fake } } 11. Cursor
{ active: false, arrow: { class_on: "fa fa-manus-o-upwards fa-3x" }, button: { id: 'shareCursorButton', class_on: "pull-right videoButtonClass On", html_on: "<i class='fa fa-hand-pointer-o fullscreen'></i>", class_off: "pull-correct videoButtonClass Off", html_off: "<i class='fa fa-hand-pointer-o fullscreen'></i>" } } 12. Inspector
{ agile: true, push:{ id: "ListenInButton", textbox : "listenInLink" } } 13. Debug
To turn debug on
{ debug: false } 14. Help
Activates the help log past start captures console logs , info , messages , warning in a retreivabe array. Tin also send the logs tto pre-specified URL every bit paylaod and/or display the logs in dom as specified
{ agile: true, helpContainer : "help-view-trunk" , screenshotContainer: "assistance-screenshot-trunk" , descriptionContainer: "help-description-body" } 15. Stats
Collects network and webrtc stats. Captures them in logs and displays on dom as specified
{ active : true, statsConainer : "network-stats-trunk" } 16. Draw
{ active: true, drawCanvasContainer: "drawBoardRow" , button: { id: "draw-webrtc" , class_on: "icon-pencil On" , html_on: '', class_off: "icon-pencil Off" , html_off: '' } } Assign individual widgets to a json object called widgets
{ debug: faux, reconnect: { active: imitation }, timer: timerwidget, chat: chatwidget, fileShare: filesharewidget, mute: mutewidget, videoRecord: videorecordwidget, snapshot: snapshotwidget, cursor: cusrsorwidget, minmax: minmaxwidget, drawCanvas: drawwidget, screenrecord: screenrecordwidget, screenshare: screensharewidget, listenin: listeninwidget, assistance: helpwidget, statistics: { active: false, statsConainer: "network-stats-body" } } NAT traversal
From variety of options you can choose
1. Only free STUN from google
var iceservers_array = [ { urls: [ "STUN stun.50.google.com:19302" ] } ] ; ref : https://stackoverflow.com/questions/20067739/what-is-stun-stun-l-google-com19302-used-for
two. Xirsys free account for TURN
3. self-hosted COTURN
Goto https://coturn.net/turnserver/ to choose the version you want to download , at the time of writing this iv.5.ii was the latest
wget https://coturn.internet/turnserver/v4.five.2/turnserver-4.5.2.tar.gz goto https://packages.qa.debian.org/c/coturn.html the debian coturn package is documented at https://packages.debian.org/jessie/coturn
Install dependencies
sudo apt-get install libssl-dev sudo apt-go install libsqlite3 (or sqlite3) sudo apt-get install libsqlite3-dev (or sqlite3-dev) sudo apt-get install libevent-dev sudo apt-become install libpq-dev sudo apt-get install mysql-client sudo apt-get install libmysqlclient-dev sudo apt-become install libhiredis-dev https://quickref.mutual-lisp.net/cl-libevent2.html
build
./configure make sudo make install After the build, the post-obit binary images will be available:
- turnserver
- turnadmin
- turnutils_uclient
- turnutils_peer
- turnutils_stunclient.
- turnutils_rfc5769check
Adding to signalling server
var iceservers_array = [ { urls: [ "STUN stun.l.google.com:19302" ] } , { url: 'turn:user@media.brightchats.com:3478' , credential: 'root' } ] ; supported RFC
- RFC 5766 - base TURN specs;
- RFC 6062 - TCP relaying Turn extension;
- RFC 6156 - IPv6 extension for Turn;
Event listeners
Implemented event listeners :
-
onLocalConnect
-
onSessionConnect
-
onScreenShareStarted
-
onScreenShareSEnded
-
onNoCameraCard
Keys and certs
To generate a CSR for external Certificate Authority such equally Godaddy
openssl req -x509 -newkey rsa:4096 -sha256 -nodes -keyout ssl_certs/server.key -out ssl_certs/server.crt -subj "/CN=webrtc.altanai.com" -days 3650 Demo
open tab on chrome or mozilla browser and add together a link to the https server using nodejs script https://127.0.0.1:8086/multiparty_fullfeatures.html
Other implementation of the SDK are
webrtc_quickstart - https://github.com/altanai/webrtc_quickstart
webrtc_usecases - https://github.com/altanai/webrtc_usercases
Extra
Following are the additional libraries packed with the project
Gulp Minify and concat the js and css files into minified scripts
Job Runner yous can run gulp lone to minify and concat the js and css files into min-scripts
gulp or can run grunt to concat , minifify , ugligy , push to git and npm all together
grunt production forever Keeps running even when window is not agile
cd WebCall forever start webrtcserver.js Notification / Alerting
//tbd
creating doc
./node_modules/.bin/esdoc open ./docs/index.html start with process manager pm2
To first the Server using PM2 ( a procedure director for nodejs) , install pm2 globally
create a conf json
Add together config to json
apps : [{ script: 'webrtcserver.js', sentinel: '.' }] start pm2
pm2 start ecosystem.config.js with env
pm2 beginning ecosystem.config.js --env production Working steps
1.create a new session
Navigate on browser https://localhost:8082/#2435937115056035 which creates websocket over socket.io wss://localhost:8083/socket.io/?EIO=3&ship=websocket
ii.cheque for channel presence
first customer bulletin
[ "presence" , { aqueduct: "2435937115056035" } ] on the server side
Presence Bank check alphabetize of 2435937115056035 is false websocket response from server ["presence", faux]
3.If channel doesnt exist already create
client bulletin to open aqueduct
[ "open up-channel" , { channel: "2435937115056035" , sender: "gxh0oi2jrs" , maxAllowed: 6 } ] server response
------------open channel------------- 2435937115056035 by gxh0oi2jrs registered new in channels [ '2435937115056035' ] information added to aqueduct { '2435937115056035' : { channel: '2435937115056035' , timestamp: '12/18/2018, x:eighteen:01 PM' , maxAllowed: vi, users: [ 'gxh0oi2jrs' ], condition: 'waiting' , endtimestamp: 0, log: [ '12/xviii/2018, 10:eighteen:01 PM:-channel created . User gxh0oi2jrs waiting ' ] } } websocket response from server
[ "open-channel-resp" , { status: true, channel: "2435937115056035" } ] four.Join a session and check for aqueduct presence
navigate some other browser client to same session url such as https://localhost:8084/#2435937115056035?proper noun=aa&electronic mail=abc@gmail.com
check presence [ "presence" , {channel: "2435937115056035" }] [ "presence" , truthful] Presence Check alphabetize of 2435937115056035 is true 5.If channel is present join the channel
[ "bring together-channel" , {aqueduct: "2435937115056035" , sender: "2ilwvn9qq39" ,…}] ------------join channel------------- 2435937115056035 by 2ilwvn9qq39 isallowed truthful [ "bring together-aqueduct-resp" { status: true, channel: "2435937115056035" , users: [ "gxh0oi2jrs" , "2ilwvn9qq39" ] }] Debugging assistance
CORS
Issue1 CORS exception prevents loading the connection to socket.io server
Access to XMLHttpRequest at 'https://domain.com:8083/socket.io/?EIO=3&transport=polling&t=NiEMZt0' from origin 'https://domain.com:8084' has been blocked past CORS policy: No 'Admission-Control-Allow-Origin' header is present on the requested resource solution1 Ensure that the resource is added to servers cors origin list . By default it works on same origin but.. Note : Aforementioned hostname but diff ports still counts every bit dissimilar origins Test cors
ringlet -H "Origin: https://domain:8084" --head https://domain.com:8083/socket.io Issue2 Using wildcard
value of the 'Access-Control-Allow-Origin' header in the response must non exist the wildcard '*' when the asking'southward credentials mode is 'include'. The credentials fashion of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. solution the requested origin for cross origin requests should be loaded to env varaible and will be refered by socket.io and rest api server and signaller
const allowedOrigins = ['/.*localhost.*/' ]; process.env.allowedOrigins = allowedOrigins; Issue3 CORS with credentails
value of the 'Access-Control-Let-Credentials' header in the response is '' which must be 'true' when the asking's credentials mode is 'include'. The credentials way of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. solution add together credentials access when using cross origin or brand credentails simulated
getusermedia Exceptions
Cases when user deosnt have ir isnt able to acces his sound/video devices due of any of reasons such as
- user has no webcam or microphone
- intentioanlly/accidentally denied access to the webcam
- plugs in the webcam/microphone after getUserMedia() code has initialized
- device is already used by some other app on Windows
- user dismisses the privacy dialog
Rejections of the returned promise are made by passing a DOMException mistake object to the hope'due south failure handler. The DOMException interface represents an abnormal upshot
Possible errors are:
openrmc.webrtc.Errors = { NOT_SUPPORTED : 'NOT_SUPPORTED', CONSTRAINTS_REQUIRED : 'CONSTRAINTS_REQUIRED', AUDIO_NOT_AVAILABLE : 'AUDIO_NOT_AVAILABLE', VIDEO_NOT_AVAILABLE : 'VIDEO_NOT_AVAILABLE', AV_NOT_AVAILABLE : 'AV_NOT_AVAILABLE' } ; -
AbortError - Although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a NotReadableError, some problem occurred which prevented the device from existence used.
-
NotAllowedError - One or more of the requested source devices cannot be used at this time. This will happen if the browsing context is insecure (that is, the folio was loaded using HTTP rather than HTTPS). It too happens if the user has specified that the current browsing instance is not permitted admission to the device, the user has denied access for the current session, or the user has denied all access to user media devices globally. On browsers that support managing media permissions with Feature Policy, this error is returned if Characteristic Policy is non configured to permit admission to the input source(due south). Older versions of the specification used SecurityError for this instead; SecurityError has taken on a new meaning.
-
NotFoundError - No media tracks of the type specified were found that satisfy the given constraints. NotReadableError Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Spider web page level which prevented access to the device.
-
OverconstrainedError - The specified constraints resulted in no candidate devices which met the criteria requested. The error is an object of type OverconstrainedError, and has a constraint property whose string value is the name of a constraint which was impossible to meet, and a message holding containing a man-readable cord explaining the problem. Because this fault tin occur even when the user has not yet granted permission to apply the underlying device, it can potentially be used as a fingerprinting surface.
-
SecurityError - User media back up is disabled on the Document on which getUserMedia() was called. The mechanism by which user media support is enabled and disabled is left up to the individual user agent.
-
TypeError - The list of constraints specified is empty, or has all constraints prepare to false. This can also happen if you attempt to telephone call getUserMedia() in an insecure context, since navigator.mediaDevices is undefined in an insecure context.
ref : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Errors on gulp
sourcemap related USe gulp-babel@viii.0.0
arrow functions related use tarns compiler with preset env plugin for changes arrow function to normals ones before minifying
WSS errors
Issue1 cyberspace::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
solution This error is definite mismatch between the data that is advertised in the HTTP Headers and the data transferred over the wire. Information technology could come from the following: Server: If a server has a problems with certain modules that changes the content only don't update the content-length in the header or just doesn't work properly. It was the instance for the Node HTTP Proxy at some point (encounter here) Proxy: Any proxy betwixt you lot and your server could exist modifying the request and non update the content-length header.
Issue2 wss error connecting to webrtcserver like
{ "code" :3, "message" : "Bad request" } or
Error: read ECONNRESET Emitted 'mistake' upshot on TLSSocket case at: at emitErrorNT (internal/streams/destroy.js:84:8) at processTicksAndRejections (internal/process/task_queues.js:84:21) { errno: -104, code: 'ECONNRESET' , syscall: 'read' }
Solution ECONNRESET error ways that peer closed connexion https://nodejs.org/api/errors.html . To overcome this case either gear up try grab and reconnect to prevent sever from crashing or client from disconnectinig or if you are running the http and wss server on the sae port like i was doing . Put them on seprate ports . I started seeing this problem a lot after I upgraded the http protocol version from https to http2 ( using native node module )
for example for http server
const app = http2 . createSecureServer ( options , ( request , response ) => { request . addListener ( 'finish' , function ( ) { file . serve ( request , response ) ; } ) . resume ( ) ; } ) ; app . heed ( backdrop . http2Port ) ; the once again declare it separately for wss server
const server = require ( 'http2' ) . createSecureServer ( options ) ; const io = require ( 'socket.io' ) ( server , { secure: true , serveClient: false , pingInterval: 10000 , pingTimeout: 5000 , cookie: simulated } ) ; io . origins ( '*:*' ) ; io . on ( 'connect' , onConnection ) ; server . mind ( properties . wss2Port ) ; Consequence three WSS errors on socket.io as, fault in connexion establishment: internet::ERR_SSL_PROTOCOL_ERROR
or WebSocket opening handshake was cancelled
solution recheck the session connection to socket.io , especially the ports and whther or not they are already in use
Consequence 4 Error during WebSocket handshake: Unexpected response code: 403
solution Related to ECONNRESET
Upshot 5 {code: 0, bulletin: "Transport unknown"} lawmaking: 0 message: "Transport unknown" or Status Code: 400 Bad Request
solution Either specify same protocol on both client and servers ide or do not specify and transport protocol at all . For isntance this problem arises when server specifies websocket ship but client tries connecting over polling server specifying tarsnport websocket
ioServer ( httpApp , { transports: [ 'websocket' ] , secure: true } ) But client tries polling connection https://localhost:8086/socket.io/?userid=iu02bk1b77g&sessionid=httpslocalhost8082clientindexhtm&transport=polling&t=N7ToS63
errors on SSL certs
Issue six CERT INVALID ERROR such as
NET::ERR_CERT_AUTHORITY_INVALID
Solution Since the certs are cocky signed , navigate to the wss port on http and permit permission under teh advanced button in scren below 
Issue 7 GoDaddy SSL ecrts key gives no kickoff line
library: 'PEM routines' , part: 'get_name' , reason: 'no start line' , lawmaking: 'ERR_OSSL_PEM_NO_START_LINE'
Solution showtime check whether the key file has valid certificate
openssl x509 -text -in file.primal Check if information technology prints an error including the text "unable to load certificate", then your file is not sufficient. See if the format is right
openssl pkcs8 -in fundamental.txt -inform pem Error reading fundamental 140542854250944:mistake:0909006C:PEM routines:get_name:no start line:../crypto/pem/pem_lib.c:745:Expecting: ENCRYPTED Private Primal If not and so re-salvage the file with charectar encoding UTF-8 and Line ending Unix/Linux
Errors on TURN
Issue i Pass issues on starting coturn
CONFIG ERROR: Empty cli-password, and so telnet cli interface is disabled! Please set a non empty cli-password! 0: : WARNING: cannot find certificate file: turn_server_cert.pem (i) 0: : Warning: cannot kickoff TLS and DTLS listeners considering certificate file is non set properly 0: : WARNING: cannot find private cardinal file: turn_server_pkey.pem (i) 0: : Alarm: cannot start TLS and DTLS listeners because individual central file is not set properly solution use no-auth in config or cli
Outcome two
0: : NO EXPLICIT LISTENER Accost(ES) ARE CONFIGURED 0: : ===========Discovering listener addresses: ========= 0: : Listener address to employ: 127.0.0.i 0: : Listener accost to utilise: 172.31.thirteen.206 0: : Listener accost to use: ::i Solution Happens on ec2 container. Map the exteral initernal specifically in conf ot cli
turnserver -10 EXT_IP/INT_IP or in config external-ip=EXT_IP/INT_IP
Consequence three Assigning address
errno=99 Cannot bind local socket to addr: Cannot assign requested address solution Bank check if the ports are open
and kil any processes that may be constitute running ref : https://github.com/coturn/coturn/issues/311
Consequence 4 Both username and credential are required when the URL scheme is "turn" or "turns". at new WrappedRTCPeerConnection
var iceservers_array = [{urls: 'stun:stun.l.google.com: 19302 '}, {url: "plow:user@media.xxx.com:3478" , credential: 'root'}]; Solution change this to
var iceservers_array = [{urls: 'stun:stun.l.google.com: 19302 '}, { username: "user" , credential: "root" , url: 'turn:media.xxx.com: 3478 '}]; Errors on git
update registry to "registry": "https://registry.npmjs.org " shelved
Reporting a Vulnerability
Create an result https://github.com/altanai/webrtc/issues https://github.com/altanai/webrtc/issues
License
MIT
Todo: remove topIconHolder_ul
Error: Read Econnreset Npm Err Socket Io
Source: https://www.npmjs.com/package/webrtcdevelopment