####Intro
For my final project I’m exploring real-time video assistance over the browser. I have been impressed by Amazon MayDay (discontinued after lanuch since 2013) and its ability to connect you with a human-agent in less than 10 seconds over video. What’s also interesting is that it’s live-support that you don’t pay for in your hands for personal support.
Use-cases
I don’t have a specific usecase for my crowdsourced video stream model yet. MayDay had all sorts of requests including these,
- After being stuck on a specific Angry Birds level for a week, a Tech Advisor helped a customer beat the level.
- A group of friends asked how to make a perfect peanut butter and jelly sandwich to prove whose approach was best.
- A Tech Advisor sang happy birthday to someone as they were receiving a Fire HDX from their boyfriend.
- Customers have asked Tech Advisors to draw all sorts of things on customers’ screens, including happy faces, rainbows, unicorns, fire-breathing dragons, and aliens.
- Mayday Tech Advisors also get their fair share of date requests and marriage proposals, but beyond that, they’ve been called everything from helpful, patient, sweet, wonderful, and courteous to beautiful, polite, and the “BEST EVER.”
Source: http://www.businessinsider.com/amazons-mayday-button-hilarious-uses-2014-6
Features
I’m aiming to build a basic infrastructure of video broadcast that takes in “tasks” (instructions) for somebody at the other end to do something. Get it running on a custom server and have people have chat (maybe).
One of the coolest features of MayDay was its screensharing capability:
Code
Things I’ve tried include getting the video to work on a handlebar template. Then with the help of sockets broadcasting it out to different clients. Then I wanted to put it in as a chrome extension so theoretically tasks which don’t require an active browser tab can be done (monitoring babies pets remotely while reading the news).
The code is a bit all over the place at the moment, I was hoping to have a working prototype in the first week so I could try out usecases and build a more polished final product.
//popup.html
<html>
<head>
<style>
body {
font-size: 30px;
background: yellow;
width: 300px;
height: 300px
}
</style>
<!-- <script src="jquery.js"></script> -->
<script src="p5.js" type="text/javascript"></script>
<script src="my-js.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<script src="p5.dom.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<body>
<div id="status"></div>
<div id="thevideo" width="100" height="100"></videos>
</body>
</head>
</html>//my-js.js
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
socket.on('image', function (data) {
console.log("Got image");
document.getElementById('imagefile').src = data;
});
var initWebRTC = function() {
// These help with cross-browser functionality
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// The video element on the page to display the webcam
var video = document.getElementById('thevideo');
// if we have the method
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream) || stream;
video.play();
}, function(error) {alert("Failure " + error.code);});
}
var thecanvas = document.getElementById('thecanvas');
var thecontext = thecanvas.getContext('2d');
var draw = function() {
thecontext.drawImage(video,0,0,video.width,video.height);
var dataUrl = thecanvas.toDataURL('image/webp', 1);
document.getElementById('imagefile').src = dataUrl;
socket.emit('image', dataUrl);
setTimeout(draw,3000);
};
draw();
};//Node
var https = require('https');
var fs = require('fs'); // Using the filesystem module
var url = require('url');
var socket = require('socket.io');
var options = {
key: fs.readFileSync('my-key.pem'),
cert: fs.readFileSync('my-cert.pem')
};
function handleIt(req, res) {
var parsedUrl = url.parse(req.url);
var path = parsedUrl.pathname;
if (path == "/") {
path = "index.html";
}
fs.readFile(__dirname + path,
// Callback function for reading
function (err, fileContents) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading ' + req.url);
}
// Otherwise, send the data, the contents of the file
res.writeHead(200);
res.end(fileContents);
}
);
// Send a log message to the console
console.log("Got a request " + req.url);
}
var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
console.log("We have a new client: " + socket.id);
// When this user "send" from clientside javascript, we get a "message"
// client side: socket.send("the message"); or socket.emit('message', "the message");
socket.on('message',
// Run this function when a message is sent
function (data) {
console.log("message: " + data);
// Call "broadcast" to send it to all clients (except sender), this is equal to
// socket.broadcast.emit('message', data);
socket.broadcast.send(data);
// To all clients, on io.sockets instead
// io.sockets.emit('message', "this goes to everyone");
}
);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('otherevent', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'otherevent' " + data);
});
socket.on('disconnect', function() {
console.log("Client has disconnected");
});
}
);
var httpServer = https.createServer(options, handleIt);
httpServer.listen(8080, function(){
console.log("8080! listen up!");
});