{"id":15024663,"url":"https://github.com/lp1dev/ngwebrtc","last_synced_at":"2026-02-01T15:36:13.756Z","repository":{"id":58236102,"uuid":"78641492","full_name":"lp1dev/ngWebRTC","owner":"lp1dev","description":"AngularJS WebRTC Helpers","archived":false,"fork":false,"pushed_at":"2017-03-31T14:57:19.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-30T20:56:48.408Z","etag":null,"topics":["angular","angularjs","angularjs-development","webrtc","webrtc-javascript-library","webrtc-tools"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lp1dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-11T13:27:02.000Z","updated_at":"2022-02-08T17:53:13.000Z","dependencies_parsed_at":"2022-08-31T09:23:05.236Z","dependency_job_id":null,"html_url":"https://github.com/lp1dev/ngWebRTC","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lp1dev%2FngWebRTC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lp1dev%2FngWebRTC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lp1dev%2FngWebRTC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lp1dev%2FngWebRTC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lp1dev","download_url":"https://codeload.github.com/lp1dev/ngWebRTC/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lp1dev%2FngWebRTC/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259072778,"owners_count":22801077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","angularjs-development","webrtc","webrtc-javascript-library","webrtc-tools"],"created_at":"2024-09-24T20:00:42.589Z","updated_at":"2026-02-01T15:36:13.726Z","avatar_url":"https://github.com/lp1dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngWebRTC - AngularJS WebRTC Module\n\n## Dependencies\n\n- angular-base64\n\n## Setup\n\nUsing bower\n\n```bower install --save ngwebrtc```\n\nUsing npm\n\n```npm install --save ngwebrtc```\n\n## Usage\n\nAdd the following lines to your index.html :\n```\n\u003cscript type=\"text/javascript\" src=\"{bower_directory}/angular-base64/angular-base64.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"{bower_directory}/angular-webrtc/dist/js/ngWebRTC.js\"\u003e\u003c/script\u003e\n```\n\nAnd the following dependencies to your angular app : \n\n```\nangular.module('app',\n  [\n    'base64',\n    'ngWebRTC'\n  ])\n```\n\nThis module provides a **$webrtc** service to handle your WebRTC interactions.\n\nBrowser-related interactions have been wrapped to be as easy to use as possible, but you will probably **need at least a basic \nunderstanding of the [WebRTC protocol](https://www.w3.org/TR/webrtc)**.\n\n### Initialisation\n\nFirst, you have to retrieve your local browser's stream using \n\n```   \n$webrtc.getUserMedia (onUserMediaSuccess, onUserMediaError, constraints);\n```\n\n- **onUserMediaSuccess(stream)** callback is entered when the browser has successfully retrieved a media stream from the local \ncamera/microphone.\n- **onUserMediaError(error)** callback is entered when it failed, for instance if you refused to share your audio/video \nin the popup window.\n- **constraints** is an *optional* object, used to specify if you want to share your audio,video or both. By default its\nvalue is {audio:true, video:true}.\n\nThen you have to call the **init** method to initialize the service.\n\n```\n$webrtc.init (stream, connectCallback, disconnectCallback, pendingCallback, iceConfig, serverConfig)\n```\n\n- **stream** is the Stream object retrieved from the onUserMediaSuccess callback.\n- **connectCallback** is entered when you successfully connect to another user's stream\n- **disconnectCallback** is entered when this stream hangs.\n- **pendingCallback** is entered when you are trying to connect.\n- **iceConfig** is the configuration passed to the [RTCPeerConnection Interface](https://www.w3.org/TR/webrtc/#rtcpeerconnection-interface).\nIf undefined { 'iceServers': [ { 'urls': 'stun.l.google.com:19302' } ] } will be used.\n- **serverConfig** is your own server configuration, the object needs to be formatted like this :\n```\nserverConfig = {\n      url: 'http(s)://{Your Server's  URL}',\n      methods: {\n        postIceCandidate: function (candidate, emitter) { //Your post request here },\n        postOffer: function (RTCDescription, emitter, type) { //Your post request here }\n      }\n    }\n```\n\n### Actions on new offers\n\nNow that you can send offers and IceCandidates on your server, you should be able to handle the offers reception inside your controller.\n\nOnce you've been able to retrieve an offer's data, you can accept another's user offer using\n\n```\n$webrtc.acceptOffer(offer)\n```\n\nThe offer object must be formatted like this : \n```\noffer = {\n    type: 'rdp-offer'\n    emitter: {An identifier for the user emitting the offer},\n    RDPDescription: {The same RTCDescription object given to the postOffer method}\n}\n```\n\nUpon approval, an answer like this one  :\n```\nanswer = {\n    type: 'sdp-answer'\n    emitter: {An identifier for the user emitting the answer},\n    RDPDescription: {Your RTCDescription}\n}\n```\n\nwill automatically be sent to your server using the same *serverConfig.methods.postOffer* method.\n\nThe Ice candidates will be automatically handled and sent to your server in an object like this :\n```\niceCandidate = {\n    type: 'ice',\n    emitter: {An identifier for the user emitting the ice candidate},\n    ice: {The ice candidate given by your the emitter's browser}\n}\n```\n\nIt must be communicated to the corresponding recipient and the same iceCandidate object given to the $webrtc.onExternalIceCandidate method\nfor the connection to be established.\n\n## Streams\n\nOnce the local stream has been configured, you can retrieve it using : \n$webrtc.getLocalMediaStream().\n\nIf an external connection is successfull you can retrieve the external stream using : \n$webrtc.getExternalMediaStream().\n\nYou can now store these objects in a streamURL Object for your browser to be able to display it :\n```\n$scope.streamURL = window.URL.createObjectURL(stream)\n```\n\nThey both can be displayed in a HTML video element like this\n```\n\u003cvideo autoplay ng-src=\"{{ $scope.streamURL //Your stream object, $scope.streamURL for instance }}\"\u003e\n```\n\n\n[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flp1dev%2Fngwebrtc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flp1dev%2Fngwebrtc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flp1dev%2Fngwebrtc/lists"}