vitlage/gist:57c11a9143a5a76bbf5254de22681396

## gistfile1.txt
<html lang="en">
<head>
    <title>Janus connection</title>
    <meta charset="utf8">
</head>
<body>
<h2>Janus WebRTC gateway</h2>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay muted></video>
<script>

// Inintial set up
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

// Creating socket connection
var socket = new WebSocket("wss://janus2.webrtc.network:8989/", 'janus-protocol');
var stunServer = {
    iceServers: [
        {urls: "stun:23.21.150.121"},
        {urls: "stun:stun.l.google.com:19302"},
        {urls: "stun:stun.lawsroom.com:3478"},
        {urls: "turn:stun.lawsroom.com:3478", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
        {urls: "turn:stun.lawsroom.com:3478?transport=tcp", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
        {urls: "turn:stun.lawsroom.com:3478?transport=udp", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
        {urls: "turn:numb.viagenie.ca", credential: "muazkh", username: "web@live.com"}
    ]
};

var mediaConstraints = {mandatory: { OfferToReceiveAudio: false, OfferToReceiveVideo: true }};

// Creating Peer Connection
var pc = new RTCPeerConnection(stunServer); // first peer connection to connect with janus server
var mainStream; // stream to janus server from my camera
var secondStream; // stream with user in the room
var newPC = new RTCPeerConnection(stunServer); // second peer connection to connect to user in the room
var newHandleIDs; // here I store handleId

// Show video in local video element
navigator.getUserMedia(
    { audio: true, video: true },
    function (stream) {
        mainStream = stream;

        pc.addStream(mainStream);
        document.getElementById("localVideo").src = URL.createObjectURL(stream);

        pc.onaddstream = function(evt) {
            console.log("on local add stream");
        };
    },
    function(error) { console.log("error for this Peer Connection", error) }
);

// Connection to Janus
socket.onopen = function(e) {
    console.log("Connection established", e);

    // Creating session with Janus server
    socket.send(JSON.stringify({"janus": "create", "transaction": "test"}));
};

// On ice candidate
pc.onicecandidate = function (event) {
    if (event.candidate) {
        socket.send(JSON.stringify(
            {
                "janus" : "trickle",
                "transaction" : "trickletransaction",
                "candidate": event.candidate,
                "session_id": window.sessionId,
                "handle_id": pluginId
            }
        ));
    }
};

// On message handlers
socket.onmessage = function(event) {
    var connectionData = JSON.parse(event.data);

    // Creating session if not available yet, send attach event to janus server
    if(!window.sessionId) {
        window.sessionId = connectionData.data.id;
        socket.send(JSON.stringify({
            "janus": "attach",
            "plugin": "janus.plugin.videoroom",
            "session_id": window.sessionId,
            "transaction": "testattachtoroom",
            "force-bundle" : true,
            "force-rtcp-mux" : true,
        }));

        console.log('session started with id', window.sessionId);
    }

    // Getting plugin id
    if(!window.pluginId && connectionData["session_id"]) {
        window.pluginId = connectionData.data.id;
        console.log("plugin enabled with id: ", window.pluginId);

// Send list request to janus using sessionId and pluginId
        socket.send(JSON.stringify({
            "janus": "message",
            "session_id": window.sessionId,
            "handle_id": window.pluginId,
            "transaction": "testlistrequest",
            "body": {
                "request" : "list",
            }
        }));
    }

    // Creating offer
    if (connectionData.transaction == "testlistrequest") {
        // Connect with video room
        socket.send(JSON.stringify({
            "janus": "message",
            "session_id": sessionId,
            "handle_id": pluginId,
            "transaction": "testjoinroom",
            "body": {
                "request" : "join",
                "room" : 1234,
                "ptype" : "publisher",
                "display" : "Zirka_Vasyl_:D",
            }
        }));

        // Keep session alive, every minute send keepalive message to Janus
        setInterval(function(){
            socket.send(JSON.stringify({
                "janus" : "keepalive",
                "session_id" : sessionId,
                "transaction" : "keepalivestransaction"
            }));
        }, 60000);

        // Definition of this function is at the bottom
        createOffer(pc);
    }

    // On answer on our offer we setting remote description of another peer
    if(connectionData.jsep && connectionData.jsep.type == "answer"){
        console.log('inside answer', connectionData);
        pc.setRemoteDescription(new SessionDescription(connectionData.jsep), function() {
            console.log('Setting remote description by answer, HA');
        }, function (e) {
            console.log("Error setting remote desk! Ha!", e);
        });
    }

    if(connectionData.plugindata && connectionData.plugindata.plugin == "janus.plugin.videoroom") {
        // Attach event for each publisher in video room
        if(connectionData.transaction == "testjoinroom" && connectionData.plugindata.data && connectionData.plugindata.data.publishers) {

            // Here is store all publishers
            window.users = connectionData.plugindata.data.publishers;

            // Making attach on each publisher
            for(var i = 0; i < window.users.length; i++) {
               socket.send(JSON.stringify({
               "janus": "attach",
               "plugin": "janus.plugin.videoroom",
               "session_id": window.sessionId,
               "opaque_id": "test_opaque_id",
               "transaction": "attach_on_publisher",
               "force-bundle" : true,
               "force-rtcp-mux" : true
             }));
            }

            // Here I attach my video to local element in HTML, I getting this url with src="blob:https://
            my-coe.com/4d6397c5-86fa-4b20-a4de-20d26714cb3f"
            // But video no start to play
            newPC.onaddstream = function(evt) {
              console.log('inside new on add stream', evt);
              secondStream = evt.stream;

              var element = document.getElementById('remoteVideo');
              element.src = URL.createObjectURL(secondStream);
            };

            // on ice candidate handler, I send trickle event to janus
            newPC.onicecandidate = function (event) {
               console.log("newPC event candidate", event.candidate);
               if (event.candidate) {
                   socket.send(JSON.stringify(
                   {
                      "janus" : "trickle",
                      "transaction" : "trickletransaction_for_new_peer_connection",
                      "candidate": event.candidate,
                      "session_id": sessionId,
                      "handle_id": newHandleIDs
                   }
                   ));
               }
            };
        }
    }

    // We create join on each user
    if(connectionData.janus == "success" && connectionData.transaction == "attach_on_publisher") {
        newHandleIDs = connectionData.data.id; // for the sake of simplicity I store here only one handleId (this is not array, will be later)
        console.log("newHandleIDs is ", newHandleIDs);

        socket.send(JSON.stringify({
            "janus": "message",
            "plugin": "janus.plugin.videoroom",
            "session_id": window.sessionId,
            "handle_id": newHandleIDs,
            "transaction": "join_on_each_publisher_be",
            "body": {
                "request" : "join",
                "ptype" : "listener",
                "display" : "Zirka_Vasyl_xD",
                "room" : 1234,
                "feed": users[0].id // id of user (for sake of simplicity connection only for 1st user, later will make loop connection for each user in room)
            }
        }));
    }

    // Creating answer on offer
    if(connectionData.transaction == "join_on_each_publisher_be" && connectionData.jsep) {
        newPC.setRemoteDescription(new SessionDescription(connectionData.jsep), function() {
            newPC.createAnswer().then(function(answer) {
                window.answer = answer;
                var tmp = newPC.setLocalDescription(answer);
                console.log("tmp", tmp);
                console.log("answer is", answer);
                console.log("newPC.localDescription", newPC.localDescription);
                return tmp;
            })
                .then(function() {
                    console.log("window.answer is", window.answer);
                    socket.send(JSON.stringify(
                        {
                            "janus" : "message",
                            "transaction" : "answer_for_new_peer_connection",
                            "session_id": sessionId,
                            "handle_id": newHandleIDs,
                            "body" : {
                                "request": "configure",
                                "audio" : true,
                                "video" : true
                            },
                            "jsep" : window.answer
                        }
                    ));
                })
                .catch(function (e) {
                    console.log("my error here is", e);
                });

        }, function(e){
            console.log("Error setting remote des here HA2", e);
        });
    }
};

// my createOffer function
function createOffer(incomePC) {
    console.log('inside create offer');
    incomePC.createOffer(
        function(description){
            console.log("desc here 1", description);
            pc.setLocalDescription(description, function () {
                    console.log("happy set local desk");
                },
                function () {
                    console.log("error to set local desk");
                });
            console.log('description1', description);
            socket.send(JSON.stringify(
                {
                    "janus" : "message",
                    "transaction" : "test_create_offer1",
                    "session_id": sessionId,
                    "handle_id": pluginId,
                    "body" : {
                        "request": "configure",
                        "audio" : true,
                        "video" : true
                    },
                    "jsep" : description
                }
            ));
        },
        function(error) { console.log(error) },
        mediaConstraints
    );

    console.log('created offer', pc);
}


</script>
</body>
</html>
	<html lang="en">
	<head>
	<title>Janus connection</title>
	<meta charset="utf8">
	</head>
	<body>
	<h2>Janus WebRTC gateway</h2>
	<video id="localVideo" autoplay muted></video>
	<video id="remoteVideo" autoplay muted></video>
	<script>

	// Inintial set up
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.webkitGetUserMedia;
	var SessionDescription = window.mozRTCSessionDescription \|\| window.RTCSessionDescription;
	var IceCandidate = window.mozRTCIceCandidate \|\| window.RTCIceCandidate;

	// Creating socket connection
	var socket = new WebSocket("wss://janus2.webrtc.network:8989/", 'janus-protocol');
	var stunServer = {
	iceServers: [
	{urls: "stun:23.21.150.121"},
	{urls: "stun:stun.l.google.com:19302"},
	{urls: "stun:stun.lawsroom.com:3478"},
	{urls: "turn:stun.lawsroom.com:3478", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
	{urls: "turn:stun.lawsroom.com:3478?transport=tcp", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
	{urls: "turn:stun.lawsroom.com:3478?transport=udp", credential: "tianyahechumizhiyin", username: "yiquganchangduan"},
	{urls: "turn:numb.viagenie.ca", credential: "muazkh", username: "web@live.com"}
	]
	};

	var mediaConstraints = {mandatory: { OfferToReceiveAudio: false, OfferToReceiveVideo: true }};

	// Creating Peer Connection
	var pc = new RTCPeerConnection(stunServer); // first peer connection to connect with janus server
	var mainStream; // stream to janus server from my camera
	var secondStream; // stream with user in the room
	var newPC = new RTCPeerConnection(stunServer); // second peer connection to connect to user in the room
	var newHandleIDs; // here I store handleId

	// Show video in local video element
	navigator.getUserMedia(
	{ audio: true, video: true },
	function (stream) {
	mainStream = stream;

	pc.addStream(mainStream);
	document.getElementById("localVideo").src = URL.createObjectURL(stream);

	pc.onaddstream = function(evt) {
	console.log("on local add stream");
	};
	},
	function(error) { console.log("error for this Peer Connection", error) }
	);

	// Connection to Janus
	socket.onopen = function(e) {
	console.log("Connection established", e);

	// Creating session with Janus server
	socket.send(JSON.stringify({"janus": "create", "transaction": "test"}));
	};

	// On ice candidate
	pc.onicecandidate = function (event) {
	if (event.candidate) {
	socket.send(JSON.stringify(
	{
	"janus" : "trickle",
	"transaction" : "trickletransaction",
	"candidate": event.candidate,
	"session_id": window.sessionId,
	"handle_id": pluginId
	}
	));
	}
	};

	// On message handlers
	socket.onmessage = function(event) {
	var connectionData = JSON.parse(event.data);

	// Creating session if not available yet, send attach event to janus server
	if(!window.sessionId) {
	window.sessionId = connectionData.data.id;
	socket.send(JSON.stringify({
	"janus": "attach",
	"plugin": "janus.plugin.videoroom",
	"session_id": window.sessionId,
	"transaction": "testattachtoroom",
	"force-bundle" : true,
	"force-rtcp-mux" : true,
	}));

	console.log('session started with id', window.sessionId);
	}

	// Getting plugin id
	if(!window.pluginId && connectionData["session_id"]) {
	window.pluginId = connectionData.data.id;
	console.log("plugin enabled with id: ", window.pluginId);

	// Send list request to janus using sessionId and pluginId
	socket.send(JSON.stringify({
	"janus": "message",
	"session_id": window.sessionId,
	"handle_id": window.pluginId,
	"transaction": "testlistrequest",
	"body": {
	"request" : "list",
	}
	}));
	}

	// Creating offer
	if (connectionData.transaction == "testlistrequest") {
	// Connect with video room
	socket.send(JSON.stringify({
	"janus": "message",
	"session_id": sessionId,
	"handle_id": pluginId,
	"transaction": "testjoinroom",
	"body": {
	"request" : "join",
	"room" : 1234,
	"ptype" : "publisher",
	"display" : "Zirka_Vasyl_:D",
	}
	}));

	// Keep session alive, every minute send keepalive message to Janus
	setInterval(function(){
	socket.send(JSON.stringify({
	"janus" : "keepalive",
	"session_id" : sessionId,
	"transaction" : "keepalivestransaction"
	}));
	}, 60000);

	// Definition of this function is at the bottom
	createOffer(pc);
	}

	// On answer on our offer we setting remote description of another peer
	if(connectionData.jsep && connectionData.jsep.type == "answer"){
	console.log('inside answer', connectionData);
	pc.setRemoteDescription(new SessionDescription(connectionData.jsep), function() {
	console.log('Setting remote description by answer, HA');
	}, function (e) {
	console.log("Error setting remote desk! Ha!", e);
	});
	}

	if(connectionData.plugindata && connectionData.plugindata.plugin == "janus.plugin.videoroom") {
	// Attach event for each publisher in video room
	if(connectionData.transaction == "testjoinroom" && connectionData.plugindata.data && connectionData.plugindata.data.publishers) {

	// Here is store all publishers
	window.users = connectionData.plugindata.data.publishers;

	// Making attach on each publisher
	for(var i = 0; i < window.users.length; i++) {
	socket.send(JSON.stringify({
	"janus": "attach",
	"plugin": "janus.plugin.videoroom",
	"session_id": window.sessionId,
	"opaque_id": "test_opaque_id",
	"transaction": "attach_on_publisher",
	"force-bundle" : true,
	"force-rtcp-mux" : true
	}));
	}

	// Here I attach my video to local element in HTML, I getting this url with src="blob:https://
	my-coe.com/4d6397c5-86fa-4b20-a4de-20d26714cb3f"
	// But video no start to play
	newPC.onaddstream = function(evt) {
	console.log('inside new on add stream', evt);
	secondStream = evt.stream;

	var element = document.getElementById('remoteVideo');
	element.src = URL.createObjectURL(secondStream);
	};

	// on ice candidate handler, I send trickle event to janus
	newPC.onicecandidate = function (event) {
	console.log("newPC event candidate", event.candidate);
	if (event.candidate) {
	socket.send(JSON.stringify(
	{
	"janus" : "trickle",
	"transaction" : "trickletransaction_for_new_peer_connection",
	"candidate": event.candidate,
	"session_id": sessionId,
	"handle_id": newHandleIDs
	}
	));
	}
	};
	}
	}

	// We create join on each user
	if(connectionData.janus == "success" && connectionData.transaction == "attach_on_publisher") {
	newHandleIDs = connectionData.data.id; // for the sake of simplicity I store here only one handleId (this is not array, will be later)
	console.log("newHandleIDs is ", newHandleIDs);

	socket.send(JSON.stringify({
	"janus": "message",
	"plugin": "janus.plugin.videoroom",
	"session_id": window.sessionId,
	"handle_id": newHandleIDs,
	"transaction": "join_on_each_publisher_be",
	"body": {
	"request" : "join",
	"ptype" : "listener",
	"display" : "Zirka_Vasyl_xD",
	"room" : 1234,
	"feed": users[0].id // id of user (for sake of simplicity connection only for 1st user, later will make loop connection for each user in room)
	}
	}));
	}

	// Creating answer on offer
	if(connectionData.transaction == "join_on_each_publisher_be" && connectionData.jsep) {
	newPC.setRemoteDescription(new SessionDescription(connectionData.jsep), function() {
	newPC.createAnswer().then(function(answer) {
	window.answer = answer;
	var tmp = newPC.setLocalDescription(answer);
	console.log("tmp", tmp);
	console.log("answer is", answer);
	console.log("newPC.localDescription", newPC.localDescription);
	return tmp;
	})
	.then(function() {
	console.log("window.answer is", window.answer);
	socket.send(JSON.stringify(
	{
	"janus" : "message",
	"transaction" : "answer_for_new_peer_connection",
	"session_id": sessionId,
	"handle_id": newHandleIDs,
	"body" : {
	"request": "configure",
	"audio" : true,
	"video" : true
	},
	"jsep" : window.answer
	}
	));
	})
	.catch(function (e) {
	console.log("my error here is", e);
	});

	}, function(e){
	console.log("Error setting remote des here HA2", e);
	});
	}
	};

	// my createOffer function
	function createOffer(incomePC) {
	console.log('inside create offer');
	incomePC.createOffer(
	function(description){
	console.log("desc here 1", description);
	pc.setLocalDescription(description, function () {
	console.log("happy set local desk");
	},
	function () {
	console.log("error to set local desk");
	});
	console.log('description1', description);
	socket.send(JSON.stringify(
	{
	"janus" : "message",
	"transaction" : "test_create_offer1",
	"session_id": sessionId,
	"handle_id": pluginId,
	"body" : {
	"request": "configure",
	"audio" : true,
	"video" : true
	},
	"jsep" : description
	}
	));
	},
	function(error) { console.log(error) },
	mediaConstraints
	);

	console.log('created offer', pc);
	}


	</script>
	</body>
	</html>