Last active
September 16, 2018 16:00
-
-
Save modeverv/b8be8094559b2a8dfdc3c60322e6b33f to your computer and use it in GitHub Desktop.
websocketで映像を送受信するのでっち上げた=>スマホの電源の関係か24/365運用は無理=>0.5FPSにしたら24時間稼働OK ref: https://qiita.com/modeverv@github/items/17c5f27cd8f5110337a6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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