Angular 2 (angular-cli webpack) integration

[gregorfelkar]

Hi,

I have installed your package with NPM - npm install --save simplewebrtc (https://www.npmjs.com/package/simplewebrtc) and now i have troubles on how to import it into my component in my angular2 project.

If have tried: import { SimpleWebRTC } from 'simplewebrtc'; and import * as SimpleWebRTC from 'simplewebrtc';

And it wont find the NPM simplewebrtc package. Also i'm using angular-cli to prepare new project in 2.0.0. angular 2 version.

My package.json for dependencies:

"dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "@types/auth0-js": "0.0.4",
    "angular2-jwt": "^0.1.25",
    "auth0-js": "^7.4.0",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "simplewebrtc": "^2.2.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
}

My question is how to import simplewebrtc to angular-cli webpack built angular2 project?

Thank you very much for your help!

[brunowego]

I get this same issue with Ember.

[hmaiga]

Hi guys, how do you resolved this issue finally ?

[brunowego]

I solved this in Ember after create a shim:

# vendor/shims/simplewebrtc.js

(function() {
  /* eslint-env amd */
  /* global SimpleWebRTC */

  define('simplewebrtc', [], function() {
    return {
      'default': SimpleWebRTC
    };
  });
})();

# index.js

/* eslint-env node */
'use strict';

module.exports = {
  name: 'ember-cli-neutral-webrtc',

  options: {
    nodeAssets: {
      simplewebrtc: {
        vendor: {
          srcDir: './',
          destDir: 'simplewebrtc',
          include: ['simplewebrtc.bundle.js']
        }
      }
    }
  },

  included() {
    this._super.included.apply(this, arguments);

    this.import('vendor/simplewebrtc/simplewebrtc.bundle.js');
    this.import('vendor/shims/simplewebrtc.js', {
      exports: {
        simplewebrtc: [
          'default'
        ]
      }
    });
  }
};

[gregorfelkar]

I solved the issue with service. I made instance of the object there and then i just inject the service in wanted component

[hmaiga]

Thanks guys, @gregorfelkar can i have a code example with angular 2 or a link that can help me,?

[gregorfelkar]

Yes, but currently im on vacation :) In 2 or 3 days i can post an example

[hmaiga]

Ok good vacation, but can you explain just in few lines your process to achieve this? Thanks in advance

[gregorfelkar]

SimpleWebRTC angular 2 implementation

First install simple webrtc over npm:

$npm install simplewebrtc --save

Angular-cli.json

Then include the npm library to angular-cli.json into scripts array:

{
  ...
  "apps": [
      {
          ...
          "scripts": [
              "../node_modules/simplewebrtc/latest-v2.js",
              ...
          ],
       },
   ...
}

Service

To create a service you have to declare the simplewebrtc variable in the service and add wanted functions with observables in it:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

declare let SimpleWebRTC: any; //this is important

@Injectable()
export class WebRtcService {

    webrtc: any; //declare global variable

    //construct the simplewebrtc object as service creation
    constructor(private config: ConfigService) {
        this.webrtc = new SimpleWebRTC({
            url: 'your signal server url here',
            socketio: {},
            connection: null,
            debug: false,
            localVideoEl: 'local-video',
            remoteVideosEl: 'remote-video',
            autoRequestMedia: true,
            adjustPeerVolume: true,
            media: {
                video: true, audio: true
            }
        });
    }

    //use webrtc functions as observables
    onError() {
        return new Observable<any>(observer => {
            this.webrtc.on('error', error => {
                observer.next(error);
            });
        });
    }

    onRoomReady() {
        return new Observable<any>(observer => {
            this.webrtc.connection.on('message', data => {
                if(data.type == 'roomReady') {
                    observer.next(data.payload);
                }
            });
        });
    }

    onConnectionReady() {
        return new Observable<any>(observer => {
            this.webrtc.on('connectionReady', sessionId => {
                observer.next(sessionId);
            });
        });
    }

    onReadyToCall() {
        return new Observable<any>(observer => {
            this.webrtc.on('readyToCall', () => {
                observer.next();
            });
        });
    }

    onVideoAdded() {
        return new Observable<any>(observer => {
            this.webrtc.on('videoAdded', (video, peer) => {
                observer.next({ video: video, peer: peer});
            });
        });
    }

    onVideoRemoved() {
        return new Observable<any>(observer => {
            this.webrtc.on('videoRemoved', (video, peer) => {
                observer.next({ video: video, peer: peer});
            });
        });
    }

    ... //add more as you need
}

Component

At last inject the service into you component and use it, subscribe to functions from service just like normal functions from webrtc:

import { WebRtcService } from '../core/services/app.webrtc.service';
import { Observable } from 'rxjs/Observable';

@Component({
    templateUrl: './chat.component.html',
    styleUrls: ['./chat.component.scss']
})
export class ChatComponent {

    constructor(private webrtc: WebRtcService) {

        webrtc.onError().subscribe(error => {
            console.warn(error);
        });

        webrtc.onRoomReady().subscribe(state => {
            console.log(state);
        });

        webrtc.onReadyToCall().subscribe(() => {
            console.log('ready');
        });

        webrtc.onVideoAdded().subscribe(data => {
            console.log(data);
        });
    }
}

I hope this will help you, i also apologize for late response as i was away without my computer and only with my phone on low battery :D

[t4ngth00]

@gregorfelkar, I didn't try your solution but love it from the first look. I'm working on an Angular 4 project with simplewebRTC. You're my life saver. Thanks from the bottom of my heart.

[unalkyl]

@gregorfelkar Thank you so much.

[jettwein]

@gregorfelkar, you don't happen to have a working example, do you? You would be a hero to many. :)