Re: [AngularJS] How to implement WebRTC using Angular 2

[Lucas Lacroix]

Could you give some details on the issue you're seeing?

On Mon, Jun 13, 2016 at 10:44 AM, Do Giang <gian...@gmail.com> wrote:

I and my team decide to build our capstone project using NodeJS, Angular 2 and WebRTC. Now we have a problem that we can't use WebRTC Libraries in the Angular 2 App. I tried the simple demo from simpleWebRTC:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes, Router} from '@angular/router';
import { RouteConfig, RouterLink} from '@angular/router-deprecated';

import { AuthService } from '../../../dashboard/services/auth-services';

@Component({
 selector: 'header',
 templateUrl: 'client/dev/kshare/templates/shared/header.html',
 styleUrls: ['client/dev/kshare/styles/header.css'],
 directives: [ROUTER_DIRECTIVES]
})

export class HeaderComponent {
 loginToken:boolean = false;
 userToken:string;
 roleToken:string;

 constructor(private _auth: AuthService, public router: Router){
 this.userToken = localStorage.getItem('username');
 this.roleToken = localStorage.getItem('role');
 }

 ngOnInit(): void {
 if(this.userToken){
 this.loginToken = true;
 }
 }
 logout(): void {
 this._auth.logout();
 this._auth.logoutClient();
 window.location.reload();
 }
}

Can anyone help us? We are so appreciate :)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Do Giang]

Oh I post wrong code and try to delete it. This one is my code:

I try the demo from this site: https://simplewebrtc.com

import {Component,OnInit} from '@angular/core';

import * as SimpleWebRTC from '../demo/simplewebrtc.js';
@Component({
  selector: 'demo',
  template: `
      <video height="300" id="localVideo"></video>
      <div id="remotesVideos"></div>
    `,
  styleUrls: ['client/dev/demo/easyrtc.css'],
})
export class DemoComponent {
    webrtc = new SimpleWebRTC({
      // the id/element dom element that will hold "our" video
      localVideoEl: 'localVideo',
      // the id/element dom element that will hold remote videos
      remoteVideosEl: 'remotesVideos',
      // immediately ask for camera access
      autoRequestMedia: true
    });
  ngOnInit():void {
      // we have to wait until it's ready
      this.webrtc.on('readyToCall', function () {
      // you can name it anything
      this.webrtc.joinRoom('your awesome room name');
    });
  }
}

[Lucas Lacroix]

You still haven't said what the issue you're seeing is.

[Do Giang]

Ah Yes, When I run the code, I got the error: 

I use the debug mode from chrome: 

I don't know why. Because when try the code using native javascript, It work.

[Lucas Lacroix]

Based purely on a guess, it looks like SimpleWebRTC.js is not using a compatible package system. This would explain why the this.webrtc member is different from what you'd expect of an instance of the SimpleWebRTC class.

For example, if your tsconfig.json says "module: system" and SimpleWebRTC exposes a CommonJS module.

[Lucas Lacroix]

PS - looking at the typings definitions for webrtc (not SimpleWebRTC), it looks like everything is global and not part of a module. Maybe SimpleWebRTC has the same issue, in which case, you would need to add the script to the head section of your HTML and then reference the global SimpleWebRTC class.