0
Прямо сейчас, я пытаюсь создать «snapchat» вид веб-приложения для моего обучения. Приложение использует теги HTML5, такие как видео и холст.HTML-тег для заполнения всего экрана на телефонах
Затем я использую getUserMedia, чтобы получить выход камеры, но моя проблема в том, что я не могу получить тег видео, чтобы заполнить весь экран.
Я пробовал все: от ширины: 100%; height: 100% ;, height: 100vh, jquery, но это испортило функцию getUserMedia, поэтому она даже не работала.
Прямо сейчас, это мой код: HTML файл:
<!doctype html>
<html lang="da">
<head>
<title>Camera output</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<video id="video" autoplay></video>
<button id="snap" class="snapButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
CSS Файл:
* {
margin: 0;
padding: 0;
}
#video {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
transform-origin: center center;
}
JS файл:
function setElementFullScreen(selector) {
var ele= $(selector);
// Set left/top, can be done in directly in css
ele.css('top',0).css('left',0);
// Set size from window
ele.height($(window).height()).width($(window).width());
}
$(document).ready(function() {
setElementFullScreen('video');
});
// Add resize event
$(window).on('resize', function() {
setElementFullScreen('video');
});
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) {
console.log('An error has occurred!', e)
};
// Put video listeners into place
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
/* Legacy code below! */
else if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(mediaConfig, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(mediaConfig, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
navigator.mozGetUserMedia(mediaConfig, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById('snap').addEventListener('click', function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
Так что мой вопрос: Есть ли любой способ сделать тег видео заполнить каждый бит экрана телефона? Я пробовал на рабочем столе, у него не было проблем с заполнением по горизонтали.
Заранее спасибо.
Я думаю, вы поняли. Я не хочу, чтобы он шел в полноэкранном режиме, потому что у меня будут кнопки поверх элемента. Я хочу, чтобы он заполнил весь фон/экран телефона. – Ismail
Это совсем не то, что я понял, ваш вопрос был. Можете ли вы опубликовать еще несколько своих кодов? Особенно интересует ваш 'CSS' и обертка для видео и наложения кнопок. – bowl0stu
Извините, если мой вопрос был не таким ясным. Я обновил свой вопрос с помощью моего html, css и js-файла. – Ismail