Всем привет! Сегодня я расскажу, как сделать онлайн-трансляцию вашей веб-камеры на чистом 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. Спасибо за внимание! :)
