Browse Source
* create widget and work to video * style widget stream photo and create preview photo * Add translate, save and style from widgetpull/1992/head
Vladyslav
7 years ago
committed by
Igor Kulikov
Igor Kulikov
6 changed files with 360 additions and 1 deletions
@ -0,0 +1,196 @@ |
|||||
|
/* |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
import './web-camera-input-widget.scss'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
import webCameraWidgetTemplate from './web-camera-input-widget.tpl.html'; |
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.webCameraWidget', []) |
||||
|
.directive('tbWebCameraWidget', webCameraWidget) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function webCameraWidget() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
bindToController: { |
||||
|
ctx: '=' |
||||
|
}, |
||||
|
controller: WebCameraWidgetController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: webCameraWidgetTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
function WebCameraWidgetController($element, $scope, $window, types, utils, attributeService, Fullscreen) { |
||||
|
let vm = this; |
||||
|
|
||||
|
vm.videoInput = []; |
||||
|
vm.videoDevice = ""; |
||||
|
vm.previewPhoto = ""; |
||||
|
vm.isShowCamera = false; |
||||
|
vm.isPreviewPhoto = false; |
||||
|
|
||||
|
let streamDevice = null; |
||||
|
let indexWebCamera = 0; |
||||
|
let videoElement = null; |
||||
|
let canvas = null; |
||||
|
let photoCamera = null; |
||||
|
let dataKeyType = ""; |
||||
|
|
||||
|
vm.getStream = getStream; |
||||
|
vm.createPhoto = createPhoto; |
||||
|
vm.takePhoto = takePhoto; |
||||
|
vm.switchWebCamera = switchWebCamera; |
||||
|
vm.cancelPhoto = cancelPhoto; |
||||
|
vm.closeCamera = closeCamera; |
||||
|
vm.savePhoto = savePhoto; |
||||
|
|
||||
|
vm.isEntityDetected = false; |
||||
|
vm.dataKeyDetected = false; |
||||
|
vm.isCameraSupport = false; |
||||
|
vm.isDeviceDetect = false; |
||||
|
|
||||
|
$scope.$watch('vm.ctx', function () { |
||||
|
if (vm.ctx && vm.ctx.datasources && vm.ctx.datasources.length) { |
||||
|
let datasource = vm.ctx.datasources[0]; |
||||
|
if (datasource.type === types.datasourceType.entity) { |
||||
|
if (datasource.entityType && datasource.entityId) { |
||||
|
if (vm.ctx.settings.widgetTitle && vm.ctx.settings.widgetTitle.length) { |
||||
|
$scope.titleTemplate = utils.customTranslation(vm.ctx.settings.widgetTitle, vm.ctx.settings.widgetTitle); |
||||
|
} else { |
||||
|
$scope.titleTemplate = vm.ctx.widgetConfig.title; |
||||
|
} |
||||
|
vm.isEntityDetected = true; |
||||
|
} |
||||
|
} |
||||
|
if (datasource.dataKeys.length) { |
||||
|
$scope.currentKey = datasource.dataKeys[0].name; |
||||
|
dataKeyType = datasource.dataKeys[0].type; |
||||
|
vm.dataKeyDetected = true; |
||||
|
} |
||||
|
if (hasGetUserMedia()) { |
||||
|
vm.isCameraSupport = true; |
||||
|
getDevices().then(gotDevices).then(() => { |
||||
|
vm.isDeviceDetect = !!vm.videoInput.length; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function hasGetUserMedia() { |
||||
|
return !!($window.navigator.mediaDevices && $window.navigator.mediaDevices.getUserMedia); |
||||
|
} |
||||
|
|
||||
|
function takePhoto(){ |
||||
|
vm.isShowCamera = true; |
||||
|
videoElement = $element[0].querySelector('#videoStream'); |
||||
|
photoCamera = $element[0].querySelector('#photoCamera'); |
||||
|
canvas = $element[0].querySelector('canvas'); |
||||
|
Fullscreen.enable(photoCamera); |
||||
|
getStream(); |
||||
|
} |
||||
|
|
||||
|
function cancelPhoto() { |
||||
|
vm.isPreviewPhoto = false; |
||||
|
vm.previewPhoto = ""; |
||||
|
} |
||||
|
|
||||
|
function switchWebCamera() { |
||||
|
indexWebCamera = (indexWebCamera+1)%vm.videoInput.length; |
||||
|
vm.videoDevice = vm.videoInput[indexWebCamera].deviceId; |
||||
|
getStream(); |
||||
|
} |
||||
|
|
||||
|
function getDevices() { |
||||
|
return $window.navigator.mediaDevices.enumerateDevices(); |
||||
|
} |
||||
|
|
||||
|
function gotDevices(deviceInfos) { |
||||
|
for (const deviceInfo of deviceInfos) { |
||||
|
let device = { |
||||
|
deviceId: deviceInfo.deviceId, |
||||
|
label: "" |
||||
|
}; |
||||
|
if (deviceInfo.kind === 'videoinput') { |
||||
|
device.label = deviceInfo.label || `Camera ${vm.videoInput.length + 1}`; |
||||
|
vm.videoInput.push(device); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function getStream() { |
||||
|
if (streamDevice !== null) { |
||||
|
streamDevice.getTracks().forEach(track => { |
||||
|
track.stop(); |
||||
|
}); |
||||
|
} |
||||
|
const constraints = { |
||||
|
video: {deviceId: vm.videoDevice !== "" ? {exact: vm.videoDevice} : undefined} |
||||
|
}; |
||||
|
return $window.navigator.mediaDevices.getUserMedia(constraints).then(gotStream); |
||||
|
} |
||||
|
|
||||
|
function gotStream(stream) { |
||||
|
streamDevice = stream; |
||||
|
if(vm.videoDevice === ""){ |
||||
|
indexWebCamera = vm.videoInput.findIndex(option => option.label === stream.getVideoTracks()[0].label); |
||||
|
indexWebCamera = indexWebCamera === -1 ? 0 : indexWebCamera; |
||||
|
vm.videoDevice = vm.videoInput[indexWebCamera].deviceId; |
||||
|
} |
||||
|
videoElement.srcObject = stream; |
||||
|
} |
||||
|
|
||||
|
function createPhoto() { |
||||
|
canvas.width = videoElement.videoWidth; |
||||
|
canvas.height = videoElement.videoHeight; |
||||
|
canvas.getContext('2d').drawImage(videoElement, 0, 0); |
||||
|
vm.previewPhoto = canvas.toDataURL('image/png'); |
||||
|
vm.isPreviewPhoto = true; |
||||
|
} |
||||
|
|
||||
|
function closeCamera(){ |
||||
|
Fullscreen.cancel(photoCamera); |
||||
|
vm.isShowCamera = false; |
||||
|
if (streamDevice !== null) { |
||||
|
streamDevice.getTracks().forEach(track => { |
||||
|
track.stop(); |
||||
|
}); |
||||
|
} |
||||
|
streamDevice = null; |
||||
|
videoElement.srcObject = null; |
||||
|
} |
||||
|
|
||||
|
function savePhoto(){ |
||||
|
let promiseData = null; |
||||
|
let datasource = vm.ctx.datasources[0]; |
||||
|
let saveData = [{ |
||||
|
key: datasource.dataKeys[0].name, |
||||
|
value: vm.previewPhoto |
||||
|
}]; |
||||
|
if(dataKeyType === types.dataKeyType.attribute){ |
||||
|
promiseData = attributeService.saveEntityAttributes(datasource.entityType, datasource.entityId, types.attributesScope.server.value, saveData); |
||||
|
} else if(dataKeyType === types.dataKeyType.timeseries){ |
||||
|
promiseData = attributeService.saveEntityTimeseries(datasource.entityType, datasource.entityId, "scope", saveData); |
||||
|
} |
||||
|
promiseData.then(()=>{ |
||||
|
vm.isPreviewPhoto = false; |
||||
|
closeCamera(); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,67 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
.tb-web-camera { |
||||
|
height: 100%; |
||||
|
|
||||
|
&__last-photo{ |
||||
|
width: 100%; |
||||
|
margin: 5px 0; |
||||
|
text-align: center; |
||||
|
border: solid 1px; |
||||
|
|
||||
|
&_text{ |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
margin-top: -.625em; |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
|
||||
|
&_img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.camera { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.camera-stream{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
|
||||
|
.camera-controls { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
padding: 0 5px 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message-text{ |
||||
|
font-size: 18px; |
||||
|
color: #a0a0a0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,73 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div layout="column" layout-align="center center" class="tb-web-camera"> |
||||
|
<div ng-if="vm.isEntityDetected && vm.dataKeyDetected && vm.isCameraSupport && vm.isDeviceDetect" layout-fill> |
||||
|
<div ng-show="!vm.isShowCamera" layout="column" layout-align="space-between center" layout-fill> |
||||
|
<div class="tb-web-camera__last-photo" flex> |
||||
|
<span ng-show="!vm.ctx.data[0].data[0][1]" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span> |
||||
|
<img ng-show="vm.ctx.data[0].data[0][1]" class="tb-web-camera__last-photo_img" ng-src="{{vm.ctx.data[0].data[0][1]}}" /> |
||||
|
</div> |
||||
|
<md-button class="md-raised md-primary" ng-click="vm.takePhoto()"">{{ "widgets.input-widgets.take-photo" | translate }}</md-button> |
||||
|
</div> |
||||
|
<div ng-show="vm.isShowCamera" layout="column" layout-align="center center" id="photoCamera"> |
||||
|
<div class="camera" ng-show="!vm.isPreviewPhoto"> |
||||
|
<video autoplay muted playsinline id="videoStream" class="camera-stream"></video> |
||||
|
<div class="camera-controls" layout="row" layout-wrap="" layout-align="space-between end"> |
||||
|
<div flex></div> |
||||
|
<md-button class="md-fab md-primary md-mini" aria-label="{{ 'widgets.input-widgets.switch-camera' | translate }}" |
||||
|
ng-click="vm.switchWebCamera()" ng-disabled="{{vm.videoInput.length < 2}}"> |
||||
|
<md-icon md-font-icon="switch_camera" aaria-label="{{ 'widgets.input-widgets.switch-camera' | translate }}">switch_camera</md-icon> |
||||
|
</md-button> |
||||
|
<md-button class="md-fab md-hue-2" aria-label="{{ 'widgets.input-widgets.take-photo' | translate }}" ng-click="vm.createPhoto()"> |
||||
|
<md-icon md-font-icon="photo_camera" aria-label="Take Photo">photo_camera</md-icon> |
||||
|
</md-button> |
||||
|
<md-button class="md-fab md-primary md-mini" aria-label="{{ 'action.cancel' | translate }}" ng-click="vm.closeCamera()"> |
||||
|
<md-icon md-font-icon="close" aria-label="{{ 'action.cancel' | translate }}">close</md-icon> |
||||
|
</md-button> |
||||
|
<div flex></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="camera" ng-show="vm.isPreviewPhoto"> |
||||
|
<img class="camera-stream" ng-src="{{vm.previewPhoto}}"> |
||||
|
<canvas style="display:none;"></canvas> |
||||
|
<div class="camera-controls" layout="row" layout-wrap="" layout-align="space-between end"> |
||||
|
<div flex></div> |
||||
|
<md-button class="md-fab md-primary" aria-label="{{ 'action.cancel' | translate }}" ng-click="vm.cancelPhoto()"> |
||||
|
<md-icon md-font-icon="close" aria-label="{{ 'action.cancel' | translate }}">close</md-icon> |
||||
|
</md-button> |
||||
|
<md-button class="md-fab md-hue-2" aria-label="{{ 'action.save' | translate }}" ng-click="vm.savePhoto()"> |
||||
|
<md-icon md-font-icon="check" aria-label="{{ 'action.save' | translate }}">check</md-icon> |
||||
|
</md-button> |
||||
|
<div flex></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="message-text" ng-hide="vm.isEntityDetected"> |
||||
|
{{ 'widgets.input-widgets.no-entity-selected' | translate }} |
||||
|
</div> |
||||
|
<div class="message-text" ng-if="vm.isEntityDetected && !vm.dataKeyDetected"> |
||||
|
{{ 'widgets.input-widgets.no-datakey-selected' | translate }} |
||||
|
</div> |
||||
|
<div class="message-text" ng-if="vm.isEntityDetected && vm.dataKeyDetected && !vm.isCameraSupport"> |
||||
|
{{ 'widgets.input-widgets.no-support-web-camera' | translate }} |
||||
|
</div> |
||||
|
<div class="message-text" ng-if="vm.isEntityDetected && vm.dataKeyDetected && vm.isCameraSupport && !vm.isDeviceDetect"> |
||||
|
{{ 'widgets.input-widgets.no-support-web-camera' | translate }} |
||||
|
</div> |
||||
|
</div> |
||||
Loading…
Reference in new issue