小编Nor*_*rak的帖子

如何检测相机的宽度和高度以在画布上使用它并保持比例？

我需要检测相机的宽度和高度，然后在画布上使用它。在新画布中，我将显示带有一些过滤器的实时视频。相机的大小应与视频相同。

我用来访问相机的代码：

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia);

    var options = {video: true};
    var videoWidth, videoHeight;

    var onFail = function(e) {
      alert('Failed to get camera');
      alert(e);
    };
    var onSuccess = function(stream) {

        if(navigator.mozGetUserMedia) {
            video.mozSrcObject = stream;
        } else {
            var url = window.URL || window.webkitURL;
            video.src = url.createObjectURL(stream);
        }

        // Wait 1000 ms before starting the loop
        setTimeout(function(){

            //rest of functions ...
            //Here I need to use: videoWidth, videoHeight
            //that are obtained from the image …

我想显示一个带有表格和里面有很多信息的 div。我的问题是，这取决于悬停元素所在的位置，信息超出了浏览器窗口的限制。我希望不要发生这种情况，但我不知道如何解决它。解决办法是什么？能够使用 CSS，尽管如果不可能，它也可以使用 Javascript

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
	
.tooltiptext, .tooltipTable {
	min-width: 200px;
	font-size: 11px; …

我尝试将 2 个表添加到 serverless.yml 以与 DynamoDB 链接。

我在 serverless.yml 中的一部分代码：

...       
 resources:
      Resources:
        ItemsTable:
          Type: "AWS::DynamoDB::Table"
          Properties:
            TableName: "InvoiceConfig"
            AttributeDefinitions:
            - AttributeName: "providerName"
              AttributeType: "S"
            KeySchema:
            - AttributeName: "providerName"
              KeyType: "HASH"
            ProvisionedThroughput:
              ReadCapacityUnits: 2
              WriteCapacityUnits: 2
            TableName: "DifferentTermsPages"
            AttributeDefinitions:
            - AttributeName: "id"
              AttributeType: "S"
            - AttributeName: "providerName"
              AttributeType: "S"
            - AttributeName: "productType"
              AttributeType: "S"
            - AttributeName: "language"
              AttributeType: "S"
            - AttributeName: "terms"
              AttributeType: "L"
            KeySchema:
            - AttributeName: "id"
              KeyType: "HASH"
            - AttributeName: "providerName"
              KeyType: "HASH"
            - AttributeName: "productType"
              KeyType: "HASH" …

在我的网站上,我需要用户可以上传照片.但为了确保图像不模糊,我想自动检测相机是自动对焦还是找到一种方法来帮助对焦. 相机正确对焦时,如何自动拍照？任何的想法？？

我的代码:

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

		var options = {video: true};
		var videoWidth, videoHeight;
		var video = document.getElementById('my-webcam');
        var canvascam = document.getElementById('canvas-cam');
			

		var onFail = function(e) {
		  alert('Failed to get camera');
		  alert(e);
		};
		var onSuccess = function(stream) {

			if(navigator.mozGetUserMedia) {
				video.mozSrcObject = stream;
			} else {
				var url = window.URL || window.webkitURL;
				video.src = url.createObjectURL(stream);
			}

			setTimeout(function(){
				setInterval(updateCanvas,30);
        
        
				//Take photo when camera is focused
				
				
				
			},1000);
		};

    navigator.getUserMedia(options, onSuccess, onFail);
    
    function updateCanvas(){
			canvascam.getContext('2d').drawImage(video, 0, 0, …