Jose's tests

.gitignore

@@ -1,3 +1,5 @@
-video-react-example/node_modules
+
+.DS_Store
+node_modules
 __pycache__
-*.pyc
+*.pyc

README.md

@@ -1,91 +1,12 @@
-# Installing janus server on cloud
 
-## REF: Thanks to meetecho  
-https://github.com/meetecho/janus-gateway  
-https://janus.conf.meetecho.com/index.html  
-## aptitude and meson  
-```
-apt install meson aptitude  
-```
-## using aptitude to install packages  
+Starting Meetecho Janus (WebRTC Server) v0.11.4 ✅
 
-```bash
-aptitude install libmicrohttpd-dev libjansson-dev \  
-	libssl-dev libsofia-sip-ua-dev libglib2.0-dev \  
-	libopus-dev libogg-dev libcurl4-openssl-dev liblua5.3-dev \  
-	libconfig-dev pkg-config gengetopt libtool automake     
-## Installing libnice  
-git clone https://gitlab.freedesktop.org/libnice/libnice  
-cd libnice  
-meson --prefix=/usr build && ninja -C build && sudo ninja -C  build install  
-```
 
-## Installing libsrtp  
+# Janus docker-compose custom setup
 
-```bash
-wget https://github.com/cisco/libsrtp/archive/v2.2.0.tar.gz  
-tar xfv v2.2.0.tar.gz  
-cd libsrtp-2.2.0  
-./configure --prefix=/usr --enable-openssl  
-make shared_library && sudo make install  
 ```
-
-## For datachannels support install usrsctp  
-
-```bash
-git clone https://github.com/sctplab/usrsctp  
-cd usrsctp  
-./bootstrap  
-./configure --prefix=/usr --disable-programs --disable-inet --disable-inet6  
-make && sudo make install 
+docker-compose up
 ```
 
-## Installing libwebsockets
-We use websockets instead http server to comunicante with janus, **so is important to install this library.**
-
-```bash
-git clone https://libwebsockets.org/repo/libwebsockets  
-cd libwebsockets  
-# If you want the stable version of libwebsockets, uncomment the next line  
-# git checkout v3.2-stable  
-mkdir build  
-cd build  
-# See https://github.com/meetecho/janus-gateway/issues/732 re: LWS_MAX_SMP 
-# See https://github.com/meetecho/janus-gateway/issues/2476 re: LWS_WITHOUT_EXTENSIONS  
-cmake -DLWS_MAX_SMP=1 -DLWS_WITHOUT_EXTENSIONS=0 -DCMAKE_INSTALL_PREFIX:PATH=/usr -DCMAKE_C_FLAGS="-fpic" ..  
-make && sudo make install  
-```
-
-## Packages needed for documentation
-```bash
-aptitude install doxygen graphviz  
-```
-## Compile
-```bash
-git clone https://github.com/meetecho/janus-gateway.git  
-cd janus-gateway  
-sh autogen.sh  
-./configure --prefix=/opt/janus --enable-docs
-make
-make install
-```
-## Compile Janus Plugin configuration files
-```bash
-make configs
-```
-## Excecute janus
-```bash
-/opt/janus/bin/janus  
-```
-## Janus main configuration  
-```bash
-nano /opt/janus/etc/janus/janus.jcfg  
-```
-## Janus Videoroom plugin configuration  
-Here can be defined some default rooms, this rooms also can be created by the user.
-```bash
-nano /opt/janus/etc/janus/janus.plugin.videoroom.jcfg
-```
-
-
-
+Use `etc/` config files to configure janus
+Add new jcfg files to docker-compose.yml

app/src/components/JanusVideoRoomComponent.js

