Merge pull request #16 from beatriceo/call-page
made edits to call page
This commit is contained in:
Beatrice Olivera
GitHub
commit
40c2b34ca3
|
|
@ -139,7 +139,9 @@ const createPC = (userId, isOffer) => {
|
||||||
element.id = `remoteVideoContainer+${userId}`; // why is the userId being interpolated?
|
element.id = `remoteVideoContainer+${userId}`; // why is the userId being interpolated?
|
||||||
element.autoplay = "autoplay";
|
element.autoplay = "autoplay";
|
||||||
element.srcObject = event.stream;
|
element.srcObject = event.stream;
|
||||||
|
element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||||
remoteVideoContainer.appendChild(element);
|
remoteVideoContainer.appendChild(element);
|
||||||
|
localVideo.classList.add("video-sm");
|
||||||
};
|
};
|
||||||
|
|
||||||
pc.oniceconnectionstatechange = event => {
|
pc.oniceconnectionstatechange = event => {
|
||||||
|
|
@ -194,153 +196,3 @@ const exchange = data => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const logError = error => console.warn("Whoops! Error:", error);
|
const logError = error => console.warn("Whoops! Error:", error);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Google Cloud Speech Playground with node.js and socket.io
|
|
||||||
// Created by Vinzenz Aubry for sansho 24.01.17
|
|
||||||
// Feel esee to improve!
|
|
||||||
// Contact: vinzenz@sansho.studio
|
|
||||||
|
|
||||||
const express = require('express'); // const bodyParser = require('body-parser'); // const path = require('path');
|
|
||||||
const fs = require('fs');
|
|
||||||
const environmentVars = require('dotenv').config();
|
|
||||||
|
|
||||||
// Google Cloud
|
|
||||||
const speech = require('@google-cloud/speech');
|
|
||||||
const speechClient = new speech.SpeechClient(); // Creates a client
|
|
||||||
|
|
||||||
const Translate = require('@google-cloud/translate');
|
|
||||||
const projectId = 'booming-banner-212315';
|
|
||||||
const translate = new Translate({
|
|
||||||
projectId: projectId,
|
|
||||||
});
|
|
||||||
const target = 'en';
|
|
||||||
|
|
||||||
|
|
||||||
const app = express();
|
|
||||||
const port = process.env.PORT || 1337;
|
|
||||||
const server = require('http').createServer(app);
|
|
||||||
|
|
||||||
const io = require('socket.io')(server);
|
|
||||||
|
|
||||||
app.use('/assets', express.static(__dirname + '/public'));
|
|
||||||
app.use('/session/assets', express.static(__dirname + '/public'));
|
|
||||||
app.set('view engine', 'ejs');
|
|
||||||
|
|
||||||
|
|
||||||
// =========================== ROUTERS ================================ //
|
|
||||||
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.render('index', {});
|
|
||||||
});
|
|
||||||
|
|
||||||
app.use('/', function (req, res, next) {
|
|
||||||
next(); // console.log(`Request Url: ${req.url}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// =========================== SOCKET.IO ================================ //
|
|
||||||
|
|
||||||
io.on('connection', function (client) {
|
|
||||||
console.log('Client Connected to server');
|
|
||||||
let recognizeStream = null;
|
|
||||||
|
|
||||||
client.on('join', function (data) {
|
|
||||||
client.emit('messages', 'Socket Connected to Server');
|
|
||||||
});
|
|
||||||
|
|
||||||
client.on('messages', function (data) {
|
|
||||||
client.emit('broad', data);
|
|
||||||
});
|
|
||||||
|
|
||||||
client.on('startGoogleCloudStream', function (data) {
|
|
||||||
startRecognitionStream(this, data);
|
|
||||||
});
|
|
||||||
|
|
||||||
client.on('endGoogleCloudStream', function (data) {
|
|
||||||
stopRecognitionStream();
|
|
||||||
});
|
|
||||||
|
|
||||||
client.on('binaryData', function (data) {
|
|
||||||
// console.log(data); //log binary data
|
|
||||||
if (recognizeStream !== null) {
|
|
||||||
recognizeStream.write(data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function startRecognitionStream(client, data) {
|
|
||||||
recognizeStream = speechClient.streamingRecognize(request)
|
|
||||||
.on('error', console.error)
|
|
||||||
.on('data', (data) => {
|
|
||||||
process.stdout.write(
|
|
||||||
(data.results[0] && data.results[0].alternatives[0])
|
|
||||||
? `Transcription: ${data.results[0].alternatives[0].transcript}\n`
|
|
||||||
: `\n\nReached transcription time limit, press Ctrl+C\n`);
|
|
||||||
client.emit('speechData', data);
|
|
||||||
|
|
||||||
if (data.results[0].alternatives[0] !== undefined) {
|
|
||||||
let text = data.results[0].alternatives[0].transcript
|
|
||||||
translate
|
|
||||||
.translate(text, target)
|
|
||||||
.then(results => {
|
|
||||||
const translation = results[0];
|
|
||||||
client.emit('translateData', translation)
|
|
||||||
|
|
||||||
console.log(`Text: ${text}`);
|
|
||||||
console.log(`Translation: ${translation}`);
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.error('ERROR:', err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// if end of utterance, let's restart stream
|
|
||||||
// this is a small hack. After 65 seconds of silence, the stream will still throw an error for speech length limit
|
|
||||||
if (data.results[0] && data.results[0].isFinal) {
|
|
||||||
stopRecognitionStream();
|
|
||||||
startRecognitionStream(client);
|
|
||||||
// console.log('restarted stream serverside');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRecognitionStream() {
|
|
||||||
if (recognizeStream) {
|
|
||||||
recognizeStream.end();
|
|
||||||
}
|
|
||||||
recognizeStream = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// =========================== GOOGLE CLOUD SETTINGS ================================ //
|
|
||||||
|
|
||||||
// The encoding of the audio file, e.g. 'LINEAR16'
|
|
||||||
// The sample rate of the audio file in hertz, e.g. 16000
|
|
||||||
// The BCP-47 language code to use, e.g. 'en-US'
|
|
||||||
const encoding = 'LINEAR16';
|
|
||||||
const sampleRateHertz = 16000;
|
|
||||||
const languageCode = 'fr-FR'; //en-US
|
|
||||||
|
|
||||||
const request = {
|
|
||||||
config: {
|
|
||||||
encoding: encoding,
|
|
||||||
sampleRateHertz: sampleRateHertz,
|
|
||||||
languageCode: languageCode,
|
|
||||||
profanityFilter: false,
|
|
||||||
enableWordTimeOffsets: true
|
|
||||||
},
|
|
||||||
interimResults: true // If you want interim results, set this to true
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// =========================== START SERVER ================================ //
|
|
||||||
|
|
||||||
server.listen(port, "127.0.0.1", function () { //http listen, to make socket work
|
|
||||||
// app.address = "127.0.0.1";
|
|
||||||
console.log('Server started on port:' + port)
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
contactsVideo = document.getElementById("contacts-video");
|
|
||||||
try {
|
|
||||||
const stream = await navigator.mediaDevices.getUserMedia({
|
|
||||||
audio: false,
|
|
||||||
video: true
|
|
||||||
})
|
|
||||||
|
|
||||||
localstream = stream;
|
|
||||||
contactsVideo.srcObject = stream
|
|
||||||
contactsVideo.muted = true
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
|
|
@ -61,7 +61,7 @@ a:hover {
|
||||||
|
|
||||||
.video-content {
|
.video-content {
|
||||||
height: 485px;
|
height: 485px;
|
||||||
// background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half {
|
.half {
|
||||||
|
|
@ -69,7 +69,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-color {
|
.text-color {
|
||||||
color: white;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contacts-container {
|
.contacts-container {
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,31 @@ video {
|
||||||
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
|
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
|
||||||
-moz-transform:rotateY(180deg); /* Firefox */
|
-moz-transform:rotateY(180deg); /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#remote-video-container {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#local-video {
|
||||||
|
width: 100vw;
|
||||||
|
transition: all 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#local-video.video-sm {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#video_overlays {
|
||||||
|
position: absolute;
|
||||||
|
float: left;
|
||||||
|
z-index: 300000;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-container {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,7 @@
|
||||||
<%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
|
<%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" || params["action"] == "call" %>
|
||||||
<%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" %>
|
|
||||||
<%= render 'shared/flashes' %>
|
<%= render 'shared/flashes' %>
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
<%= javascript_include_tag 'application' %>
|
<%= javascript_include_tag 'application' %>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,40 @@
|
||||||
<h1>Action Cable Signaling Server</h1>
|
|
||||||
|
|
||||||
<div>Random User ID:
|
|
||||||
<span id="current-user"><%= rand(0..10000) %></span>
|
<div class="call-container">
|
||||||
|
<div id="remote-video-container">
|
||||||
|
<div id="video_overlays">
|
||||||
|
<video id="local-video" autoplay></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="remote-video-container"></div>
|
|
||||||
<video id="local-video" autoplay></video>
|
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
<div>
|
||||||
|
<span class="text-color" style="display:none">Random User ID:</span>
|
||||||
|
<span id="current-user" class="text-color" style="display:none"><%= rand(0..10000) %></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button onclick="handleJoinSession()">
|
<button onclick="handleJoinSession()">
|
||||||
Join Room
|
Join Room
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="video-feed half">
|
<div class="video-feed half">
|
||||||
<div class="video-content">
|
<div class="video-content">
|
||||||
<video id="contacts-video" autoplay=""></video>
|
<!-- <video id="contacts-video" autoplay=""></video> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue