Janus video stream on a client application
3,440 views
Skip to first unread message
kfirbene
Jun 19, 2018, 8:21:59 AM6/19/18
to meetecho-janus
Hi,
I have a Janus server running x4 video streams in VP8.
I placed an html file that loads x2 videos in the Janus demo folder and I am able to get the x2 videos running locally and also from a remote PC on the same LAN.
In addition I have an angularjs 1.6 application that I need to get those 2 videos.
1. What is the correct way to get those videos from the client?
2. I need the user to choose from a drop down menu whether to switch to a different video. How do I switch the video source dynamically?
I tried to create an angularjs service for that with the code that is working on the demos folder but it does not pass the isWebrtcSupported.
Any idea?
Lorenzo Miniero
Jun 20, 2018, 4:21:30 AM6/20/18
to meetecho-janus
What do you mean by "load x2 videos in the demo folder"? Is this the Streaming plugin?
If so, you can find the documentation for its API here: https://janus.conf.meetecho.com/docs/streaming
The Streaming plugin demo also has a drop down menu, so you can use that as a reference.
L.
kfirbene
Jun 20, 2018, 4:45:51 AM6/20/18
to meetecho-janus
Hi Lorenzo,
What I mean is: whaen I take the foloowing html:
<!--
// janus-gateway streamingtest refactor so I can understand it better
// GPL v3 as original
-->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="janus.js" ></script>
<script type="text/javascript">
var server = null;
if(window.location.protocol === 'http:'){
server = "http://" + window.location.hostname + ":8088/janus";
}else{
server = "https://" + window.location.hostname + ":8089/janus";
}
var janus = null;
var janus2 = null;
var streaming = null;
var streaming2 = null;
var started = false;
var spinner = null;
var selectedStream = null;
$(document).ready(function() {
// Initialize the library (console debug enabled)
Janus.init({debug: true, callback: function() {
startJanus();
}});
});
function startJanus(){
console.log("starting Janus");
$('#start').click(function() {
if(started){
return;
}
started = true;
// Make sure the browser supports WebRTC
if(!Janus.isWebrtcSupported()) {
console.error("No webrtc support");
return;
};
// Create session
janus = new Janus({
server: server,
success: function() {
console.log("Success");
attachToStreamingPlugin(janus);
},
error: function(error) {
console.log(error);
console.log("janus error");
},
destroyed: function() {
console.log("destroyed");
}
});
// Create session 2
janus2 = new Janus({
server: server,
success: function() {
console.log("Success 2");
attachToStreamingPlugin(janus2);
},
error: function(error) {
console.log(error);
console.log("janus error 2");
},
destroyed: function() {
console.log("destroyed 2");
}
});
});
}
function attachToStreamingPlugin(janusInstance){
if(janusInstance == janus){
// Attach to streaming plugin
console.log("Attach to streaming plugin");
janusInstance.attach({
plugin: "janus.plugin.streaming",
success: function(pluginHandle) {
streaming = pluginHandle;
console.log("Plugin attached! (" + streaming.getPlugin() + ", id=" + streaming.getId() + ")");
// Setup streaming session
updateStreamsList(0);
},
error: function(error) {
console.log(" -- Error attaching plugin... " + error);
console.error("Error attaching plugin... " + error);
},
onmessage: function(msg, jsep) {
console.log(" ::: Got a message :::");
console.log(JSON.stringify(msg));
processMessage(msg);
handleSDP(jsep);
},
onremotestream: function(stream) {
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
handleStream(stream);
},
oncleanup: function() {
console.log(" ::: Got a cleanup notification :::");
}
});//end of janusInstance.attach
}
else if(janusInstance == janus2){
// Attach to streaming plugin
console.log("Attach to streaming plugin 2");
janusInstance.attach({
plugin: "janus.plugin.streaming",
success: function(pluginHandle) {
streaming2 = pluginHandle;
console.log("Plugin attached! (" + streaming2.getPlugin() + ", id=" + streaming2.getId() + ")");
// Setup streaming session
updateStreamsList(1);
},
error: function(error) {
console.log(" -- Error attaching plugin... " + error);
console.error("Error attaching plugin... " + error);
},
onmessage: function(msg, jsep) {
console.log(" ::: Got a message :::");
console.log(JSON.stringify(msg));
processMessage(msg);
handleSDP2(jsep);
},
onremotestream: function(stream) {
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
handleStream2(stream);
},
oncleanup: function() {
console.log(" ::: Got a cleanup notification :::");
}
});//end of janusInstance.attach
}
}
function processMessage(msg){
var result = msg["result"];
if(result && result["status"]){
var status = result["status"];
switch(status) {
case 'starting':
console.log("starting - please wait...");
break;
case 'preparing':
console.log("preparing");
break;
case 'started':
console.log("started");
break;
case 'stopped':
console.log("stopped");
stopStream();
break;
}
}else{
console.log("no status available");
}
}
// we never appear to get this jsep thing
function handleSDP(jsep){
console.log(" :: jsep :: ");
console.log(jsep);
if(jsep !== undefined && jsep !== null) {
console.log("Handling SDP as well...");
console.log(jsep);
// Answer
streaming.createAnswer({
jsep: jsep,
media: { audioSend: false, videoSend: false }, // We want recvonly audio/video
success: function(jsep) {
console.log("Got SDP!");
console.log(jsep);
var body = { "request": "start" };
streaming.send({"message": body, "jsep": jsep});
},
error: function(error) {
console.log("WebRTC error:");
console.log(error);
console.error("WebRTC error... " + JSON.stringify(error));
}
});
}else{
console.log("no sdp");
}
}
// we never appear to get this jsep thing
function handleSDP2(jsep){
console.log(" :: jsep :: ");
console.log(jsep);
if(jsep !== undefined && jsep !== null) {
console.log("Handling SDP as well...");
console.log(jsep);
// Answer
streaming2.createAnswer({
jsep: jsep,
media: { audioSend: false, videoSend: false }, // We want recvonly audio/video
success: function(jsep) {
console.log("Got SDP!");
console.log(jsep);
var body = { "request": "start" };
streaming2.send({"message": body, "jsep": jsep});
},
error: function(error) {
console.log("WebRTC error:");
console.log(error);
console.error("WebRTC error... " + JSON.stringify(error));
}
});
}else{
console.log("no sdp");
}
}
function handleStream(stream){
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
// Show the stream and hide the spinner when we get a playing event
console.log("attaching remote media stream");
attachMediaStream($('#remotevideo').get(0), stream);
$("#remotevideo").bind("playing", function () {
console.log("got playing event");
});
}
function handleStream2(stream){
console.log(" ::: Got a remote stream :::");
console.log(JSON.stringify(stream));
// Show the stream and hide the spinner when we get a playing event
console.log("attaching remote media stream 2");
attachMediaStream($('#remotevideo2').get(0), stream);
$("#remotevideo2").bind("playing", function () {
console.log("got playing event");
});
}
function updateStreamsList(index) {
if(index == 0){
var body = { "request": "list" };
console.log("Sending message (" + JSON.stringify(body) + ")");
streaming.send({"message": body, success: function(result) {
if(result === null || result === undefined) {
console.error("no streams available");
return;
}
if(result["list"] !== undefined && result["list"] !== null) {
var list = result["list"];
console.log("Got a list of available streams:");
console.log(list);
console.log("taking the first available stream");
var theFirstStream = list[index];
startStream(list[index]);
}else{
console.error("no streams available - list is null");
return;
}
}});
}
else if(index == 1){
var body = { "request": "list" };
console.log("Sending message (" + JSON.stringify(body) + ")");
streaming2.send({"message": body, success: function(result) {
if(result === null || result === undefined) {
console.error("no streams available");
return;
}
if(result["list"] !== undefined && result["list"] !== null) {
var list = result["list"];
console.log("Got a list of available streams:");
console.log(list);
console.log("taking the first available stream");
var theFirstStream = list[index];
startStream(list[index]);
}else{
console.error("no streams available - list is null");
return;
}
}});
}
}
function startStream(selectedStream) {
var selectedStreamId = selectedStream["id"];
console.log("Selected video id #" + selectedStreamId);
if(selectedStreamId === undefined || selectedStreamId === null) {
console.log("No selected stream");
return;
}
var body = { "request": "watch", id: parseInt(selectedStreamId) };
if(selectedStreamId == '1'){
streaming.send({"message": body});
}
else if(selectedStreamId == '2'){
streaming2.send({"message": body});
}
}
function stopStream() {
console.log("stopping stream");
var body = { "request": "stop" };
streaming.send({"message": body});
streaming.hangup();
streaming2.send({"message": body});
streaming2.hangup();
}
</script>
</head>
<body>
<div>
<button class="btn btn-default" autocomplete="off" id="start">Start</button><br />
<div id="stream">
<video controls autoplay id="remotevideo" width="640" height="480" >
</video>
</div>
<div id="stream2">
<video controls autoplay id="remotevideo2" width="640" height="480" >
</video>
</div>
</div>
</body>
</html>
Which is basically the video stream from the demos folder in the installation of Janus with some of the methods duplicated to stream 2 videos.
When I open Chrome and set the URL: http://ip_of_janus_server:8000/myHTMLFile.html I see the 2 video stream perfectly.
Now when I try to add the same exact javascript code to my angularjs application, as a service, that I can use to get video streams It fails on the isWebrtcSupported.
Does the angular application has to be in the same PC as Janus? I am running it either from a nodejs server or from webstrom (both in different PC's then the Janus server) and it does not work.
Any idea?
Lorenzo Miniero
Jun 20, 2018, 4:47:41 AM6/20/18
to meetecho-janus
Please DO NOT paste huge bunches of text inline... it's written clearly in the guidelines.
Sorry but I'm not going to look at the code. What I meant was what you're trying to do. Are the videos Streaming mountpoints? Are they VideoRoom publishers? Which plugins are you involving in your application?
L.
kfirbene
Jun 24, 2018, 2:41:11 AM6/24/18
to meetecho-janus
Sorry for the large text.
I am streaming out of gstreamer to Janus server using the janus.plugin.streaming.cfg.
Lorenzo Miniero
Jun 26, 2018, 3:43:23 AM6/26/18
to meetecho-janus
Then please follow the documentation I pointed to in my first reply. It has info on switching sources as well.
L.
Reply all
Reply to author
Forward
0 new messages