{"id":20469375,"url":"https://github.com/coreyauger/play-webrtc","last_synced_at":"2025-04-13T10:30:53.126Z","repository":{"id":21415062,"uuid":"24733116","full_name":"coreyauger/play-webrtc","owner":"coreyauger","description":"play-webrtc","archived":false,"fork":false,"pushed_at":"2014-10-10T22:36:16.000Z","size":1763,"stargazers_count":15,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:51:28.212Z","etag":null,"topics":["play-framework","webrtc"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coreyauger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-02T19:23:26.000Z","updated_at":"2023-09-25T07:28:10.000Z","dependencies_parsed_at":"2022-08-05T12:00:30.386Z","dependency_job_id":null,"html_url":"https://github.com/coreyauger/play-webrtc","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/coreyauger%2Fplay-webrtc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyauger%2Fplay-webrtc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyauger%2Fplay-webrtc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyauger%2Fplay-webrtc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coreyauger","download_url":"https://codeload.github.com/coreyauger/play-webrtc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248698707,"owners_count":21147508,"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":["play-framework","webrtc"],"created_at":"2024-11-15T14:08:51.168Z","updated_at":"2025-04-13T10:30:53.105Z","avatar_url":"https://github.com/coreyauger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"play-webrtc\n==================\n\nWebRTC is awesome!  But if you are here you already know that.  Just to review webRTC offers voice video and data transmission directly between peers that support the protocol.  This include modern browsers (chrome, FF, opera) as well as open source code that include builds for android, ios, linux, mac, and windows.\n\nTo get a good understanding of how webRTC works you should take a look at the following article which covers everything in great detail:\n[http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/](http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/)\n\n\n### What is play-webrtc \nSimply put play-webrtc is an out of the box relay server that uses reactive websockets with a comet fallback.  It includes code to setup and relay data necessary for setting up a webRTC connection between 2 or more peers.\n\n### Components include:\nPlay front end to render the web application.\nCoffeescript code to connect to the reactive websocket and negotiate sending data between peers.\nIteratee websocket connection.\nAkka actor system for message passing and backend logic.\n\nThese component serve as a demonstration and starting point for integrating webRTC and possibly other api requests into your own application.\n\n### Additional things you will need:\nIn a production environment you will want to configure and run your own TURN server.  For information on the setup and configuration of TURN please refer to the following documentation.\nhttps://code.google.com/p/rfc5766-turn-server/wiki/turnserver\n\n### A Note on websockets:\nIn a production environment you will want your websocket to be a secure connection.  The reasons for this go beyond just encrypting your data.  Websocket data that is now encrypted will fall victim to routers and proxies that have “smart” http caching policies.  This will ultimately render your websocket useless in these environments.  The solution is to use wss:// and no ws://\n\n\n\nSetup\n-----\n\n1. [Download Typesafe Activator](http://typesafe.com/platform/getstarted) (or copy it over from a USB)\n2. Extract the zip and run the `activator` or `activator.bat` script from a non-interactive shell\n3. Your browser should open to the Activator UI: [http://localhost:8888](http://localhost:8888)\n\n\nCreate an application\n---------------------\n\n##Getting Started\n\nWhether you use our angular JS code or want to integrate with your own, you will need to include 2 javascript files and their dependencies. \n\nUsing our example page\nTake a look at what gets included on:\n/views/index.scala.html\n/views/main.scala.html\n\n####Integration with your own\nThe first dependency is on RxJS.  If you have not heard of reactive extensions for javascript… you are missing out.  You need to head on over to this page https://github.com/Reactive-Extensions/RxJS  and take a look at what they provide.  Here are the 2 include that you require.\n\n```html\n\u003cscript src=\"/javascripts/ext/rxjs/2.2.20/rx.lite.compat.min.js\"\"\u003e\u003c/script\u003e\n\u003cscript src=\"/javascripts/ext/rxjs/2.2.20/rx.async.min.js\"\"\u003e\u003c/script\u003e\n```\n\nOnce you have these dependencies added you can add the 2 required js files.\n\n```html\n\u003cscript src='@routes.Assets.at(\"javascripts/webrtc.js\")' type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src='@routes.Assets.at(\"javascripts/worker.rx.js\")' type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n### Initializing\nNext thing we need to do is initialize the Websocket Rx worker class.  This can be seen in the controller.coffee file where we create a factory worker.\n\n\nwebrtcControllers.factory(\"worker\",['$rootScope','$q', ($rootScope,$q) -\u003e\n  worker = new window.SocketWorker(window._uuid, 'username')\n  worker.controllerOps\n])\n\nNotice that we pass in some form of a user id (_uuid) and a username to the SocketWorker.  The line below that is angular specific and simple exposes some operations from the worker.  In a non angular environment you can simple initialize the class like so:\n\n```coffee\nworker = new window.SocketWorker(window._uuid, 'username')\n```\n\n### Handling Events\nNext you will want to setup the common webrtc event handlers.  The 3 most important ones being the following:\n```javascript\nonAddRemoteStream\nonRemoveRemoteStream\nonAddLocalStream\n```\n\nThese let you know when someone has joined as well as when your local video feed is ready.  The methods simply hand you a video object that you can insert into the DOM at whatever location you desire.  In our angular code this looks like the following.\n\n```coffee\n worker.webrtc().onAddRemoteStream = (uuid, video, dataChannel) -\u003e\n    id = $scope.peers.length+1;\n    $scope.peers.push({\n      uuid:uuid,\n      username: '',\n      id: id\n    })\n    jidToPeerId[uuid] = id\n    setTimeout(-\u003e\n      $scope.$apply()\n      $('#video'+id).append(video)\n    ,0)\n\n\n  worker.webrtc().onRemoveRemoteStream = (uuid) -\u003e\n    $scope.peers = $scope.peers.filter((p) -\u003e\n      p.uuid != uuid\n    )\n    setTimeout(-\u003e\n      $scope.$apply()\n    ,0)\n\n\n  worker.webrtc().onAddLocalStream = (video) -\u003e\n    id = $scope.peers.length+1\n    $scope.peers.push({\n      uuid:worker.uuid(),\n      username: '',\n      id: id\n    })\n    jidToPeerId[worker.uuid()] = id\n    setTimeout( -\u003e\n      $scope.$apply()\n      $('#video'+id).append(video)\n    ,0)\n```\n\n\nNote that in a non angular setting your would simply use \n\n```javascript\nworker.webrtc.onAddRemoteStream = function(uuid, video){\n\t// .. do stuff with video .. for eg:\n\t$(‘body’).append(video);\n}\n```\n\n\n### Starting the Session\nWe first subscribe to our websocket stream to receive events about the appropriate message that we are interested in.  The “room” category and the “join” event.\n\n```coffee\nroomSubject = worker.subject('room')\n  roomSub = roomSubject.filter( (r) -\u003e r.op == 'join' ).subscribe( (ret) -\u003e\n    console.log('ret.data.members',ret.data.members)\n    worker.webrtc().init($scope.room, true)\n  )\n```\n\nThis simply will initialize a webrtc session with anyone that joins the room.\n\nAll that is left to do now is announce that we have joined the room.\n\n```coffee\nworker.onNext({slot:'room',op:'join',data:{name: $scope.room}})\n```\n\n\n\n\nOpen in an IDE\n--------------\n\nIf you want to use an IDE (Eclipse or IntelliJ), click on *Code*, select *Open*, and then select your IDE.  This will walk you through the steps to generate the project files and open the project.  Alternatively you can edit files in the Activator UI.\n\n\nUpdate Dependencies\n-------------------\n\nAngularJS\n[https://angularjs.org/](https://angularjs.org/)\nBootstrap\n[http://getbootstrap.com/components/](http://getbootstrap.com/components/)\nRxJS\n[https://github.com/Reactive-Extensions/RxJS](https://github.com/Reactive-Extensions/RxJS)\n\nOther information\n-----------------\n\nRead the tutorial html\n/tutorial/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreyauger%2Fplay-webrtc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoreyauger%2Fplay-webrtc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreyauger%2Fplay-webrtc/lists"}