WebRTC Reduce a recording video size - javascript

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).

Related

why is this.input.keyboard.on('keyup-LEFT', function() {}) not working in phaser.js?

In my sprite sheet I have two separate frames for when the character is not moving, one is for when she was moving left and then stopped and the other for when she was moving right and then stopped, so i need it to fire up on sort of a key up event. I've seen very similar question here, but the answer didn't work for me, it said to add:
scene.input.keyboard.on('keyup-LEFT', function()
{
});
but it just broke my code, screen goes black and nothing happens, i tried adding that code in either create() and update()
So i tried instead:
this.input.keyboard.on('keyup-LEFT', function()
{
player.setVelocityX(0);
player.anims.play('stopLeft');
});
this.input.keyboard.on('keyup-RIGHT', function()
{
player.setVelocityX(0);
player.anims.play('stopRight');
});
It doesn't break my code, but also nothing happens, I also tried player instead of scene or this, (player is a variable to which my sprite is assigned), but that also broke my code, just like scene did.
BTW, stopLeft and stopRight works fine, because i tested them on normal this.input.keyboard.createCursorKeys() events.
The most common way to implement player movement and/or input is, to put the logic in the update function, and check if the keys are pressed/down (isDown).
I would only use this.input.keyboard, for hot-key like 'ESC' or some special hot-keys.
Here a short working demo:
(for more details checkout this official example)
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 100 }
}
},
scene: {
preload,
create,
update
},
banner: false
};
let player;
let cursor;
let animsKeyText;
function preload() {
this.load.spritesheet('dude', 'https://labs.phaser.io/src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
function create() {
let floor = this.add.rectangle(0, config.height, config.width, 20, 0xcdcdcd)
.setOrigin(0, .5);
animsKeyText = this.add.text(10, 10, 'current anims-key: ??')
this.physics.add.existing(floor, true);
player = this.physics.add.sprite(100, 10, 'dude')
.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'stop-left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 1 }),
frameRate: 10,
repeat: 0
});
this.anims.create({
key: 'stop-right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 6 }),
frameRate: 10,
repeat: 0
});
this.physics.add.collider(player, floor);
cursors = this.input.keyboard.createCursorKeys();
}
function update() {
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);
if (player.anims && player.anims.currentAnim) {
// just to prevent of keys "stop-stop....-right" or so
if (player.anims.currentAnim.key.indexOf('stop') == -1) {
let newKey = `stop-${player.anims.currentAnim.key}`;
player.anims.play(newKey, true);
}
}
}
if (player.anims && player.anims.currentAnim) {
animsKeyText.setText(`current anims-key: ${player.anims.currentAnim.key}`);
}
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

How to remove empty space between player and ground in Phaser 3

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();

Qrcode reader with lazarsoft

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

getUserMedia/RecordRTC performance issue at 720p

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
}
});

updating jqplot meter gauge after every 5 seconds

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);
});

Categories

Resources