MediaMeans : 2 App.js and Capsule Class - 17chuchu/AutomaticBicycleInterface GitHub Wiki

MediaMeans works like a media server, it receives a video stream from bikes and sends them to the clients that want it. These activities will be located in mediameans/src/App.js.

Table of Contents

• App.js
  • Constructor
  • Create New Room
• Capsule
  • Initializing
  • Add Publisher

App.js

Like in Interfact app, App.js is the center of the web-application.

Its main duty is to receive JSON string from Django server. This application will not send any JSON string back to Django server.

Constructor

Firstly, let's talk about constructor. handlenewroom will handle when Django wants to open two rooms for a bike and clients.

constructor(props) {
    super(props)
    SocketManager.handlenewroom = this.createNewRoom
    SocketManager.initialize('localhost','7100')  // ip and port is here.
}

Create New Room

Secondly, createNewRoom will create a new Capsule component which will act as an interface for the two rooms that need to be created.

createNewRoom = async (bikeid) => {
    var capsule = React.createRef()
    ReactDOM.render(
        <Capsule id = {bikeid} ref={capsule}/>,
        document.getElementById('contain')
    );
    capsule.current.initializeRTC(SocketManager.subscriber[bikeid],SocketManager.publisher[bikeid])
}

Capsule

Capsule is a class that will create 2 WebRTC rooms and an interface for it.

initializing

This function will create 2 rooms, one for a bike and one for clients. This function will join a publisher room (bike room) automatically, then receive a video stream from the bike.

initializeRTC = async (subid, pubid) => {  
    this.pubid = pubid   // pubid is a room number of a room that a bike will join.
    this.pubrtc = new SimpleWebRTC({
        url: 'http://141.44.17.141:8888'
    });
    this.pubrtc.on('videoAdded', this.addPublisher);
    this.pubrtc.on('videoRemoved', this.removePublisher);
    console.log("Publisher Launch on room:",pubid);
    this.pubrtc.joinRoom(this.pubid);  // Join the bike room.

    this.subid = subid   // subid is a room number of a room that clients will join
    this.subrtc = new SimpleWebRTC({
        localVideoEl: ReactDOM.findDOMNode(this.refs.localVideo),
        url: 'http://141.44.17.141:8080',
    });
    this.subrtc.on('readyToCall',this.readyToCall)
    console.log("Subscriber Launch on room:",this.subid)
    this.setState({})  // To refresh the component.
}

Add Publisher

This publisher will be called when a new video stream from the bike is added. ( There is only one bike per one Capsule. )

localStreams in the code below is an array. Normally video stream from your webcam is added here.

addPublisher = async (video, peer) => {
    console.log("Publisher found")
    //  console.log(this.refs.remotes);
    var remotes = ReactDOM.findDOMNode(this.refs.remotes);
    if (remotes) {
        var container = document.createElement('div');
        container.style.transform = 'rotateY(-180deg)'
        container.className = 'videoContainer';
        container.id = 'container_' + this.pubrtc.getDomId(peer);
        container.appendChild(video);
        video.oncontextmenu = function() { 
            return false;
        };
        video.height = 100
        video.muted = true
        console.log(container);
        remotes.appendChild(container);
        this.pubelement = attachMediaStream(peer.stream);

        this.subrtc.webrtc.localStreams.push(this.pubelement.srcObject)  // Add bike's video stream to localStrem.
        this.subrtc.joinRoom(this.subid)  // After a video stream from the bike is added, send it to other user that request for it.
        this.subrtc.mute()
    }
    this.pubrtc.mute()
}