Тема: Трансляція вебки (HTML5,JS,PHP)
Раніше вже створював тему, де тестував цей метод створення трансляції зображення з вебкамери.
Скажу відразу, спосіб досить примітивний, це не потоковий стрім,а оновлення зображення кожних N сек. По суті, найпростіші вебки і працюють по такому принципу. Думаю поділюсь з вами, може комусь знадобиться..
Використано: HTML5 (Video, Canvas) , JavaScript (API, AJAX), PHP 5.4 (і не нижче)
Потрібен хороший хостинг,сервер.
Детальніше..
За допомогою JS API ми підключаємось до своєї веб камери, яка транслює зображення в тег video.
Далі створюємо AJAX запит до серверу та ставимо його на інтервал N сек.
На сервері сторюємо png зображення,яке буде оновлюватись кожним AJAX запитом.
Для того, щоб оновлювати зображення,нам потрібно брати кадр зі своєї веб-камери,це виконує HTML5 Canvas, за допомогою якого, зображення зберігається та кодується в рядок base64.
Через AJAX POST запит вже передаємо закодований base 64 рядок з заголовком типу контенту application/x-www-form-urlencoded.
Закодоване зображення відправляється на сервер, де через PHP розшифровуємо вміст POST запиту та записуємо його в .png файл зображення.
А оновлення (перегляд) зображення відбувається також по інтервалу N сек..
Встановлення: розпакувати в корінь та перейтив /webcam/, вибрати веб-камеру, а потім в /stream/,де і буде оновлюватись зображення.
Звичайно вже є WebRTC, але поки що не розібрався як можна (і чи можна взагалі) транслювати так, оскільки це p2p.
Архів буде нижче (після коду)..
Зчитування і відправка зображення
<!doctype html>
<html lang="ua">
<head>
<meta charset="UTF-8">
<title>Трансляція вашої веб камери</title>
<link rel="stylesheet" href="../design/style.css">
</head>
<body>
<div class="booth">
<video id="video" width="350" height="250" controls="controls" autoplay="autoplay">Ваш браузер не підтримує HTML5 Video</video>
<canvas id="canvas" width="350" height="250" style="display:none;">Ваш браузер не підримує HTML5 Canvas</canvas>
</div>
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream) {
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(error) {
alert('Помилка. У вас не підключена веб камера!');
});
var context = canvas.getContext('2d');
setInterval(function() {
context.drawImage(video, 0, 0, 350, 250);
var stream = new XMLHttpRequest();
stream.open("POST", '../stream/update.php', true);
stream.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
stream.send("img="+canvas.toDataURL('image/png'));
}, 500);
</script>
</body>
</html>Оновлення зображення на сервері
<?php
file_put_contents('png.png', base64_decode(str_replace(' ', '+', explode(',', $_POST['img'])[1])));Оновлення зображення в браузері
<html>
<head>
<title>Веб камера в мережі</title>
<script>
function stream() {
var stream = document.getElementById("stream");
setInterval(function() {
stream.src="png.png?load="+Math.random()+"&nocache="+Math.random();
}, 500);
}
</script>
</head>
<body onload="stream();">
<img src="png.png?nocache=1" id="stream">
</body>
</html>Архів...
