Как сделать онлайн-трансляцию вашей веб-камеры на чистом 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. Спасибо за внимание! :)
-
Создано 26.09.2014 20:32:25
-
Михаил Русаков
Комментарии (9):
Михаил помогите понять Чайнеку:) тоесть подобным образом можно сделать что то вроде видео чата?!
Ответить
Скопируйте код, как сказано в статье, и посмотрите, что будет. Таким образом вы сможете сделать трансляцию видео с вашей веб-камеры на страницу вашего сайта. Видео чат по одной лишь этой статье вы не сделаете, но, как сделать вывод того, что снимает веб-камера, на странице сайта, вы уже знаете. Где это можно использовать? Ну, к примеру, можно сделать при регистрации пользователя такую функцию: он может либо выбрать фотографию с компьютера, к примеру, для своего профиля(аватарку) или может сделать ее, используя веб-камеру, и вот тут уже поможет эта статья.
Ответить
Ну я и не настаивал что из этого можно сделать видео-чат ,которвй я делать не собираюсь, но что это может быть прологом его это интересно и только на javascript делает его ещё интересней!!!
Ответить
Так точно! Впереди будет еще много интересного про JavaScript, не переключайтесь!
Ответить
Здравствуйте, я сделал все, как надо, но почему то не выводит изображение на экран, так же нет запроса на использование веб-камеры => она не включается
Ответить
Добрый день! У меня аналогично. Не отображается изображение. Даже черного окна нет. ((
Ответить
А как записывать эту трансляцию на компьютер? Или как сделать, чтобы эту трансляцию видели на сайте все онлайн-пользователи во время эфира?
Ответить
А как вывести видео с ip камеры на сайт
Ответить
А как сделать так, чтобы кто то другой видео это изображение? Я то себя вижу а как другие увидят?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.