1 Востаннє редагувалося VTrim (06.07.2015 19:00:24)

Тема: Трансляція вебки (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>

Архів...

=)

2 Востаннє редагувалося VTrim (06.07.2015 19:07:58)

Re: Трансляція вебки (HTML5,JS,PHP)

Щось файл не добавляється..
Ось..

Post's attachments

webcam (1).zip 2.14 kb, 144 downloads since 2015-07-06 

=)

3 Востаннє редагувалося mike (09.07.2015 18:17:29)

Re: Трансляція вебки (HTML5,JS,PHP)

Цікаве рішення.

Я вот недавно зробив трохи навпаки. Вебка підключена до сервака і при відкритті сторінки, показується зображення з вебки. Все висить на ubuntu і motion. Що і як підключати не буду розказувати, бо це легко гуглиться. В цьому випадку ніякого js і оновлення картінки через N секунд не потрібно тому що cервак віддає картінку у форматі mjpeg, який бравзер зданий сам оновляти. Тобто на сторінці присутній тільки img:

<img data-name="live-section" src="http://192.168.0.111/live" alt="прямий ефір">
(function(){
  console.log("called anonymously");
})()