diff --git a/app/assets/javascripts/signaling-server.js b/app/assets/javascripts/signaling-server.js index 0a674b9..b77bc6e 100644 --- a/app/assets/javascripts/signaling-server.js +++ b/app/assets/javascripts/signaling-server.js @@ -139,7 +139,9 @@ const createPC = (userId, isOffer) => { element.id = `remoteVideoContainer+${userId}`; // why is the userId being interpolated? element.autoplay = "autoplay"; element.srcObject = event.stream; + element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); remoteVideoContainer.appendChild(element); + localVideo.classList.add("video-sm"); }; pc.oniceconnectionstatechange = event => { @@ -194,153 +196,3 @@ const exchange = data => { }; 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) -}); - diff --git a/app/assets/javascripts/test.js b/app/assets/javascripts/test.js deleted file mode 100644 index 61fd389..0000000 --- a/app/assets/javascripts/test.js +++ /dev/null @@ -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); -} diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss index d5075eb..cb071eb 100644 --- a/app/assets/stylesheets/pages/_contacts.scss +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -61,7 +61,7 @@ a:hover { .video-content { height: 485px; - // background-color: black; + background-color: black; } .half { @@ -69,7 +69,7 @@ a:hover { } .text-color { - color: white; + color: white !important; } .contacts-container { diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss index c569eb8..740097b 100755 --- a/app/assets/stylesheets/pages/_home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -4,3 +4,31 @@ video { -webkit-transform:rotateY(180deg); /* Safari and Chrome */ -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; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 93d7b8c..7118264 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,8 +10,7 @@ <%#= stylesheet_pack_tag 'application', media: 'all' %> - - <%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" %> + <%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" || params["action"] == "call" %> <%= render 'shared/flashes' %> <%= yield %> <%= javascript_include_tag 'application' %> diff --git a/app/views/pages/call.html.erb b/app/views/pages/call.html.erb index b3f9343..700efaa 100644 --- a/app/views/pages/call.html.erb +++ b/app/views/pages/call.html.erb @@ -1,13 +1,40 @@ -

Action Cable Signaling Server

-
Random User ID: - <%= rand(0..10000) %> + +
+
+
+ +
+
-
- + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
- +