@@ -0,0 +1,175 @@
+
+import React from 'react';
+
+function pc_create_negotiate(publisher) {
+
+    let offer_json = { sdp: publisher.listenerHandle.getOffer(), type: "offer" }
+
+    var config = {
+        sdpSemantics: 'unified-plan',
+        // config.iceServers = [{urls: ['stun:stun.l.google.com:19302']}];
+    };
+    let pc = new RTCPeerConnection(config);
+    pc.addEventListener('track', function (evt) {
+        console.log(evt.track.kind, evt.streams[0])
+        if (evt.track.kind === 'video') {
+            document.getElementById(publisher.video_id).srcObject = evt.streams[0];
+
+        } else if (evt.track.kind === 'audio') {
+            document.getElementById(publisher.audio_id).srcObject = evt.streams[0];
+        }
+    });
+    pc.setRemoteDescription(offer_json);
+    //After adding offer of remote descriptor add video transceirver or audio and then create an answer
+    pc.addTransceiver('video', { direction: 'recvonly' });
+    pc.addTransceiver('audio', { direction: 'recvonly' });
+    pc.createAnswer().then(function (answer) {
+        console.log("CREATING ANSWER")
+        return pc.setLocalDescription(answer);
+    }).then(function () {
+        // wait for ICE gathering to complete
+        return new Promise(function (resolve) {
+            if (pc.iceGatheringState === 'complete') {
+                resolve();
+            } else {
+                function checkState() {
+                    if (pc.iceGatheringState === 'complete') {
+                        pc.removeEventListener('icegatheringstatechange', checkState);
+                        resolve();
+                    }
+                }
+                pc.addEventListener('icegatheringstatechange', checkState);
+            }
+        });
+    }).then(function () {
+        var answer = pc.localDescription;
+        // Send the answer to the remote peer through the signaling server.
+        publisher.listenerHandle.setRemoteAnswer(answer.sdp).then(() => {
+            console.log("ANSWERD SEND VIDEO IS STARTING...")
+
+        });
+    })
+    return pc;
+
+}
+
+class JanusVideoRoom extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { publishers: [], selected: 0, publish_counter: 0, pc: null, connected: false };
+    }
+    componentDidMount() {
+        var video_id = this.props.video_id
+        var audio_id = this.props.audio_id
+        var room = this.props.room
+        var janus_props_session = {
+            url: this.props.server,
+        }
+        var JanusClient = require('janus-videoroom-client').Janus;
+
+        if (this.props.token)
+            janus_props_session.token = this.props.token
+
+        var client = new JanusClient(janus_props_session);
+        var publishers = []
+
+        client.onConnected(() => {
+            client.createSession().then((session) => {
+                console.log("CREATING SESSION")
+                session.videoRoom().getFeeds(room).then((feeds) => {
+                    console.log("FEEDS", room, feeds)
+                    for (let x in feeds) {
+                        //TAKES JUST THE FIRST FEED THEN BREAKS
+                        session.videoRoom().listenFeed(room, feeds[x]).then((listenerHandle) => {
+                            //Starting negotiation
+                            this.setState({ publish_counter: this.state.publish_counter + 1 })
+                            publishers.push(
+                                {
+                                    listenerHandle: listenerHandle,
+                                    video_id: video_id,
+                                    audio_id: audio_id,
+                                    feed: listenerHandle.feed,
+                                    publish_number: this.state.publish_counter
+                                }
+                            )
+
+                            this.setState({ publishers: publishers })
+
+                            this.setState({ selected: this.state.publish_counter });
+                        });
+                    }
+                });
+
+            })
+                .catch((err) => {
+                    console.log("SOME ERROR", err)
+                })
+        });
+
+        client.onDisconnected(() => {
+            console.log("DISCONNECTED")
+
+        });
+        client.onError((err) => {
+            console.log("DISCONNECTED")
+        });
+
+        client.connect();
+        // set el height and width etc.
+    }
+    change = (event) => {
+        if (this.state.pc && this.state.connected)
+            this.state.pc.close()
+        this.setState({ pc: null, connected: false })
+        this.setState({ selected: event.target.value });
+
+    }
+    connect = (event) => {
+        if (!this.state.connected) {
+            try {
+                this.setState({ pc: pc_create_negotiate(this.state.publishers[this.state.selected - 1]), connected: true })
+            } catch (error) {
+                console.log("No publishers yet");
+            }
+        }
+    }
+    disconnect = (event) => {
+        if (this.state.pc && this.state.connected)
+            this.state.pc.close()
+        this.setState({ pc: null, connected: false })
+    }
+    render() {
+        const divStyle = {
+            borderStyle: "solid",
+            width: "35%"
+        }
+        return (
+            <div id="media" style={divStyle}>
+                <h2 >SALA {this.props.room}</h2>
+
+                <div>
+                    <h3> Elija streaming </h3>
+                    <select onChange={this.change} value={this.state.selected}>
+                        {this.state.publishers.map((publisher) => (
+                            <option key={publisher.feed} value={publisher.publish_number}>{publisher.feed}</option>
+                        ))}
+                    </select>
+                </div>
+                <div>
+
+                    <button onClick={this.connect}>Connect!</button>
+                    <button onClick={this.disconnect}>Disconnect!</button>
+                </div>
+                <br />
+                <div>
+                    <video id={this.props.video_id} autoPlay={true} controls></video>
+                    <audio id={this.props.audio_id} autoPlay={true}></audio>
+                </div>
+            </div>
+        )
+    }
+}
+
+
+export default JanusVideoRoom;

video-react-example/src/index.js → app/src/index.js

@@ -7,13 +7,14 @@ import reportWebVitals from './reportWebVitals';
 
 
 
-var janus_webrtc_server='ws://207.246.118.54:8188'
+// var janus_webrtc_server='ws://207.246.118.54:8188'
+var janus_webrtc_server='ws://127.0.0.1:8188'
 ReactDOM.render(
   <React.StrictMode>
     <JanusVideoRoom video_id="video1" audio_id="audio1" token="123456789" room="1234" server={janus_webrtc_server}/>   
-    <JanusVideoRoom video_id="video2" audio_id="audio2" token="123456789" room="1234" server={janus_webrtc_server}/> 
+    {/* <JanusVideoRoom video_id="video2" audio_id="audio2" token="123456789" room="1234" server={janus_webrtc_server}/> 
     <JanusVideoRoom video_id="video3" audio_id="audio3" token="123456789" room="1234" server={janus_webrtc_server}/> 
-    <JanusVideoRoom video_id="video4" audio_id="audio4" token="123456789" room="1234" server={janus_webrtc_server}/>  
+    <JanusVideoRoom video_id="video4" audio_id="audio4" token="123456789" room="1234" server={janus_webrtc_server}/>   */}
 
   </React.StrictMode>,
   document.getElementById('root')