I have just started working with WebRTC. I want to use WebRTC with NodeJS.
Currently I have tried webrtc.io package. When I write a basic code for using WebRTC, I get the following JavaScript error.
Error is :
Uncaught TypeError: Type error
rtc._socket.onopen
Error Location:
webrtc.io.js:65
Here is my code.
CLIENT CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 getUserMedia</title>
<script src="socket.io.min.js" type="text/javascript"></script>
<script src="webrtc.io.js" type="text/javascript"></script>
<script>
rtc.connect('ws://abc.in:8001');
</script>
</head>
<body>
<video id="webcam" width="500" autoplay></video>
</body>
</html>
SERVER CODE :
var webRTC = require('/usr/local/node_modules/webrtc.io').listen( 8001 );
console.log( "Server Listening" );
webRTC.on( "connection", function() {
console.log( "Hi" ); // This gets executed successfully.
});
Q1.
Since "Hi" does get printed successfully, I don't know if JS error is actually making a difference or no. Help me resolve this JS error issue.
Issue also reported here.
Q2.
Hitting http://abc.in:8001/ through browser prints "Not implemented". Is that an issue?
Q3.
I wish to stream the audio+video from a mic and webcam to the server.
I understand that I need to create a peer to peer connection to achieve streaming of audio+video to server. Browser should act as one peer and the server would act as the second peer.
How do I send the WebRTC stream to the server? Lack of documentation of the webrtc.io package isn't helping me either.
Please help
EDIT : Browser used is the latest Google Chrome, Version 31.0.1650.57 m
I uploaded simplest webRTC code at
http://github.com/aungthuya-jse/simplest-webRTC/tree/master
You need to add the node_modules to under of project folder by installing
npm install express
and
npm install webrtc.io
after installation you will see /project-folder/node_modules/express folder and webrtc.io folder
Related
Problem Summary
Storybook snapshot test on static storybook returning blank screenshots even though they look fine on localhost:8080 when I ran npx http-server storybook-static
Tech stack and relevant code
Vue 3
Vite
Storybook
Jest
Storyshots
Puppeteer
I have components and their respective stories. npm run storybook works perfectly fine. My storybook.spec.js is as follows:
import { imageSnapshot } from "#storybook/addon-storyshots-puppeteer"
import initStoryshots from "#storybook/addon-storyshots"
initStoryshots({
suite: "Image storyshots",
test: imageSnapshot(
storybookUrl: 'file://absolute/path/to/my/storybook-static'
)
})
I ran the following. fyi, I did not modify any file in storybook-static after running npm run build-storybook.
npm run build-storybook
npm run test
npm run test constitutes jest --config=jest.config.js test
Problem
Unfortunately, the screenshots I get are all blank and fail the snapshot test.
I suspect it might be due to a CORS error just like other Storybook users when they click <project-root>/storybook-static/index.html after running npm run build-storybook, to which I want to ask for a solution as well, because I wanna run test remotely on a headless server.
Note
I used absolute path because relative path caused a resource not found error during the testing process.
The problem is that you're running the tests from file:// instead of http://. So the URI is file:// and the img url ends up like this after applying some url logic: path.resolve(window.location, '/your-image.png') file:///your-image.png.
If this is the case you could change to http://. You can start a express server and serve the storybook-static folder from setupGlobal and then shut it down in teardownGlobal. Then you will need to change your storybookUrl to http://localhost:<some-port>.
None of the images were loading within my pipeline but worked fine locally, ended up being because the components were fetching images using a relative path <img src="/my-image" /> which apparently is not allowed using the file protocol.
I ended up doing 2 things:
Updating the static dirs directory to use the root by updating the main.js file in storybook
module.exports = {
staticDirs: [{ from: '../static', to: '/' }],
}
Added a script to remove the leading slash of images in the preview-head.html file from storybook
<script>
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('img')).forEach((img) => {
const original = img.getAttribute('src');
img.setAttribute('src', original.replace('/', ''));
});
});
</script>
Another (arguably better) approach would be to run the tests through a server where you can access the images
I am integrating #jack-henry/banno-plugin-framework-bridge module in the plugin server. I have installed it globally and copied the banno-plugin-framework-bridge.js from dist folder to the root folder of the plugin server. I then included it in the response HTML as per following
<script type="module">
import { enableRouter } from "./banno-plugin-framework-bridge.js";
enableRouter();
</script>
Is this procedure right?
Also, I get the following error:
Cannot GET /banno-plugin-framework-bridge.js.
What must be going wrong?
Trying to load a local .json-file from the same folder in D3 (and logging it to the console), but there are two errors in the console:
d3.v5.js:5908 Fetch API cannot load
[buildings.json - file]. URL scheme must be
"http" or "https" for CORS request. json # d3.v5.js:5908 (anonymous) #
index.html:10
d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to
fetch
at Object.json (d3.v5.js:5908)
at index.html:10 json # d3.v5.js:5908 (anonymous) # index.html:10 Promise.then (async) (anonymous) # index.html:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<script>
d3.json("buildings.json").then(data => console.log(data))
</script>
</body>
</html>
Does anybody see the reason & have a solution?
d3.json uses fetch.
export default function(input, init) {
return fetch(input, init).then(responseJson);
}
https://github.com/d3/d3-fetch/blob/master/src/json.js
So you are dealing with the same problem described in these SO posts.
Importing local json file using d3.json does not work
"Cross origin requests are only supported for HTTP." error when loading a local file
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request
You are facing a problem with cross origin resource sharing which is a security feature by your browser.
Two options two avoid this:
use a webserver. To just run a simple webserver for your static html/js files something like the npm http-server (https://www.npmjs.com/package/http-server) could be used
Change your chrome startup parameters and let it know that you want to ignore this security feature. You can do this by changing your startup configuration for example like this
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\development"
The parameters --disable-web-security --user-data-dir are the important part here.
Note: Just use this for development. You allow cross origin requests by this for all websites you visit.
Another possibility mentioned in How to launch html using Chrome at "--allow-file-access-from-files" mode? is to use a browser extension like Web Server for Chrome
I try to write a SonarQube widget plugin which accesses Jenkins build information by jsonp(json with padding).
This is my html file:
<p id="id"></p>
<script type="text/javascript">
function display(data){
document.getElementById("id").innerHTML = data.number;
}
</script>
<script type="application/javascript" src="http://MYHOST/job/MYJOB/lastBuild/api/json?jsonp=display"> </script>
the html is running fine on my localhost.
But when the html built as a widget plugin in my sonarqube server, the jsonp get error.
Failed to load resource: the server responded with a status of 403 (jsonp forbidden; implement jenkins.security.SecureRequester)
My SonarQube version is 5.6.
Is there any sonarqube web security policy I didn't get it?
I'm working with application cache and I'm facing the below issue:
In Tomcat Server:
When the server is online and if the page is accessed for the first time, the files specified in the manifest file are caught successfully in the application cache.
When the server is offline, when we try to access the cached page, there is an error in the browser console (Application Cache Error event: Manifest fetch failed (-1) which is quite normal as per my findings in the internet) but the application cache works fine.
In Weblogic server:
I tried to run the same code in Weblogic server, in online mode, the files are cached as expected. But in the offline mode, for the first time the page is loaded, it works fine, but when I see the console the status of the application cache goes to OBSOLETE mode and so if I do a refresh of the page again, it throws me a 404 error. Also, I'm not getting the "Application Cache Error event: Manifest fetch failed (-1)" which I get when I try to run the code in tomcat server. Please let me know what's that I'm doing wrong. Below are the files:
index.html
<html manifest="demo.appcache">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<h1>Basic example of page using Application Cache</h1>
<p>Disconnect from the internet and try to reload this page. It should load without requiring you to connect to the internet.</p>
</body>
</html>
manifest file (demo.appcache)
CACHE MANIFEST
CACHE:
style.css
script.js
index.html
demo.appcache
NETWORK:
*
style.css
body{
background-color: #333;
}
h1{
color: #c94054;
}
p{
color: #fff;
}
script.js
if (!window.applicationCache){
alert('It seems that Application Cache is not supported in this browser. Please use a browser which supports it.');
}
web.xml
<mime-mapping>
<extension>appcache</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
This problem comes when the browser encounters the manifest line in the html tag, it tries to download the appcache file from the server. But when the server doesn't have this file it returns 404 error, so the application cache goes to OBSOLETE event.
So in this case, the possible reasons are
1- your server doesn't contain this file
2 - If your server has this file but not returning to the browser, this happens when the server is running but your application is actually undeployed.
So try stopping your server rather than just undeploying your applciation from the server instance.
Hope it works.