<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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 камеры на сайт

Ответить

crack25 crack25 22.02.2017 21:20:20

А как сделать так, чтобы кто то другой видео это изображение? Я то себя вижу а как другие увидят?

Ответить

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