Node JS (Socket.io + WebCam)

Вступление

Всем доброго времени суток! Хотелось бы поделиться с вами небольшим приложением для создания видео трансляции на NodeJS через socket.io

Создадим отдельную папку для приложения.

Файл Package.json :

{
  "name": "WebCam",
  "version": "0.0.1",
  "dependencies": {
    "express": "*",
    "log": "*",
    "socket.io": "*"
  }
}

Как вы уже наверняка заметили, всего используется 3 библиотеки: express, log и socket.io

Файл App.js :

// Подключение библиотек
var fs = require('fs');
var express = require("express");
var app = new express();
// Устанавливаем порт, по умолчанию 8888
var port = process.env.PORT || 8888;
// Проверка, используем ли мы HTTPS (SSL) , по умолчанию да
var ssl = (process.env.SSL == null || process.env.SSL != 0) ? 1:0;
if(ssl==1) {
	var https = require('https');
	var server = https.createServer(
{key: fs.readFileSync('/var/ssl/cert.key'),cert: fs.readFileSync('/var/ssl/cert.crt')}, app);
	console.log("Use SSL");
} else {
	var server = require('http').createServer(app);
console.log("Start http");
}
var io = require("socket.io")(server);

//io.set('origins', 'mdewo.com:'+port); // Доступ только через указанный домен
var Log = require("log"),
	log = new Log("debug");


app.use(express.static( __dirname + "/public" ));

app.get("/", function(req, res) {
	res.redirect("index.html");
});

server.listen(port, function() {
	log.info("запущен на %s порт", port);
});

io.on("connection", function(socket) {
	log.info("Новый клиент");
	// Вещаем видео всем клиентам
	socket.on("stream", function(img) {
		socket.broadcast.emit("stream", img);
	});
});

Теперь в каталоге /public который должен находится в папке с нашим приложением создадим Файл index.html :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>WebCam</title>
	<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<a onclick="view(); return false">Смотреть</a>
<a onclick="stream(); return false">Стримить</a>
	<div id="logger"></div>
	<video style="display: none;" id="video"> </video>
	<canvas id="prev"></canvas>

	<img id="img">

	<script>
	var socket = io();

	function logger(msg) {
		$("#logger").text(msg);
	}

	function stream() {
		var canv = document.getElementById("prev"),
		context = canv.getContext("2d"),
		video = document.getElementById("video"),
		freq = 10;

		canv.width = window.innerWidth ;//  800;
		canv.height = window.innerHeight;// 400;
		
		context.width = canv.width;
		context.height = canv.height;

		function loadCam(stream) {
			video.src = window.URL.createObjectURL(stream);
			logger("Camera loaded [OKAY]");
		}
		
		function loadFail(stream) {
			logger("Failed loading camera");
		}
		
		function viewVideo(video, context) {
			context.drawImage(video, 0, 0, context.width, context.height);
			socket.emit("stream", canv.toDataURL("image/webp"));
		}
		
		$(function() {
			navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;
			
			if(navigator.getUserMedia) {
				navigator.getUserMedia({video: true}, loadCam, loadFail);
			}
			setInterval(function() {
				viewVideo(video, context);
			}, freq*10);
		});
	}

	function view() {
		logger("Ждем стрим...");
		socket.on("stream", function (video) {
			var img = document.getElementById("img");
			img.src = video;
			logger("Стрим запущен");
		});
	}
	</script>
</body>
</html>

Так же можете уменьшить задержку.. тем самым увеличив частоту обновления картинки (в js var FREQ)
Теперь запустим приложение через SSH-> SSL=1 PORT=8888 node app.js
И переходим на сайт, к примеру https://mdewo.com:8888

Потом нажимаем Стримить и разрешаем доступ к камере. Открываем такую же страничку, но уже нажимаем Смотреть, вы должны увидеть ваше видео…

Браузер Chrome заботясь о вашей безопасности ~~ограничил~~ запретил доступ к камере сайтам у которых отсутствуем SSL сертификат! Поэтому в приложение добавлена поддержка SSL, но вы можете просто при запуске приложения указать SSL=0, тогда приложение запуститься по обычному протоколу http.

Вступление

Поделиться ссылкой:

Похожее