websocketで映像を送・受信するの作った。
古めのスマホがネットワークカメラになる。
iPhoneでは動作確認していない。
chromeにて動作確認
https://github.com/modeverv/SendAndReceiveVideoWithWebSocket
追記
ちょっと動かして見たけど充電が電力消費に追いつかぬ。24H/365運用は無理。
リクエストしたら静止画をとる感じに仕様変更すとか、それこそ本式のネットワークカメラ入れたほうが良さそう。
まぁ、簡単に実現できるよーということでこの投稿は終了。
追記2
24稼働いけました。0.5FPSという感じにしたらなんとか。
Alfredとかどうやってるんだろう。
Canvasの処理がくそ重いのがそのまま出てる感じなのでこの辺はアプリにしてどうにかしないとですね。
ともかく、いけました、24時間稼働！！。
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());
}
フロントの動画受信部
<!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>
バックエンド
/** 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);
フロントの動画送信部
<!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>
参考
というかほとんどそのままです。