I'm a beginner in webrtc . I have used simple-peer to connect two peers on a video calling application .
When a second peer is connected , his video is displayed but after a few seconds an error showing "cannot signal when peer is destroyed" is thrown . I dont know where I'm going wrong . I have attached the code below .
The code error is thrown in this line :
PeerRef.current.signal(signal);
client.js :
import React, { useEffect,useRef } from 'react';
import io from 'socket.io-client';
import Peer from 'simple-peer';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
width: 100%;
height: 100vh;
flex-direction: row;
`;
const LeftRow = styled.div`
width: 40%;
height: 100%;
`;
const RightRow = styled.div`
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;
const Video = styled.video`
height: 50%;
width: 100%;
border: 1px solid black;
`;
const Room=(props)=>{
const socketRef=useRef();
const userRef=useRef();
const partnerRef=useRef();
const PeerRef=useRef();
useEffect(()=>{
navigator.mediaDevices.getUserMedia({video:true,audio:true}).then((stream)=>{
userRef.current.srcObject=stream;
socketRef.current=io.connect('/');
console.log("hello");
console.log(props.match.params.roomID);
socketRef.current.emit("join room",props.match.params.roomID);
socketRef.current.on("other user",(PartnerID)=>{
console.log("creator");
if(PartnerID){
console.log("partner");
PeerRef.current=createPeer(PartnerID,socketRef.current.id,stream);
}
});
socketRef.current.on("caller signal",(incoming)=>{
console.log("Caller signal from browser");
PeerRef.current=addPeer(incoming.CallerID,incoming.signal,stream);
});
socketRef.current.on("callee signal",(signal)=>{
console.log("callee signal from browser");
PeerRef.current.signal(signal);
});
})
},[]);
function handleStream(stream){
partnerRef.current.srcObject=stream;
}
const createPeer = (PartnerID,CallerID,stream) =>{
const peer = new Peer({
initiator:true,
trickle:false,
stream
});
peer.on("signal",(signal)=>{
const payload={
PartnerID,
CallerID,
signal
}
socketRef.current.emit("call partner",payload);
});
peer.on("stream",handleStream);
//peer.on("data",handleData);
return peer;
}
const addPeer = (CallerID,insignal,stream) =>{
console.log("inside addpeer");
const peer = new Peer({
initiator:false,
trickle:false,
stream
});
peer.on("signal",(signal)=>{
console.log("inside peer");
const payload={
CallerID,
signal
}
socketRef.current.emit("accept call",payload);
});
peer.on("stream",handleStream);
peer.signal(insignal);
return peer;
}
return(
<Container>
<LeftRow>
<Video autoPlay ref={userRef} />
<Video autoPlay ref={partnerRef} />
</LeftRow>
<RightRow>
</RightRow>
</Container>
);
}
export default Room;
server.js:
const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);
server.listen(5000);
const rooms={};
io.on('connection',(socket)=>
{
console.log("Connected");
socket.on("join room",(roomID)=>{
console.log("User here");
if(rooms[roomID])
rooms[roomID].push(socket.id);
else
rooms[roomID]=[socket.id];
const otherUser = rooms[roomID].find(id => id!==socket.id);
socket.emit("other user",otherUser);
});
socket.on("call partner",(incoming)=>{
console.log("call partner from server");
const payload={
CallerID:incoming.CallerID,
signal:incoming.signal
}
io.to(incoming.PartnerID).emit("caller signal", payload);
});
socket.on("accept call",(incoming)=>{
console.log("accept call");
io.to(incoming.CallerID).emit("callee signal",incoming.signal);
});
});
Had the same error, I was using version 9.7.2 of simple-peer. It seems to have a bug, so bringing the version down to 9.6.2 fixed the error.
Related
After crawling a part of the university to node.js, we try to call an api of node.js to react.js.
In the node.js file, Title and url of the link were retrieved, and in the react.js file, List and ListItem were configured to receive api data.
The problem is that I don't know how to call tittle and url from react.js, which are data crawled in node.js.
Also, I ask because I don't know how to insert the called api into the list of react.js.
This is App.js :
import React from 'react';
import HeaderTemplate from './components/HeaderTemplate';
import MainTemplate from './components/MainTemplate';
import FooterTemplate from './components/FooterTemplate';
const App = () => {
return (
<div>
<HeaderTemplate/>
<MainTemplate/>
<FooterTemplate/>
</div>
);
};
export default App;
This is MainTemplate.js :
import React from 'react';
import styled from 'styled-components';
import NoticesList from './NoticesList';
const MainTemplate = () => {
const Main = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
padding: '60px',
};
const Section01 = {
margin: '25px',
width: '55%',
height: '80vh',
backgroundColor: '#eeeeee',
fontSize: '45px',
textAlign: 'center',
};
const Section02 = {
margin: '25px',
width: '45%',
height: '80vh',
backgroundColor: '#ff0000',
fontSize: '45px',
textAlign: 'center',
};
return (
<div className="Main" style={Main}>
<div className="Section01" style={Section01}>
비교과
<NoticesList />
</div>
<div className="Section02" style={Section02}>
튜터링 및 학공
</div>
</div>
);
};
export default MainTemplate;
This is NoticesItem.js :
import React from 'react';
import styled from 'styled-components';
const NoticesItemBlock = styled.div`
display: flex;
.contents {
h6 {
margin: 15px;
a {
color: black;
}
}
}
& + & {
margin-top: 1.5rem;
}
`;
const NoticesItem = ({ article }) => {
const { title, url } = article;
return (
<NoticesItemBlock>
<div className="contents">
<h6>
<a href={url} target="_blank" rel="noopener noreferrer">
{title}
</a>
</h6>
</div>
</NoticesItemBlock>
);
};
export default NoticesItem;
This is NoticesList.js :
import React from 'react';
import styled from 'styled-components';
import NoticesItem from './NoticesItem';
const NoticesListBlock = styled.div`
box-sizing: border-box;
padding-bottom: 3rem;
width: 768px;
margin: 0 auto;
margin-top: 2rem;
`;
const sampleArticle = {
title: 'title',
url: 'https://google.com',
};
const NoticesList = () => {
return (
<NoticesListBlock>
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
<NoticesItem article={sampleArticle} />
</NoticesListBlock>
);
};
export default NoticesList;
I am trying to run this HTML example https://codepen.io/mediapipe/details/KKgVaPJ from https://google.github.io/mediapipe/solutions/face_mesh#javascript-solution-api in a create react application. I have already done:
npm install of all the facemesh mediapipe packages.
Already replaced the jsdelivr tags with node imports and I got the definitions and functions.
Replaced the video element with react-cam
I don't know how to replace this jsdelivr, maybe is affecting:
const faceMesh = new FaceMesh({
locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/#mediapipe/face_mesh/${file}`;
}
});
So the question is:
Why the facemesh is not showing? Is there any example of what I am trying to do?
This is my App.js code (sorry for the debugugging scaffolding):
import './App.css';
import React, { useState, useEffect } from "react";
import Webcam from "react-webcam";
import { Camera, CameraOptions } from '#mediapipe/camera_utils'
import {
FaceMesh,
FACEMESH_TESSELATION,
FACEMESH_RIGHT_EYE,
FACEMESH_LEFT_EYE,
FACEMESH_RIGHT_EYEBROW,
FACEMESH_LEFT_EYEBROW,
FACEMESH_FACE_OVAL,
FACEMESH_LIPS
} from '#mediapipe/face_mesh'
import { drawConnectors } from '#mediapipe/drawing_utils'
const videoConstraints = {
width: 1280,
height: 720,
facingMode: "user"
};
function App() {
const webcamRef = React.useRef(null);
const canvasReference = React.useRef(null);
const [cameraReady, setCameraReady] = useState(false);
let canvasCtx
let camera
const videoElement = document.getElementsByClassName('input_video')[0];
// const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasElement = document.createElement('canvas');
console.log('canvasElement', canvasElement)
console.log('canvasCtx', canvasCtx)
useEffect(() => {
camera = new Camera(webcamRef.current, {
onFrame: async () => {
console.log('{send}',await faceMesh.send({ image: webcamRef.current.video }));
},
width: 1280,
height: 720
});
canvasCtx = canvasReference.current.getContext('2d');
camera.start();
console.log('canvasReference', canvasReference)
}, [cameraReady]);
function onResults(results) {
console.log('results')
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height);
if (results.multiFaceLandmarks) {
for (const landmarks of results.multiFaceLandmarks) {
drawConnectors(canvasCtx, landmarks, FACEMESH_TESSELATION, { color: '#C0C0C070', lineWidth: 1 });
drawConnectors(canvasCtx, landmarks, FACEMESH_RIGHT_EYE, { color: '#FF3030' });
drawConnectors(canvasCtx, landmarks, FACEMESH_RIGHT_EYEBROW, { color: '#FF3030' });
drawConnectors(canvasCtx, landmarks, FACEMESH_LEFT_EYE, { color: '#30FF30' });
drawConnectors(canvasCtx, landmarks, FACEMESH_LEFT_EYEBROW, { color: '#30FF30' });
drawConnectors(canvasCtx, landmarks, FACEMESH_FACE_OVAL, { color: '#E0E0E0' });
drawConnectors(canvasCtx, landmarks, FACEMESH_LIPS, { color: '#E0E0E0' });
}
}
canvasCtx.restore();
}
const faceMesh = new FaceMesh({
locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/#mediapipe/face_mesh/${file}`;
}
});
faceMesh.setOptions({
selfieMode: true,
maxNumFaces: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
faceMesh.onResults(onResults);
// const camera = new Camera(webcamRef.current, {
// onFrame: async () => {
// await faceMesh.send({ image: videoElement });
// },
// width: 1280,
// height: 720
// });
// camera.start();
return (
<div className="App">
<Webcam
audio={false}
height={720}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={1280}
videoConstraints={videoConstraints}
onUserMedia={() => {
console.log('webcamRef.current', webcamRef.current);
// navigator.mediaDevices
// .getUserMedia({ video: true })
// .then(stream => webcamRef.current.srcObject = stream)
// .catch(console.log);
setCameraReady(true)
}}
/>
<canvas
ref={canvasReference}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 1280,
height: 720,
}}
/>
</div >
);
}
export default App;
You don't have to replace the jsdelivr, that piece of code is fine; also I think you need to reorder your code a little bit:
You should put the faceMesh initialization inside the useEffect, with [] as parameter; therefore, the algorithm will start when the page is rendered for the first time
Also, you don't need to get videoElement and canvasElement with doc.*, because you already have some refs defined
An example of code:
useEffect(() => {
const faceMesh = new FaceDetection({
locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/#mediapipe/face_detection/${file}`;
},
});
faceMesh.setOptions({
maxNumFaces: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5,
});
faceMesh.onResults(onResults);
if (
typeof webcamRef.current !== "undefined" &&
webcamRef.current !== null
) {
camera = new Camera(webcamRef.current.video, {
onFrame: async () => {
await faceMesh.send({ image: webcamRef.current.video });
},
width: 1280,
height: 720,
});
camera.start();
}
}, []);
Finally, in the onResults callback I would suggest printing first the results, just to check if the Mediapipe implementation is working fine. And don't forget to set the canvas size before drawing something.
function onResults(results){
console.log(results)
canvasCtx = canvasReference.current.getContext('2d')
canvas.width = webcamRef.current.video.videoWidth;
canvas.height = webcamRef.current.video.videoHeight;;
...
}
Good luck! :)
I want to render a page when I click on Signin. I use a Service Oriented Architecture, in which I use the Pug Template Engine for making an Admin-Panel. When I click on SignIn, it give the error below.
{"error":{"message":"Not found"}}
I don't know where I made a mistake. Please help me.
Here is the welcome.pug code where there is a Signin link. Please see if I use the correct url or not.
doctype html
html(lang='{{ app()->getLocale() }}')
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
title QuizLit
// Fonts
link(href='https://fonts.googleapis.com/css?family=Raleway:100,600', rel='stylesheet', type='text/css')
// Styles
style.
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 5px 25px;
font-size: 24px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
border: solid 1px #636b6f;
border-radius: 50px;
}
.m-b-md {
margin-bottom: 30px;
}
body
.flex-center.position-ref.full-height
.content
.title.m-b-md
| Welcome to QuizLit
.links
a(href='/login') Sign in
Here is the structure of my code.
Here is the login.pug file
include ../layout/main
block content
// Horizontal Form
.login-box
.login-logo
a(href='/')
b Admin
// /.login-logo
.login-box-body
p.login-box-msg Sign in to start your session
form(role='form', method='POST', action="/login")
ul.text-danger
.has-feedback(class="form-group{{ $errors->has('email') ? ' has-error' : '' }}")
input#email.form-control(type='email', name='email', value=" ", placeholder='Email', required='')
//- | #if ($errors->has('email'))
span.help-block
//- strong {{ $errors->first('email') }}
//- | #endif
span.glyphicon.glyphicon-envelope.form-control-feedback
.has-feedback(class="form-group{{ $errors->has('password') ? ' has-error' : '' }}")
input#password.form-control(type='password', name='password', placeholder='Password', required='')
//- | #if ($errors->has('password'))
span.help-block
//- strong {{ $errors->first('password') }}
//- | #endif
span.glyphicon.glyphicon-lock.form-control-feedback
.row
.col-xs-7.col-xs-offset-1
.checkbox.icheck
label
input(type='checkbox')
| Remember Me
// /.col
.col-xs-4
button.btn.btn-primary.btn-block.btn-flat(type='submit') Sign In
// /.col
//- | #section('page_specific_scripts')
script(src="/plugins/iCheck/icheck.min.js")
script.
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
And here is the Api.js code:
'use strict'
const express = require('express');
const router = express.Router();
const adminAuthService = require('../service/adminAuthService');
const middlewares = require('../../../base/service/middlewares/accessControl');
router.post("/login", (req, res, next) => {
adminAuthService.login(req.body)
.then(data => {
return res.send(data)
}, err => next(err))
});
router.post("/createstudent", middlewares.assertUserIsAdmin, (req, res, next) => {
// router.post("/createstudent", (req, res, next) => {
adminAuthService.signupStudent(req.body)
.then(data => {
return res.send(data)
}, err => next(err))
});
module.exports = router;
Here is the Index.js file:
'use strict'
const express = require('express');
const router = express.Router();
const adminRoutes = require("./admin");
const teacherRoutes = require("./teacher");
const appRoutes = require("./api");
router.use("/admin", adminRoutes);
router.use("/teacher", teacherRoutes);
router.use("/api", appRoutes);
router.get('/', (req, res, next) => {
res.render('welcome');
})
module.exports = router
How should I separately define the Web Routes and Api Routes to use a Service Oriented Architecture in Node.js.
Firstly you do not have any /login route in the index.js file, so /login on the button would not work.
Secondly you don't seem to have any route handler which will render the login.pug file.
You can define this in the index.js file as a GET route
router.get('/login', (req, res, next) => {
res.render('login');
});
You can even keep this route handler in your api.js file in which case the effective route for the button would be
.links
a(href='/api/login') Sign in
Another thing that may help is including a POST method request in your pug file.
At the moment, it appears you only have an API endpoint for /login listening for POST requests.
#stephen suggested you add a get route. If you don't want to or can't do that, you need to call /login with a POST method. Make sure to pass along the user information needed to authenticate them.
I've been trying to visualize Vector data. I'm using Tegola as vector tile server. My first choice of visualizing library was Leaflet, but Leaflet's Vector.Grid library seems to have some problems with point data;
Issue on tegola's Github page.
Issue on Leaflet.VectorGrid project on Github.
So I've switched to OpenLayers. OpenLayers has a very inclusive library and there are plenty of examples and tutorials.
It took half a day for me to understand new version and complete the workshop on the link above. OpenLayers seems to be the solution for my needs. But I don't know how to rewrite code the code that I've prepared in workshop which is written to run on web.pack server. I want to render the layers and add a few nodes that will complete my needs on the map.
My map runs on web.pack server ;
But I want to render this map in Node. So I've write a server file;
// Get dependencies
const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const dotenv = require('dotenv')
const logger = require('./services/logger');
const cors = require('cors');
const { Pool, Client } = require('pg')
const pool = new Pool()
dotenv.config();
// Get our API routes
const api = require('./routes/api.router');
const client = new Client()
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/script'));
app.get('/', function (req, res) {
// res.sendFile(__dirname + "/views/index.html");
res.render('index', { title: 'Map' });
});
// Set our api routes
app.use('/api', api);
app.use((req, res, next) => {
const err = new Error('Not Found');
err.status = 404;
logger.error(`Request Error ${req.url} - ${err.status}`)
next(err);
});
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.json({
error: {
message: err.message
}
});
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`API running on localhost:${port}`));
Confusing part starts from here, I'm using the same HTML file in workshop server(web.pack). But I don't know how to reference main.js file to this HTML file. As you can see below there is no reference to main.js file inside this file.
How does web.pack combines these two files ? And is it possible to the same using express in NodeJS ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html,
body,
#map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
.arrow_box {
position: relative;
background: #000;
border: 1px solid #003c88;
}
.arrow_box:after,
.arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(0, 60, 136, 0);
border-top-color: #003c88;
border-width: 11px;
margin-left: -11px;
}
.arrow_box {
border-radius: 5px;
padding: 10px;
opacity: 0.8;
background-color: black;
color: white;
}
#popup-content {
max-height: 200px;
overflow: auto;
}
#popup-content th {
text-align: left;
width: 125px;
}
</style>
</head>
<body>
<div id="map-container"></div>
<div class="arrow_box" id="popup-container">
<div id="popup-content"></div>
</div>
</body>
</html>
main.js
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import Overlay from 'ol/Overlay';
import { Style, Fill, Stroke, Circle, Text } from 'ol/style';
import { fromLonLat } from 'ol/proj';
const map = new Map({
target: 'map-container',
view: new View({
center: fromLonLat([34.633623, 39.818770]),
zoom: 7
})
});
const layer = new VectorTileLayer({
source: new VectorTileSource({
attributions: [
'© OpenMapTiles',
'© OpenStreetMap contributors'
],
format: new MVT(),
url: `http://localhost:8090/maps/observation/{z}/{x}/{y}.vector.pbf`,
maxZoom: 24,
type: 'base'
})
});
const baseLayer = new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
}),
type: 'base'
});
map.addLayer(baseLayer);
const overlay = new Overlay({
element: document.getElementById('popup-container'),
positioning: 'bottom-center',
offset: [0, -10],
autoPan: true
});
map.addOverlay(overlay);
overlay.getElement().addEventListener('click', function () {
overlay.setPosition();
});
map.addLayer(layer);
layer.setStyle(function (feature, resolution) {
const properties = feature.getProperties();
if (properties.layer == 'temperature_stations' || properties.layer == 'temperature_stations_simple') {
const point = new Style({
image: new Circle({
radius: 5,
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'grey'
})
})
})
return point
}
if (properties.layer == 'aws_stations') {
const point = new Style({
image: new Circle({
radius: 5,
fill: new Fill({
color: 'blue'
}),
stroke: new Stroke({
color: 'grey'
})
})
})
return point
}
if (properties.layer == 'spa_stations') {
const point = new Style({
image: new Circle({
radius: 10,
fill: new Fill({
color: 'green'
}),
stroke: new Stroke({
color: 'grey'
})
})
})
return point
}
if (properties.layer == 'syn_stations') {
const point = new Style({
image: new Circle({
radius: 10,
fill: new Fill({
color: 'purple'
}),
stroke: new Stroke({
color: 'grey'
})
})
})
return point
}
});
map.on('pointermove', function (e) {
let markup = '';
map.forEachFeatureAtPixel(e.pixel, function (feature) {
markup += `${markup && '<hr>'}<table>`;
const properties = feature.getProperties();
for (const property in properties) {
markup += `<tr><th>${property}</th><td>${properties[property]}</td></tr>`;
}
markup += '</table>';
}, { hitTolerance: 0 });
if (markup) {
document.getElementById('popup-content').innerHTML = markup;
overlay.setPosition(e.coordinate);
} else {
overlay.setPosition();
}
});
The workshop uses the webpack dev server to serve the application for development. The last chapter explains how to build the application for production: https://openlayers.org/workshop/en/deploying/. The steps explained there explain how to use webpack to give you a static web application, You'll be using the resulting artifacts in your Express application as static files: https://expressjs.com/en/starter/static-files.html.
I have a React project in which part of the functionality involves sending a request to a Nodejs server that runs PhantomJS and the html-pdf plugin in order to create a pdf that gets build via a react component from my node server. The problem I'm having is actually embedding custom fonts into my react component. I have a base64 encoded font set that would be easier to include versus a bunch of files, but due to how React loads in CSS, I keep getting errors.
Here is the function that gets called to generate the PDF on my NodeJS server:
exports.order = (req, res, next) => {
phantom.create().then(function(ph) {
ph.createPage().then(function(page) {
// page.viewportSize = { width: 600, height: 600 };
page.open(`http://localhost:3005/print/work/${req.params.id}`).then(function(status) {
page.property('content').then(function(content) {
pdf.create(content, options).toBuffer(function(err, buffer){
res.writeHead(200, {
'Content-Type': 'application/pdf',
'Content-Disposition': `attachment; filename=order-${req.params.id}.pdf`,
'Content-Length': buffer.length
});
res.end(buffer);
});
page.close();
ph.exit();
});
});
});
});
}
Here's the actual React component that contains the HTML for the PDF:
var React = require('react');
var moment = require('moment');
class PrintWorkOrder extends React.Component {
render() {
var order = this.props;
var s = {
body: {
width: '100%',
float: 'none',
fontFamily: 'Helvetica',
color: '#000',
display: 'block',
fontSize: 10,
}
}
return (
<div style={s.body}>
I shortened the content in her for brevity
</div>
)
}
}
module.exports = PrintWorkOrder;
The functionality currently works, it's just now I need to add some custom fonts that aren't Helvetica and I'm having trouble solving that with this current implementation. Does anyone have any insight into this?
I also have the same issue, what I did is to encoded front into base64 and put it as
font.css
#font-face {
font-family: 'fontName';
src: url(data:application/x-font-woff;charset=utf-8;base64,<base64>) format('woff'),
font-weight: normal;
font-style: normal;
}
The trick is to read CSS file content and inject it into the DOM markup as style tag
React.createElement('style', { dangerouslySetInnerHTML: { __html: this.props.children } });
So to do it:
For the second line of code, what it does it to create style element. You could do is to write a component that read content from the .css file(s) and then put the content inside style element like this:
Style.js
var React = require('react');
export default class Style extends React.Component {
static propTypes = {
children: React.PropTypes.string.isRequired
};
render() {
return React.createElement('style', { dangerouslySetInnerHTML: { __html: this.props.children } });
}
}
Modify PrintWorkOrder.js
var React = require('react');
var moment = require('moment');
var fs = require('fs');
var path = require('path');
var Style = require('./Style');
const readFile = (filePath) => fs.readFileSync(path.resolve(__dirname, filePath)).toString();
class PrintWorkOrder extends React.Component {
constructor(props) {
super(props);
this.state = {
styles: []
}
}
componentWillMount() {
this.setState({
styles: [
readFile('font.css') // Assuming putting font.css same location with PrintWorkOrder component
]
})
}
render() {
var order = this.props;
var s = {
body: {
width: '100%',
float: 'none',
fontFamily: 'Helvetica',
color: '#000',
display: 'block',
fontSize: 10,
}
}
return (
<html>
<head>
{/* Here to render all the styles */}
{this.state.styles.map(s => (<Style>{s}</Style>))}
</head>
<body>
<div style={s.body}>
I shortened the content in her for brevity
</div>
</body>
</html>
);
}
}
module.exports = PrintWorkOrder;