Skip to content

Instantly share code, notes, and snippets.

@modeverv

modeverv/file0.html

Last active September 16, 2018 16:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save modeverv/b8be8094559b2a8dfdc3c60322e6b33f to your computer and use it in GitHub Desktop.
Save modeverv/b8be8094559b2a8dfdc3c60322e6b33f to your computer and use it in GitHub Desktop.
Download ZIP
websocketで映像を送受信するのでっち上げた=>スマホの電源の関係か24/365運用は無理=>0.5FPSにしたら24時間稼働OK ref: https://qiita.com/modeverv@github/items/17c5f27cd8f5110337a6
Raw
file0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Receive Video</title>
</head>
<body>
<video id="video" autoplay="1" width="300px"></video>
<canvas id="canvas" width="160" height="120"></canvas>
<img id="img" width="160px">
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById("video");
const img = document.getElementById("img");
var constraints = {
audio: false,
video: {
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
alert(err.name + ": " + err.message);
});
video.addEventListener("timeupdate", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
socket.emit("video", canvas.toDataURL());
});
socket.on("video", (dat) => {
img.src = dat;
});
</script>
</body>
</html>
Raw
file0.txt
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
setInterval(update, 2000);
})
.catch(function (err) {
alert(err.name + ": " + err.message);
});
//負荷を下げる目的で2秒ごとに
const update = () => {
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
socket.emit("video", canvas.toDataURL());
}
Raw
file1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Receive Video</title>
</head>
<body>
<video id="video" autoplay="1" width="300px"></video>
<canvas id="canvas" width="160" height="120"></canvas>
<img id="img" width="160px">
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById("video");
const img = document.getElementById("img");
var constraints = {
audio: false,
video: {
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
alert(err.name + ": " + err.message);
});
video.addEventListener("timeupdate", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
socket.emit("video", canvas.toDataURL());
});
socket.on("video", (dat) => {
img.src = dat;
});
</script>
</body>
</html>
Raw
file1.txt
/** config */
var PORT = 8998;
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/send', (req, res) => {
res.sendFile(__dirname + '/send.html');
});
io.on('connection', (socket) => {
socket.on('video', (msg) => {
socket.broadcast.emit('video', msg);
});
});
server.on('listening', () => {
console.log('listening on ' + PORT);
})
server.listen(PORT);
Raw
file2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Send Video</title>
</head>
<body>
<video id="video" autoplay="1" width="300px"></video>
<canvas id="canvas" width="160" height="120"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
const video = document.getElementById("video");
var constraints = {
audio: false,
video: {
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
alert(err.name + ": " + err.message);
});
video.addEventListener("timeupdate", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
socket.emit("video", canvas.toDataURL());
});
</script>
</body>
</html>
Raw
file2.txt
/** config */
var PORT = 8998;
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/send', (req, res) => {
res.sendFile(__dirname + '/send.html');
});
io.on('connection', (socket) => {
socket.on('video', (msg) => {
socket.broadcast.emit('video', msg);
});
});
server.on('listening', () => {
console.log('listening on ' + PORT);
})
server.listen(PORT);
Raw
file3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Send Video</title>
</head>
<body>
<video id="video" autoplay="1" width="300px"></video>
<canvas id="canvas" width="160" height="120"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
const video = document.getElementById("video");
var constraints = {
audio: false,
video: {
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
alert(err.name + ": " + err.message);
});
video.addEventListener("timeupdate", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
socket.emit("video", canvas.toDataURL());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment