Ciao I'm using https://github.com/LazarSoft/jsqrcode, but I can not get the decoding of qrcode through the camera.
What I want to do is just get the decoding of reading qrcode
This is my code
HTML
<video autoplay></video>
<canvas id="qr-canvas"></canvas>
JS
var video = document.querySelector('video');
var constraints =
{
audio: false,
video:
{
facingMode: { exact: "environment" },
width: { min: 100, ideal: 400, max: 450 },
height: { min: 100, ideal: 400, max: 450 }
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream)
{
video.srcObject = mediaStream;
video.onloadedmetadata = function(e)
{
video.play();
};
}).catch(function(err)
{
console.log(err.name + ": " + err.message);
});
var qr_canvas =
document.getElementById('qr-canvas').getContext('2d');
qr_canvas.drawImage(video, 0, 0, 400, 400);
qrcode.decode();
function readQR(a)
{
alert(a);
}
qrcode.callback = readQR;
Grazie
Chrome does not support navigator.mediaDevices.getUserMedia any more. Please use navigator.mediaDevices.enumerateDevices().then(function(MediaDeviceInfo) { ... }) for your development, and you can reference my project on github: https://github.com/licaomeng/js-qrcode-scanner
Related
I am learning Phaser 3 by creating a small platform game, everything works as I want, but when the player loads there is some space between him and the ground, what is causing this and how can I fix it? I want him to be standing on the ground without any space between, here is a picture:
https://ibb.co/Px65JMR
and here is my js code:
var config = {
type: Phaser.AUTO,
width: 900,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('sky', 'assets/world/sky.png');
this.load.image('ground', 'assets/world/ground.png');
this.load.image('platform', 'assets/world/platform.png');
this.load.spritesheet('player', 'assets/characters/player.png', { frameWidth: 32, frameHeight: 48 });
}
function create() {
this.add.image(400, 300, 'sky');
platforms = this.physics.add.staticGroup();
ground = this.physics.add.staticGroup();
platforms.create(600, 400, 'platform');
platforms.create(50, 250, 'platform');
platforms.create(750, 220, 'platform');
ground.create(500, 550, 'ground')
// Creating the player
player = this.physics.add.sprite(50, 350, 'player');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
player.body.setGravityY(300)
this.physics.add.collider(player, ground);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [{ key: 'player', frame: 4 }],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
}
function update() {
cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);
}
else {
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-330);
}
}
this.load.spritesheet('player', 'assets/characters/player.png', { frameWidth: 32, frameHeight: 48 });
Did you make sure that the frameHeight of the sprite is 48 and not 32x32?
Also, I'd recommend you to add debug=true
to your configuration:
arcade: {
debug: true,
gravity: { y: 300 }
}
By doing so, each object will be marked by a purple outline, I bet you will figure it out in no time.
possible solution 1:
try to reduce the second param here:
ground.create(500, 550, 'ground')
to - lets say- 450.
possible solution 2:
ground.create(500, 550, 'ground').setSize(500,500, true);
ground.refresh();
I want to show the camera of my mobile on the form. but what i have for now is the camera is showing ONLY on web page of the Desktop not on the web page of the Mobile, why? why i cant access the camera of my mobile? please help thanks here is the code of the webcam.js
var WebCodeCamJS = function(element) {
'use strict';
this.Version = {
name: 'WebCodeCamJS',
version: '2.7.0',
author: 'Tóth András',
};
var mediaDevices = window.navigator.mediaDevices;
mediaDevices.getUserMedia = function(c) {
return new Promise(function(y, n) {
(window.navigator.getUserMedia || window.navigator.mozGetUserMedia || window.navigator.webkitGetUserMedia).call(navigator, c, y, n);
});
}
HTMLVideoElement.prototype.streamSrc = ('srcObject' in HTMLVideoElement.prototype) ? function(stream) {
this.srcObject = !!stream ? stream : null;
} : function(stream) {
if (!!stream) {
this.src = (window.URL || window.webkitURL).createObjectURL(stream);
} else {
this.removeAttribute('src');
}
};
var videoSelect, lastImageSrc, con, beepSound, w, h, lastCode;
var display = Q(element),
DecodeWorker = null,
video = html('<video muted autoplay playsinline></video>'),
sucessLocalDecode = false,
localImage = false,
flipMode = [1, 3, 6, 8],
isStreaming = false,
delayBool = false,
initialized = false,
localStream = null,
options = {
decodeQRCodeRate: 5,
decodeBarCodeRate: 3,
successTimeout: 500,
codeRepetition: true,
tryVertical: true,
frameRate: 15,
width: 320,
height: 240,
constraints: {
video: {
mandatory: {
maxWidth: 1280,
maxHeight: 720
},
optional: [{
sourceId: true
}]
},
audio: false,
},
flipVertical: false,
flipHorizontal: false,
zoom: 0,
beep: 'audio/beep.mp3',
decoderWorker: 'js/DecoderWorker.js',
brightness: 0,
autoBrightnessValue: 0,
grayScale: 0,
contrast: 0,
threshold: 0,
sharpness: [],
resultFunction: function(res) {
console.log(res.format + ": " + res.code);
},
cameraSuccess: function(stream) {
console.log('cameraSuccess');
},
canPlayFunction: function() {
console.log('canPlayFunction');
},
getDevicesError: function(error) {
console.log(error);
},
getUserMediaError: function(error) {
console.log(error);
},
cameraError: function(error) {
console.log(error);
}
};
and here is my code of the Play which will trigger the button to show the camera
function play() {
if (!localImage) {
if (!localStream) {
init();
}
const p = video.play();
if (p && (typeof Promise !== 'undefined') && (p instanceof Promise)) {
p.catch(e => null);
}
delay();
}
}
I recorded video for 10 second in (Firefox/Chrome) using this example https://www.webrtc-experiment.com/RecordRTC/. Recorded blob size around [10 Sec, 4.36MB (320x240)] , Then I modified some parameter as fallows
var videoConstraints = {
audio: false,
video: {
mandatory: {
width: { min: 320 },
height: { min: 240 }
},
optional: [
{ width: 320 },
{ width:
{ min: 320 }
},
{ frameRate: 60 },
{ quality: 10 },
{ width:
{ max: 320 }
},
{ facingMode: "user" }
]
}
};
But still blob size is almost same. what can I do, for reduce recorded blob size.
Your constraints mix Chrome-specific format and the standard, and will work in no browser.
The standard (still requires a polyfill in Chrome):
var constraints = {
video: {
width: { min: 320 },
height: { min: 240 },
advanced: [
{ width: 320 },
{ width: { min: 320 } },
{ frameRate: 60 },
{ width: { max: 320 } },
{ facingMode: "user" }
]
}
};
The standard also lets you express things declaratively, so this is the same/better:
var constraints = {
video: {
width: { min: 320, ideal: 320 },
height: { min: 240 },
frameRate: 60,
facingMode: "user",
}
};
Finally, if you're trying to reduce the size, don't use min. min and max are bounds, so min wont give you low resolutions, just the opposite, it sets a lower bound. Instead use ideal for gravity, or even max.
I wont explain what this would look like in Chrome, since it uses an outdated syntax that wont work in other browsers, but this snippet works across browsers using a polyfill:
var constraints = {
video: {
width: { min: 320, ideal: 320 },
height: { min: 240 },
frameRate: 60,
facingMode: "user",
}
};
function start() {
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) { v.srcObject = stream; })
.then(function() {
return new Promise(function(r) { v.onloadedmetadata = r;});
})
.then(function() {
log("Success: "+ v.videoWidth +"x"+ v.videoHeight);
})
.catch(failed);
}
function log(msg) { div.innerHTML += "<p>" + msg + "</p>"; }
function failed(e) { log(e + ", line " + e.lineNumber); }
<video id="v" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
<script src="https://rawgit.com/webrtc/adapter/master/adapter.js"></script>
quality is not a standard constraint.
#jib's answer will reduce the resolution/framerate of the capture. However, the reason the blob size doesn't change is that you need to reduce the encoding bitrate for MediaRecorder. However, no browser has implemented bitrate limits for MediaRecorder (Firefox plans to do so soon - Firefox's initial implementation was to support video recording in Firefox OS cameras, and that ran at a fixed bitrate).
I am using the RecordRTC script for recording video/Audio.
Everything is fine until I require 720p.
If you visit the RecordRTC site and choose 1280x720 for both video and canvas options you'll notice considerable slow down when compared to smaller sizes (expected).
if I record ONLY video it works perfectly but I require both.
$('.btn.record').on('click',function() {
!window.stream && navigator.getUserMedia(
{
audio: true,
video: {
optional: [],
mandatory: {
minWidth: 1280,
minHeight: 720,
maxWidth: 1280,
maxHeight: 720,
minAspectRatio: 1.7777777778,
maxAspectRatio: 1.7777777778,
}
}
},
function(stream) {
window.stream = stream;
onstream();
},
function(error) {
alert(error);
}
);
window.stream && onstream();
function onstream() {
preview.src = window.URL.createObjectURL(stream);
preview.play();
preview.muted = true;
recordAudio = RecordRTC(stream, {
onAudioProcessStarted: function() {
if(!isFirefox) {
recordVideo.startRecording();
}
}
});
recordVideo = RecordRTC(stream, {
type: 'video',
video: {
width: 1280,
height: 720
},
canvas: {
width: 1280,
height: 720
}
});
recordAudio.startRecording(); // DISABLE THIS AND VIDEO IS PERFECT
}
Use <canvas> width/height as low as possible; 320*240 are suggested values:
recordVideo = RecordRTC(stream, {
type: 'video',
video: {
width: 1280, // redundant because offsetWidth/videoWidth will be 1280
height: 720 // redundant because offsetHeight/videoHeight will be 720
},
canvas: {
width: 320, // suggested width
height: 240 // suggested height
}
});
I am displaying jqplot meter gauge inside modal window and I want to update it after every 5 seconds. I wrote the following code but it is not working
$(document).ready(function(){
s1 = [Math.floor(Math.random()*(401)+100)];
plot3 = $.jqplot('meter',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
$('a[href=\"#yw1_tab_3\"]').on('shown', function(e) {
if (plot3._drawCount === 0) {
plot3.replot();
}
});
windows.setInterval(function() { plot3.destroy();
s1 = [Math.floor(Math.random()*(401)+100)];
plot3.replot();
}, 5000);
});
How can I update meter gauge every 5 seconds without updating whole page?
here is the fix: JsFiddle link
$(document).ready(function () {
var s1 = [Math.floor(Math.random() * (401) + 100)];
var plot3 = $.jqplot('meter', [s1], {
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals: [200, 300, 400, 500],
intervalColors: ['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
setInterval(function () {
s1 = [Math.floor(Math.random() * (401) + 100)];
plot3.series[0].data[0] = [1,s1]; //here is the fix to your code
plot3.replot();
}, 1000);
});