Отображение видео с использованием WebRTC в javascript

В настоящее время я изучаю, как использовать WebRTC в javascript.
Вот коды, которые я написал:

main.html

<!DOCTYPE html>
<header>
  <title>video and audio</title>
  <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
      height: 100%;
      margin: 0;
    }

    #video {
      height: 50%;
      width: 50%;
      border: 1px solid black;
    }
    #audio {
      height: 50%;
      width: 50%;
      border: 1px solid black;
    }
  </style>
</header>
<body>
  <div id = "video"></div>
  <div id = "audio"></div>
</body>
<script src = "WebRTC.js" type = "text/javascript"></script>
</html>

WebRTC.js

const constraints = {audio: true, video: {width: 1280, height: 70}}

navigator.mediaDevices.getUserMedia(constraints)
.then (
  (mediaStream) => {
    console.info('success')
    const video = document.querySelector('#video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = () => {video.play();}
  })
.catch (
  console.info('unsuccessful')
)

Когда я открываю его, он запрашивает у меня разрешение на доступ к моей камере, и консоль возвращает «успешно». Так что я думаю, что код работает нормально Однако видео не отображается на <div id = "video">. Я искал решение, но пока ничего не придумал. Я был бы признателен, если бы вы могли помочь мне найти то, что мне здесь не хватает. Большое спасибо.

Это может иметь значение или не иметь значения, но включаете ли вы WebRTC.js в свой HTML-файл?

Lakshya Raj 20.11.2022 17:08

Вам не нужна библиотека для использования webrtc, @LakshyaRaj. ОП, вы пробовали использовать реальный элемент видео, а не просто div? developer.mozilla.org/en-US/docs/Web/HTML/Element/video

jmargolisvt 20.11.2022 17:08

просто играйте после прикрепления медиа-ссылки. это должно работать. Также вам следует использовать библиотеку адаптеров для реализации webrtc, которая полезна для решения проблем, связанных с разными браузерами.

innocent 20.11.2022 17:09

@jmargolisvt я не это имел в виду. В OP есть два файла: main.html и WebRTC.js. main.html включает main.js, но в вопросе нет ссылки на файл WebRTC.js. Тем не менее, я согласен с вашим вторым замечанием об использовании тега видео.

Lakshya Raj 20.11.2022 17:13

@LakshyaRaj Теперь я вижу. Сорри, мой плохой! :)

jmargolisvt 20.11.2022 17:14

@LakshyaRaj «WebRTC.js» на самом деле является «main.js». Я ошибся при размещении вопроса. Я отредактировал вопрос, чтобы предотвратить дальнейшую путаницу. Извини:(

gtj520 20.11.2022 17:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
58
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Это не работает, потому что вы используете тег div вместо тега video.

Просто используйте тег видео ниже.

<video id = "video"></video>

Чтобы иметь возможность воспроизводить видео на своей странице, вам нужно использовать тег <video /> вместо простого <div />. Так что вам просто нужно изменить

<div id = "video"></div>
<div id = "audio"></div>

с

<video autoplay = "true"></video>

Ваш окончательный код будет таким:

const constraints = {
  audio: true,
  video: {
    width: 1280,
    height: 70
  }
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(
    (mediaStream) => {
      console.info('success')
      const video = document.querySelector('video');
      video.srcObject = mediaStream;
      video.onloadedmetadata = () => {
        video.play();
      }
    })
  .catch(
    console.info('unsuccessful')
  )
html {
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

video {
  height: 50%;
  width: 50%;
  border: 1px solid black;
}
<video autoplay = "true"></video>

Кодепен: https://codepen.io/SMAKSS/pen/RwJxjpb

Эта ошибка возникает из-за <div>, если вы хотите отобразить экран, вам нужно использовать тег <video>.

<div id = "video-div">
      <video id = "video" controls = "true" autoplay = "true"></video> 
</div>

Другие вопросы по теме