0
今、私は教育のために「スナップチャット」の種類のWebアプリケーションを作成しようとしています。 アプリでは、動画やキャンバスなどのHTML5タグを使用しています。携帯電話の画面全体を埋め込むHTMLビデオタグ
次に、getUserMediaを使用してカメラの出力を取得しますが、私の問題はビデオタグを取得して画面全体を満たすことができないことです。
私は幅：100％からすべてを試しました。高さ：100％、高さ：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