forked from Dynamsoft/barcode-reader-javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdecodeVideo.html
More file actions
107 lines (93 loc) · 4.46 KB
/
decodeVideo.html
File metadata and controls
107 lines (93 loc) · 4.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<p>To enable video, please host the site in https!</p>
<div id="divLoading">loading...</div>
<div id="divReading" style="display:none">Reading...</div>
<button id="btn-startReadVideo" disabled>start read</button>
<button id="btn-stopReadVideo" style="display:none">stop read</button>
<div id="divVideoContainer" style="max-width:90%;position:relative;">
<video id="theVideo" style="width:100%;height:100%;" playsinline="true"></video>
<div id="divVideoRegion" style="position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:3px solid #50A8E1;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- optional, a log tool -->
<script src="https://demo.dynamsoft.com/dbr_wasm/js/kConsole.js"></script>
<!-- https://github.com/webrtc/adapter -->
<script src="https://demo.dynamsoft.com/dbr_wasm/js/webrtc-adapter.js"></script>
<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.4.1.1.min.js"></script>
<script>
// By default, js will load `dbr-<version>.min.js` & `dbr-<version>.wasm` in the same folder as the context.
// `dbr-<version>.min.js` & `dbr-<version>.wasm` should always put in same folder.
// Modify this setting when you put `dbr-<version>.min.js` & `dbr-<version>.wasm` somewhere else.
dynamsoft.dbrEnv.resourcesPath = 'https://demo.dynamsoft.com/dbr_wasm/js';
//https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
dynamsoft.dbrEnv.licenseKey = "t0094YAAAAAf3ODHwjvzXJkTbCTukvG79oxd1HqrRD4HGqfP0sxh2ZzRd5Ci+jSXYSE5kNoFzHSddVcT142Dh0lPs2OA/qFkD545Ykj1H83uN561ro6Jn32UfQ5APcX0ZgA==";
dynamsoft.dbrEnv.bUseWorker = true; //uncomment it to use worker
dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function(){
playvideo();
$('#divLoading').text('load dbr worker success');
};
dynamsoft.dbrEnv.onAutoLoadWasmError = function(ex){
kConsoleLog(ex);
$('#divLoading').text('load dbr worker fail: '+(ex.message || ex));
};
var playvideo = ()=>{
kConsoleLog('======before video========');
navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: { ideal: 'environment' } } }).then((stream)=>{
kConsoleLog('======get video========');
var video = $('#theVideo')[0];
video.srcObject = stream;
video.onloadedmetadata = ()=>{
kConsoleLog('======play video========');
video.play();
kConsoleLog('======played video========');
$('#btn-startReadVideo').removeAttr('disabled');
};
}).catch((ex)=>{
kConsoleLog(ex);
});
};
$('#btn-startReadVideo').click(()=>{
$('#divReading').show();
$('#btn-startReadVideo').hide();
$('#btn-stopReadVideo').show();
isLooping = true;
$('#kConsoleShowHideBtn').click();
loopReadVideo();
});
$('#btn-stopReadVideo').click(()=>{
$('#btn-stopReadVideo').hide();
$('#btn-startReadVideo').show();
isLooping = false;
$('#divReading').hide();
});
var isLooping = false;
var loopReadVideo = function(){
if(!isLooping){
return;
}
kConsoleLog('======= once read =======')
var timestart = (new Date()).getTime();
var reader = new dynamsoft.BarcodeReader();
reader.decodeFileInMemory($('#theVideo')[0]).then(results=>{
kConsoleLog('time cost: ' + ((new Date()).getTime() - timestart) + 'ms');
for(var i=0;i<results.length;++i){
var result = results[i];
kConsoleLog(result.BarcodeText);
}
setTimeout(loopReadVideo, 0);
return reader.deleteInstance();
}).catch(ex=>{
kConsoleError(ex.message || ex);
setTimeout(loopReadVideo, 0);
reader.deleteInstance();
});
};
</script>
</body>
</html>