├── LICENSE
├── README.md
├── app.js
├── index.html
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Branza Alexandru
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WebChimera.js Player Multiscreen Demo
 2 | 
 3 | **This is a special feature created due to popular demand, it is usually used for surveillance cam software.**
 4 | 
 5 | #### Description
 6 | 
 7 | Demo for [wcjs-player](https://github.com/jaruba/wcjs-player)'s Multiscreen Feature showing WebChimera.js Player playing 4 videos at the same time.
 8 | 
 9 | ``wcjs-player`` uses [WebChimera.js](https://github.com/RSATom/WebChimera.js) to draw the frames of libVLC to a canvas.
10 | 
11 | 
12 | #### Demo Install
13 | 
14 | ```
15 | git clone https://github.com/jaruba/node-vlc-multiscreen.git
16 | cd node-vlc-multiscreen
17 | ```
18 | 
19 | **Windows**
20 | ```
21 | set WCJS_RUNTIME=electron
22 | set WCJS_RUNTIME_VERSION=v0.37.6
23 | set WCJS_VERSION=0.2.5
24 | set WCJS_ARCH=ia32
25 | ```
26 | 
27 | **OSX/Linux**
28 | ```
29 | export WCJS_RUNTIME="electron"
30 | export WCJS_RUNTIME_VERSION="v0.37.6"
31 | export WCJS_VERSION="0.2.5"
32 | export WCJS_ARCH="ia32"
33 | ```
34 | 
35 | ```
36 | npm install
37 | ```
38 | 
39 | Now download Electron v0.37.6 for 32bit and run `app.js`
40 | 
41 | !! You can change the configuration values for `wcjs-prebuilt` according to your case, but keep in mind that the options are limited to the [prebuilt packages](https://github.com/RSATom/WebChimera.js/releases)
42 | 
43 | **Screenshots:**
44 | 
45 | WebChimera.js Player Multiscreen Demo running on NW.js (Windows)
46 | 
47 | <img src="http://webchimera.org/samples/wcjs-player-5.png">
48 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | if (process.platform == 'win32')
 2 |     process.env['VLC_PLUGIN_PATH'] = require('path').join(__dirname, 'node_modules/wcjs-prebuilt/bin/plugins');
 3 | 
 4 | var app = require('app');  // Module to control application life.
 5 | var BrowserWindow = require('browser-window');  // Module to create native browser window.
 6 |  
 7 | var mainWindow = null;
 8 |  
 9 |  
10 | // This method will be called when Electron has done everything
11 | // initialization and ready for creating browser windows.
12 | app.on('ready', function() {
13 |  
14 |   // Create the browser window.
15 |   mainWindow = new BrowserWindow({width: 800, height: 600});
16 |  
17 |   // and load the index.html of the app.
18 |   mainWindow.loadUrl('file://' + __dirname + '/index.html');
19 |  
20 |   mainWindow.openDevTools({detach: true});
21 |  
22 |   // Emitted when the window is closed.
23 |   mainWindow.on('closed', function() {
24 |     mainWindow = null;
25 |   });
26 |  
27 | });
28 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <style>
 4 | body,html{ width: 100%; height: 100%; padding: 0px; margin:0px }
 5 | .webchimeras { float: left; width: 50%; height: 50% }
 6 | </style>
 7 | </head>
 8 | <body>
 9 | <div id="player"></div>
10 | <div id="player2"></div>
11 | <div id="player3"></div>
12 | <div id="player4"></div>
13 | <script>
14 | var wjs = require("wcjs-player");
15 | var conf = {
16 |     wcjs: require('wcjs-prebuilt'),
17 |     multiscreen: true,
18 |     autoplay: true,
19 |     loop: true
20 | };
21 | 
22 | var player = new wjs("#player").addPlayer(conf);
23 | player.addPlaylist({
24 |     url: "http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4",
25 |     crop: "16:9"
26 | });
27 | 
28 | var player2 = new wjs("#player2").addPlayer(conf);
29 | player2.addPlaylist({
30 |     url: "http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4",
31 |     crop: "16:9"
32 | });
33 | 
34 | var player3 = new wjs("#player3").addPlayer(conf);
35 | player3.addPlaylist({
36 |     url: "http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4",
37 |     crop: "16:9"
38 | });
39 | 
40 | var player4 = new wjs("#player4").addPlayer(conf);
41 | player4.addPlaylist({
42 |     url: "http://archive.org/download/popeye_patriotic_popeye/popeye_patriotic_popeye.ogv",
43 |     crop: "16:9"
44 | });
45 | 
46 | </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "wcjs-player-multiscreen-demo",
 3 |     "description": "WebChimera.js Player Multiscreen Demo",
 4 |     "version": "0.0.2",
 5 |     "private": true,
 6 |     "main": "app://host/index.html",
 7 |     "dependencies": {
 8 |         "wcjs-player": "^6.0.0",
 9 |         "wcjs-prebuilt": "^3.0.0"
10 |     },
11 |     "env": "development"
12 | }
13 | 


--------------------------------------------------------------------------------