<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать онлайн-трансляцию вашей веб-камеры на чистом JavaScript.

Как сделать онлайн-трансляцию вашей веб-камеры на чистом JavaScript.

Всем привет! Сегодня я расскажу, как сделать онлайн-трансляцию вашей веб-камеры на чистом JavaScript.

Итак, для начала создадим структуру.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Online streaming your WebCam</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="booth">
   <video id="video" width="400" height="300" autoplay></video>
  </div>
  <script src="video.js"></script>
</body>
</html>

Думаю, что со структурой вопросов быть не должно, заметьте, что мы подключаем файл стилей и файл javascript.

Теперь перейдем к css.

.booth {
  width: 400px;
  background: #ccc;
  border: 10px solid #ddd;
  margin: 0 auto;
}

И, конечно, самое главное - javascript.

(function() {
  var video = document.getElementById('video'),
   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('Ошибка! Что-то пошло не так, попробуйте позже.');
  });
})();

Как видите, все очень просто. Сначала мы проверяем, какой браузер, затем создаем нужный объект, передаем параметры и в конце закидываем видео в наш блок.

Итак, сегодня вы узнали, как сделать онлайн-трансляцию вашей веб-камеры на javascript. Спасибо за внимание! :)

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (8):

Samy Samy 28.09.2014 01:26:55

Михаил помогите понять Чайнеку:) тоесть подобным образом можно сделать что то вроде видео чата?!

Ответить

php_programmer php_programmer 28.09.2014 13:00:29

Скопируйте код, как сказано в статье, и посмотрите, что будет. Таким образом вы сможете сделать трансляцию видео с вашей веб-камеры на страницу вашего сайта. Видео чат по одной лишь этой статье вы не сделаете, но, как сделать вывод того, что снимает веб-камера, на странице сайта, вы уже знаете. Где это можно использовать? Ну, к примеру, можно сделать при регистрации пользователя такую функцию: он может либо выбрать фотографию с компьютера, к примеру, для своего профиля(аватарку) или может сделать ее, используя веб-камеру, и вот тут уже поможет эта статья.

Ответить

Samy Samy 29.09.2014 01:26:11

Ну я и не настаивал что из этого можно сделать видео-чат ,которвй я делать не собираюсь, но что это может быть прологом его это интересно и только на javascript делает его ещё интересней!!!

Ответить

php_programmer php_programmer 29.09.2014 22:08:20

Так точно! Впереди будет еще много интересного про JavaScript, не переключайтесь!

Ответить

Razmik Razmik 30.09.2014 16:27:35

Здравствуйте, я сделал все, как надо, но почему то не выводит изображение на экран, так же нет запроса на использование веб-камеры => она не включается

Ответить

air_han-89 air_han-89 19.02.2016 07:07:29

Добрый день! У меня аналогично. Не отображается изображение. Даже черного окна нет. ((

Ответить

mininvit mininvit 17.05.2015 16:31:36

А как записывать эту трансляцию на компьютер? Или как сделать, чтобы эту трансляцию видели на сайте все онлайн-пользователи во время эфира?

Ответить

a090588 a090588 10.06.2015 10:40:14

А как вывести видео с ip камеры на сайт

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.