За последние 24 часа нас посетили 20195 программистов и 1084 робота. Сейчас ищут 846 программистов ...

Передача видео с WEB камеры на сервер

Тема в разделе "PHP для новичков", создана пользователем Искандер_20, 18 авг 2020.

  1. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Всем привет.
    нужна помощь
    нашел хорошую ссылку на получение картинки с WEB камеры и передачи ее на сервер:
    habr.com/ru/post/172419
    Но на том форуме мне запрещено задавать вопросы.
    Может на этом форуме мне помогут ? Если да - я задам вопрос
    Заранее спасибо
    С ув
    Александр:(
     
  2. mkramer

    mkramer Суперстар
    Команда форума Модератор

    С нами с:
    20 июн 2012
    Сообщения:
    8.548
    Симпатии:
    1.754
    Так ты пиши вопросы
     
  3. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    Да и хабр - далеко не форум
     
  4. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Спасибо
    Создал 2 файла video.html передача картинки и server_video.php - прием.
    В video.html вижу картинку с WEB камеры и идет передача.
    А server_video.php вроде принимает но не отображает картинку. Выскакивает ошибка :
    "Uncaught SyntaxError: Unexpected token '<'
    at m (jquery-3.3.1.min.js:2)
    at Function.globalEval (jquery-3.3.1.min.js:2)
    at text script (jquery-3.3.1.min.js:2)
    at Ut (jquery-3.3.1.min.js:2)
    at k (jquery-3.3.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)"
    Не хватает знаний разобраться.
    video.html:
    Код (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.  <meta charset="UTF-8">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <script type="text/javascript" src="jQuery/jquery-3.3.1.min.js"></script>
    8.  <title>Document</title>
    9. </head>
    10. <body>
    11.  <video autoplay id="vid" style="display:none;"></video>
    12.  <canvas id="canvas" width="640" height="480" style="border:5px solid #240655;"></canvas><br>
    13.  <button onclick="startBroadcasting()">Передача видео</button>
    14.  <button onclick="stopBroadcasting()">Стоп передачи видео</button>
    15.  <script>
    16.  var video = document.querySelector("#vid"),
    17.  canvas = document.querySelector('#canvas'),
    18.  ctx = canvas.getContext('2d'),
    19.  localMediaStream = null,
    20.  onCameraFail = function(e) {
    21.  console.log('Camera did not work.', e); // Исключение на случай, если камера не работает
    22.  };
    23.  navigator.getUserMedia =( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    24.  window.URL = window.URL || window.webkitURL;
    25.  navigator.getUserMedia({
    26.  // navigator.mediaDevices.getUserMedia({
    27.  video: true
    28.  }, function(stream) {
    29.  // video.src = window.URL.createObjectURL(stream);
    30.  video.srcObject = stream;
    31.  localMediaStream = stream;
    32.  }, onCameraFail);
    33.  cameraInterval = setInterval(function() {
    34.  snapshot();
    35.  }, 1);
    36.  
    37.  function snapshot() {
    38.  if (localMediaStream) {
    39.  ctx.drawImage(video, 0, 0);
    40.  }
    41.  }
    42.  // ******************************отправка на СЕРВЕР
    43.  var isBroadcasting = false,
    44.  broadcastingTimer;
    45.  
    46.  function sendSnapshot() {
    47.  var quality = 0.4;
    48.  if (localMediaStream && !isBroadcasting) {
    49.  isBroadcasting = true;
    50.  // console.log("555")
    51.  // var dataURL = canvas.toDataURL();
    52.  // console.log(dataURL);
    53.  $.post("Server_Video.php", {
    54.  p: "new",
    55.  text: ctx.canvas.toDataURL("image/webp", quality) // quality - качество изображения(float)
    56.  },
    57.  function(result) {
    58.  console.log(result); // На случай, если что-то пойдёт не так
    59.  isBroadcasting = false;
    60.  }
    61.  );
    62.  }
    63.  }
    64.  function startBroadcasting() {
    65.  broadcastingTimer = setInterval(sendSnapshot, 1);
    66.  }
    67.  function stopBroadcasting() {
    68.  clearInterval(broadcastingTimer);
    69.  }
    70.  </script>
    71. </body>
    72. </html>
    Server_Video.php:
    Код (Text):
    1.  
    2. <?php
    3.  if(isset($_POST['p'])&&($_POST['p']=="ajax")){
    4.  Header("Cache-Control: no-cache, must-revalidate");
    5.  Header("Pragma: no-cache");
    6.  Header("Content-Type: text/javascript; charset=windows-1251");
    7.  $file = file("monitor_id.txt");
    8.  $id = $file[0];
    9.  if($id > $_GET['last']){
    10.  $text_file = file("monitor_command.txt");
    11.  $count = count($text_file);
    12.  $last = $id;
    13.  echo "var main = $('#main'); \n";
    14.  for($i = 0; $i < 1; $i++){
    15.  $s = $text_file[$i];
    16.  while(strpos($s, chr(92)) !== false){
    17.  $s = str_replace(chr(92), "", $s);
    18.  }
    19.  echo $s;
    20.  }
    21.  echo "\n";
    22.  echo "last_message_id = $id;";
    23.  }
    24.  }
    25.  elseif((isset($_POST['p']) && $_POST['p'] == "new") || (isset($_POST['p']))){ // Получение картинки
    26.  $file = file("monitor_id.txt");
    27.  $id = $file[0];
    28.  $fh = fopen("monitor_command.txt", "w+");
    29.  $get_text = $_POST['text'];
    30.  $gt = $get_text;
    31.  while(strpos($get_text, "\r\n") !== false){
    32.  $get_text = str_replace("\r\n", "<br>", $get_text);
    33.  }
    34. fwrite($fh, "document.body.innerHTML = ('<img src=".'"'.".$get_text".'"'."/>);\n");
    35. fclose($fh);
    36.  $fhn = fopen("monitor_id.txt", "w+");
    37.  fwrite($fhn, $id + 1);
    38.  fclose($fhn);
    39.  echo $get_text;
    40.  }
    41. ?>
    42. <script>
    43. var last_message_id = 0,
    44.  load_in_process = false;
    45. function Load() {
    46.  if(!load_in_process)
    47.  {
    48.  load_in_process = true;
    49.  $.post("server_video.php",
    50.  {
    51.  p: "ajax",
    52.  last: last_message_id,
    53. // version: version
    54.  },
    55.  function (result) {
    56.  eval(result);
    57.  load_in_process = false;
    58.  }
    59.  );
    60.  }
    61. }
    62. var loadInterval = setInterval(Load, 100);
    63. </script>
    64. <script type="text/javascript" src="jQuery/jquery-3.3.1.min.js"></script>
    С ув
    Александр
     
  5. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    ну серверная часть и не должна ничего отображать
    а в целом при формировании там js кода - где-то косяк с тегами < ... че-нить не закрыто или не заэкранировано
     
  6. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Спасибо
    проверю JS код
     
  7. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Вопрос к профи
    Никак не могу врубиться
    video.html отображает информацию с web камеры и передает ее на Server_video.php
    почему я не могу открыть страничку Server_video.php через браузер и посмотреть полученную картинку
    пока эта страничка пустая
    Спасибо
     
  8. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    Ну не должен потому что...
    Вообще весь подход довольно странный...

    Если внимательно посмотрите оригинал статьи, там серверный скрипт вызывается в клиентском html браузере по таймеру... Ибо это скрипт php генерирует js
     
  9. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Спасибо
    Заработало.
    Но есть несколько проблем. Одна из них
    Клиентский JS код работает:
    Код (Text):
    1.  
    2.  <p id="p1"></p>
    3.  <img id="image" />
    4.  <script>
    5.  i = 0;
    6.  var last_message_id = 0,
    7.  load_in_process = false;
    8.  function Load() {
    9.  i++;
    10.  if (!load_in_process) {
    11.  load_in_process = true;
    12.  $.post("Video/Server_Video1.php", {
    13.  p: "ajax",
    14.  last: last_message_id
    15.  },
    16.  function(result) {
    17.  // console.log(result);
    18.  load_in_process = false;
    19.  document.getElementById("countframe").innerText = i;
    20.  $("#p1").html("<img src=" + result + " />");
    21.  });
    22.  }
    23.  }
    24.  
    25.  var loadInterval = setInterval(Load, 300);
    26.  </script>
    27.  <p id="countframe"></p>
    28.  <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
    29.  width="16" height="14" alt="внедренная иконка папки" />
    Проблема в следующем.
    JS код получает картинку 3 раза /сек
    Но сама картинка "id=p1" меняется с большой задержкой: раз в 5- 7 секунд
    Не могу понять в чем дело
    С ув
    Александр
     
  10. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    Получайте раз в 5 сек, в чем проблема? В таймере на js укажите период в 5 сек
     
  11. Искандер_20

    Искандер_20 Новичок

    С нами с:
    2 июл 2020
    Сообщения:
    10
    Симпатии:
    0
    Привет
    Я получаю картинку 5 раз в секунду и я хочу , чтоб видеть все эти картинки (живое видео).
    А сейчас почему то 20-30 картинок не отображается, хотя в CONSOLE я их вижу, а отображается только каждая 20 или 30.
    У меня такое впечатление, что браузер, чем то занят и не успевает отрисовывать каждую картинку .