WebSocket connection to 'ws://localhost:5080/live/?id=mystream' failed - red5pro - javascript

I need to broadcast my steam in localhost for developing purposes. But the error comes in. I am new to media servers. I just wanna integrate the red5pro media server for one to many broadcasting in my website.
I am currently following Red5pro Publisher Docs and this tutorial from youtube for testing red5pro[beginner to media servers]. The tutorial is little outdated but i am still following it because i didn't find any other tutorial for red5pro.
I am using python simplehttpserver ("python -m http.server 8000") to run local server as told in the video tutorial.
My html code ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="video-container">
<video id="red5pro-publisher"></video>
</div>
<script src="lib/red5pro/red5pro-sdk.min.js"></script>
<script>
// Create a new instance of the WebRTC publisher.
var publisher = new red5prosdk.RTCPublisher();
// Create a view instance based on video element id.
var view = new red5prosdk.PublisherView('red5pro-publisher');
view.attachPublisher(publisher);
// Access user media.
navigator.getUserMedia({
audio: true,
video: true
}, function (media) {
// Upon access of user media,
// 1. Attach the stream to the publisher.
// 2. Show the stream as preview in view instance.
publisher.attachStream(media);
view.preview(media, true);
}, function (error) {
console.error(error);
});
// Using Chrome/Google TURN/STUN servers.
var iceServers = [{ urls: 'stun:stun2.l.google.com:19302' }];
// Initialize
publisher.init({
protocol: 'ws',
host: 'localhost',
port: 8081,
app: 'live',
streamName: 'mystream',
iceServers: iceServers,
tcpMuxPolicy: 'negotiate'
})
.then(function () {
// Invoke the publish action
return publisher.publish();
})
.catch(function (error) {
// A fault occurred while trying to initialize and publish the stream.
console.error(error);
});
</script>
</body>
<!-- WebRTC Shim -->
<!-- <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> -->
<!-- Exposes `red5prosdk` on the window global. -->
</html>
The error ->
red5pro-sdk.min.js 158th line -->
createWebSocket: function(e) { return new WebSocket(e) }
I think it is not able to create websocket!!

I'm not an expert on the HTML5 SDK, but I see you have the media settings and a few other lines commented out; uncomment them and try again. Also look through your red5.log on the server for other clues; any exceptions firing would be helpful.

Related

how can I output the websocket live feed to client browser DOM?

These are my goals.
connect to websocket API as a client
output these websocket messages to a specified browser DOM(client-side)
.
connecting to websocket on nodeJS
const WebSocket = require('ws');
const url = 'wss://websocket.example';
const ws = new WebSocket(url);
ws.onmessage = (event) => {
wsMessages = JSON.parse(event.data);
wsMessagesTime = wsMessages.t;
wsMessagesData = wsMessages.d;
console.log(wsMessagesTime, wsMessagesData);
};
from here I can console.log the wsMessagesTime and wsMessagesData during every event and I can see the live feed from my nodemon.
Now I would like to output that to my browser dom element.
output these websocket messages to a specified browser DOM(client-side)
const {log, error } = console;
const express = require('express');
const path = require('path');
const server = app.listen(3000, log('server is running on 3000'));
app.use(express.static('./public'));
app.get('/', (req,res) => {
console.log('root page logged')
})
from here, I put my index.html file inside the ./public directory.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket testing</title>
<script> var exports = {};</script>
</head>
<body>
<h2>hi this is a test string</h2>
<div id="websocket data"></div>
</body>
</html>
From here, I want to render my websocket data feeds onto the div element with the id websocket data.
From my research express is server side so I dont have access to the DOM
even view engines like ejs doesn't let me put data into the specified DOM. (correct me if I'm wrong please)
I simply want to render the output from console.log(wsMessagesTime, wsMessagesData); to the local webpage running on the express server into the div element specified as websocket data.

Stream audio from youtube to an html audio tag

