I am writing a WebRTC application and have the following problem:
I want to use the adapter.js library.
I have the following index.html:
<html>
<header>
<script src='../out/adapter.js'></script>
<script src='../out/main.js'></script>
</header>
<body>
<video id="localVideo" width='500' autoplay></video>
</body>
</html>
and my main.js looks like:
var adapter=require('webrtc-adapter');
var localVideo=document.querySelector('video#localVideo');
navigator.getUserMedia(media_constraints, handleUserMedia, handleUserMediaError);
function handleUserMedia(stream) {
localStream = stream;
adapter.attachMediaStream(localVideo, stream);
console.log('Adding local stream.');
}
but my browser logs the error: Uncaught ReferenceError: require is not defined
require is used (and defined) in Node.js environments to load modules. (Not exclusively, for more information check here).
If you downloaded an adapter.js version from here and include it the way you do (via script tags), you can simple delete the require(...) line and you should be good to go.
Edit: added an example
console.log(adapter.browserDetails.browser);
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
if you have checked installing adapter js?
check
npm webrtc-adapter --version
if not showing up in node, install it to your app
npm install --save webrtc-adapter
Related
Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs
I am taking baby steps into the MEAN stack but can't figure out step 1, how to run my app. What do I use for a development web server and how do I start it in my directory?
If I just launch index.html as a file it will not work.
Here is my code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>My Site</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"> </script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.2.1/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<a class="btn" ng-click="visible = true">Show the Form</a>
<div ng-show="visible">I used to be hidden!</div>
</body>
</html>
app.js
var app = angular.module( 'myApp', [] );
app.controller( 'MainCtrl', function( $scope ) {
$scope.visible = false;
});
If you simply want to explore AngularJS functionality(or any other front end library for that matter), you don't need a Node.js app.
Assuming you already have npm installed just follow these simple steps:
npm install http-server -g
go from your console to the folder containing your html files
enter http-server -c-1 -p 9000
That would start a simple web server on port 9000 with no caching on your specified directory.
Then simply go to http://0.0.0.0:9000/your_page.html from a browser and voila.
If you want to explore more options on http-server
This code can run without a http server, just in the browser. Note that you are using a really outdated version of Angular (1.0.3), they just released version 1.3.0.
If you want to run your stuff on a local development server, you could use something like yeoman, which generates the app boilerplate for you and comes with a local node server and a build job (check for example https://github.com/yeoman/generator-webapp or https://github.com/yeoman/generator-gulp-webapp)
If you just want a super easy hhtp server and have python installed you can also use python -m SimpleHTTPServer to start up an http server in the current folder.
Here is your code in plunker and it works: http://plnkr.co/edit/j2SqmrP1yWqR68Gm3UCn?p=preview
As you are using the MEAN stack, you should probably check node.js to implement your web server. Check http://www.nodebeginner.org/, it should allow you to code a very simple one.
I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.
I need to test my Node js apllication with mocha-phantomjs.I have tried the below code to test the app but i'm getting error as 'ReferenceError: Can't find variable: require'.How to resolve this.
test.html
<html>
<head>
<title> Tests </title>
<link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/should/lib/should.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
</script>
<script src="test.js"></script>
<script>
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
else { mocha.run(); }
</script>
</body>
</html>
test.js
var module=require('../lib/requiredModule');
var should = require('chai').should();
describe('Testing',function(){
it('Save Data',function(){
module.save(content,function(err,res){
should.not.exist(err);
});
});
});
While running the html file as mocha-phantomjs test/test.html i'm getting error as
ReferenceError: Can't find variable: require
So, I think your problem is that running your tests via the test runner basically runs them as if they were client side. Thus, it will not be able to find your native node modules (like require). You can try loading require.js in directly. Or, just use
<script src="../node_modules/chai/chai.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
var should = chai.should; // This will give you access to chai should.
</script>
So you will not need to require anything that you src to. Again, think of this like you are doing everything client side.
Take a look at browserify, which enables you to automatically include npm libraries: https://github.com/substack/node-browserify
Also recommended, are connect-browserify for auto-reloading in development https://github.com/andreypopp/connect-browserify and asset-rack https://github.com/techpines/asset-rack for automatic bundling in production.
Posting here as requested original post can be found here
Hello, I would like to build ember.js using Ubuntu 13.
I have cloned the official Github project, cd into the project and as described in the readme file I did:
bundle install
rake dist
no error is shown on screen and as a result I get a directory shown in the image
I would like to use ember and ember-data, so I include
ember.js
ember-data-deps.js
files in my test project.
The problem is that I am getting a TypeError: App.Router is undefined
I am using this at my client.js file to init ember
this.App = Ember.Application.create();
App.Router.map(function() {
this.route('contributors');
this.route('contributor', {path: '/contributors/:contributor_id'});
});
Am I doing something wrong in the build process?
Should I include some other js files in my project?
Thank you in advanced.
The TypeError: App.Router is undefined error is because ember.js is not loaded correctly or in the correct order.
To get ember-data (that is separate from ember.js) you have to clone this repo (https://github.com/emberjs/data) and follow the build instructions in the readme file, it's straight forward, and once you have the dist directory from the ember-data build process get the file ember-data.js development version or ember-data.min.js for production (well, production... ember-data is still considered unstable for production environments).
here is a simple ember project setup using ember-data:
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ember app</title>
</head>
<body>
<script type="text/x-handlebars">
hello world!
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var App = Ember.Application.create({
ready: function () {
console.log("app started...");
}
});
hope it helps