Несколько прямых трансляций на одной веб-странице - PullRequest
Новая
       15

Несколько прямых трансляций на одной веб-странице

0 голосов
/ 01 марта 2020

Здравствуйте, я пытаюсь создать веб-приложение, в котором я и три друга могли бы передавать потоковое видео с наших веб-камер на страницу HTML, а затем я сделаю наложение для статистики, деталей, итогов жизни и т. Д. Я чувствую, что могу понять часть наложения, но я не уверен, как получить несколько входов веб-камеры на мою страницу.

Я следовал этому уроку https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm, чтобы сделать javascript тег, чтобы заставить мою собственную веб-камеру вставлять на страницу, но я не уверен, как заставить другого пользователя вставлять. Кроме того, я использую Spring в качестве моего бэкэнда

Спасибо за любую помощь!

Вот код, который у меня есть

Голова 


    <style>
      #container {
          margin: 0px auto;
          width: 500px;
          height: 375px;
          border: 10px #333 solid;
        }
        #videoElement {
          width: 500px;
          height: 375px;
          background-color: #666;
        }
    </style>

Тело 


    <div id="container2">
        <video autoplay="true" id="videoElement2">

        </video>
    </div>
    <script>
    var video = document.querySelector("#videoElement");

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
    }
    </script>

1 Ответ

0 голосов
/ 01 марта 2020

Я тоже работаю над некоторыми подобными вещами.

Ниже приведен файл html со встроенным javascript. Просто попробуйте добавить некоторые элементы и изменить имя ID и попробуйте сделать то же самое снова. Я надеюсь, что это поможет вам. Если нет, мы можем обсудить это. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Camera API</title>
    <!-- <link rel="stylesheet" href="base.css" type="text/css" 
  media="screen" /> -->
  </head>
  <body>
    <video id="player" controls autoplay></video>
    <button id="capture">Capture</button>
    <canvas id="canvas" width="320" height="240"></canvas>
    <h1>HELLO</h1>
    <p></p>
    <script>
      const player = document.getElementById("player");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const captureButton = document.getElementById("capture");

      const constraints = {
        video: true
      };

      captureButton.addEventListener("click", () => {
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
        const dataURI = canvas.toDataURL("image/jpeg", 0.5);

        let str = dataURI.slice(23);
        // alert(str);
        console.log(str);

        document.querySelector("h1").innerHTML=(str);
      });

      // Attach the video stream to the video element and autoplay.
      navigator.mediaDevices.getUserMedia(constraints).then(stream => 
      {
        player.srcObject = stream;
      });
    </script>
  </body>
</html>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Camera API</title>
    <!-- <link rel="stylesheet" href="base.css" type="text/css" 
    media="screen" /> -->
  </head>
  <body>
    <video id="player" controls autoplay></video>
    <button id="capture">Capture</button>
    <canvas id="canvas" width="320" height="240"></canvas>
    <h1>HELLO1</h1>
    <p></p>
     <video id="player1" controls autoplay></video>
    <button id="capture1">Capture</button>
    <canvas id="canvas1" width="320" height="240"></canvas>
    <h1>HELLO2</h1>
    <p></p>
     <video id="player2" controls autoplay></video>
    <button id="capture2">Capture</button>
    <canvas id="canvas2" width="320" height="240"></canvas>
    <h1>HELLO3</h1>
    <p></p>
    
    <script>
      // For first window of the stream
      const player = document.getElementById("player");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const captureButton = document.getElementById("capture");

      const constraints = {
        video: true
      };

      captureButton.addEventListener("click", () => {
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
        const dataURI = canvas.toDataURL("image/jpeg", 0.5);

        let str = dataURI.slice(23);
        // alert(str);
        console.log(str);
        
        document.querySelector("h1").innerHTML=(str);
      });

      // Attach the video stream to the video element and autoplay.
      navigator.mediaDevices.getUserMedia(constraints).then(stream => 
      {
        player.srcObject = stream;
      });
      
      const player1 = document.getElementById("player1");
      const canvas1 = document.getElementById("canvas1");
      const context1 = canvas.getContext("2d");
      const captureButton2 = document.getElementById("capture1");
      

      captureButton2.addEventListener("click", () => {
        // Draw the video frame to the canvas.
        context1.drawImage(player1, 2, 2, canvas.width, 
        canvas.height);
        const dataURI2 = canvas.toDataURL("image/jpeg", 0.5);
          
         alert(dataURI2);
        
      });

      // Attach the video stream to the video element and autoplay.
      navigator.mediaDevices.getUserMedia(constraints).then(stream => 
      {
        player1.srcObject = stream;
      });
      
    </script>
  </body>
</html>
...