I use a library called youtube-audio-stream that uses fluent-ffmpeg and ytdl-core in order to receive a readable stream from a given youtube link, then pipe it to the response object and use that endpoint of my express server as the source in an audio tag in my html page.
Whenever I do load the html page and try to click play, it gives me the following error:
events.js:467
function arrayClone(arr, n) {
^
RangeError: Maximum call stack size exceeded
at arrayClone (events.js:467:20)
at PassThrough.emit (events.js:196:23)
at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
at PassThrough.emit (events.js:198:15)
at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
at PassThrough.emit (events.js:198:15)
at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
at PassThrough.emit (events.js:198:15)
at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
at PassThrough.emit (events.js:198:15)
After hours of research, I finally gave up and came here. From what I understand, this error is fired when the call stack is not emptied out properly before the next tick of a process begins, most stackoverflow forums kept going on about how asynchronous programming leads to a potential infinite loop, but I haven't messed around no where near enough to understand where such a loop can occur in a stream.
Here's my server code:
const express = require("express");
const app = new express();
const stream = require('youtube-audio-stream');
const uri = "https://www.youtube.com/watch?v=t1TcDHrkQYg";
app.get("/audio", (req, res) => {
stream(uri).pipe(res);
})
app.listen(3000, () => console.log("Ready!"))
My frontend code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Doc</title>
</head>
<body>
<audio autoplay controls>
<source src="http://localhost:3000/audio" type="audio/mpeg">
</audio>
</body>
</html>
I humbly apologize if this sounds stupid or I've done something stupid but I'm really at an edge and have lost all hope. How would I go about solving or handling this range error?
If you would be so kind, please to anyone who's done something similar to what I'm doing, are there better alternatives?
Thank you very much for your time and effort.
Fixed it, the lousy library was using an outdated version of ytdl-core! I downloaded the source of youtube-audio-stream and then updated the ytdl-core to the latest version, now all of it works!
Here is a solution that works without the server-side.
I (also) spent hours trying to get this working...
I looked into youtube-audio-stream after seeing your post, but I never got it working. Instead I ended up with this solution that seems to work well. After reading this post, I modified some values to work with YouTube's current (2020) API.
Here is a solution that should work, for anyone looking! Try on CodePen
// YouTube video ID
var videoID = "CMNry4PE93Y";
// Fetch video info (using a proxy if avoid CORS errors)
fetch('https://cors-anywhere.herokuapp.com/' + "https://www.youtube.com/get_video_info?video_id=" + videoID).then(response => {
if (response.ok) {
response.text().then(ytData => {
// parse response to find audio info
var ytData = parse_str(ytData);
var getAdaptiveFormats = JSON.parse(ytData.player_response).streamingData.adaptiveFormats;
var findAudioInfo = getAdaptiveFormats.findIndex(obj => obj.audioQuality);
// get the URL for the audio file
var audioURL = getAdaptiveFormats[findAudioInfo].url;
// update the <audio> element src
var youtubeAudio = document.getElementById('youtube');
youtubeAudio.src = audioURL;
});
}
});
function parse_str(str) {
return str.split('&').reduce(function(params, param) {
var paramSplit = param.split('=').map(function(value) {
return decodeURIComponent(value.replace('+', ' '));
});
params[paramSplit[0]] = paramSplit[1];
return params;
}, {});
}
<audio id="youtube" controls></audio>

Trouble connecting WebSocket with Broker Mosquitto

so I've been trying to create a simple web page with Apache made with bootstrap from where I can send/receive publication with Mosquitto.
My issue here is that when I try to connect to the mqtt client i get this errors, i tried every combination that i found looking on guides and other stuff i founded, i either get ERR_CONNECTION_REFUSED or Error 404 or CONNECTION_RESET.
WebSocket connection to 'ws://localhost:9001/mqtt' failed: Error in
connection establishment: net::ERR_CONNECTION_REFUSED
I tried looking up ways to fix this, so I added in /etc/mosquitto/mosquitto.conf:
#listener 8081
#protocol websockets
#listener 8080
#protocol websockets
#port 9001
listener 9001
protocol websockets
My index.php file (at some point i just kept adding stuff):
<head >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- MQTT Websocket -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var mqtt;
var reconnectTimeout = 2000;
var host = 'localhost';
var port = 9001;
function onConnect() {
message = new Paho.MQTT.Message("Test");
message.destinationName = 'test';
mqtt.send(message);
}
function onFail() {
console.log("fail")
}
function MQTTconnect() {
mqtt = new Paho.MQTT.Client(host, port, '/mqtt', "mark");
var options = {
cleanSession: true,
useSSL: false,
timeout: 3,
onSuccess: onConnect,
onFailure: onFail,
};
mqtt.connect(options);
}
</script>
If anyone could kindly tell me if i missed something or what i have to do to make the connection work I'd gladly appreciate! I've been stuck like this for hours now.
EDIT :
I think I found the issue i think I just had to type on a terminal
sudo mosquitto -c /etc/mosquitto/mosquitto.conf
and leave it open to make it work.

SignalR inside an iframe not receiving

My web application that utilizes signalR sent from an API hub works well on all browsers. Now, when I try to add the link of my web application inside an iframe within a basic html page, my web application does not execute my connection methods.
Here a snippet of my code in my web application:
$.connection.hub.url = 'myUrl';
$.connection.hub.logging = true;
var varHub= $.connection.MyHub;
$.connection.hub.start()
.done(function () { console.log("Signal R connected"); //this is being executed })
.fail(function () { console.log("Could not Connect to signal R hub!"); });
$.connection.hub.disconnected(function () {
setTimeout(function () {
$.connection.hub.start();
}, 5000); // Re-start connection after 5 seconds
});
//Methods to be called by the server for signal R connections
varHub.client.start= function () {
//this is not being called
//do something
};
As I have said I have no problems when I directly access it via url. The issue only happens when I try to insert the url in an iframe.
Here's how I do it:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=11">
</head>
<body width="1280" height="736" style="margin:0;padding:0;overflow:hidden;border:0px;background:#000000;">
<iframe
src="http://myUrl/Home/Index?Id=someId" style="width:1280px;height:720px;margin:0;paddin:0;overflow:hidden;border:0px;"/>
scrolling="no"/>
</body>
</html>
Note: My target browser is IE 11.
Any ideas will be a great help! Thanks.
For anyone who will might encounter this in the future, this parameter fixed my issue.
Source: Here
Negotiating a transport takes a certain amount of time and client/server resources. If the client capabilities are known, then a transport can be specified when the client connection is started. The following code snippet demonstrates starting a connection using the Ajax Long Polling transport, as would be used if it was known that the client did not support any other protocol:
$.connection.hub.start({ transport: 'longPolling' })

Gives me this error in gplus-api using JS

Hello i just started learning gplus-api signin using javascript but i came across a error that says this Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
This is my code i have referred to this site but didn;t help me! https://developers.google.com/+/web/signin/javascript-flow
My code
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
<meta name="google-signin-clientid" content="MY_CLIENT_ID.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />
<meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<script type="text/javascript">
(function(){
var po = document.createElement('script');
po.type = "text/javascript";
po.async = true;
po.src = "https://apis.google.com/js/client:plusone.js";
var s = document.getElementByTagName('script');
s.parentNode.insertBefore(po,s);
});
function render() {
// Additional params including the callback, the rest of the params will
// come from the page-level configuration.
var additionalParams = {
'callback': signinCallback
};
// Attach a click listener to a button to trigger the flow.
var signinButton = document.getElementById('signinButton');
signinButton.addEventListener('click', function() {
gapi.auth.signIn(additionalParams); // Will use page level configuration
});
}
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
// Update the app to reflect a signed in user
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
// Update the app to reflect a signed out user
// Possible error values:
// "user_signed_out" - User is signed-out
// "access_denied" - User denied access to your app
// "immediate_failed" - Could not automatically log in the user
console.log('Sign-in state: ' + authResult['error']);
}
}
</script>
<button id="signinButton">Sign in with Google</button>
</body>
</html>
my js origin is http://localhost:8080, also when i try to load this url it gives me 404 error
please help to solve me this error!
You must run a web server (even locally) when working with Google+ Sign in. A simple example is to run Python with your port set to 8080:
python -m SimpleHTTPServer 8080
You can also configure / run Apache or another server for local testing.

Categories