WebRTC : Can't talk at the same time - webrtc

I'm working on webRTC and I have a problem : with some user I can't talk at the same time (their microphone get automatically muted while I am talking)
Does somebody have some information about that ?
(I'm using simplePeer)

This should be related to a misbehaving AEC (echo cancellation).
Try to disable AEC (and also AGC) on both side and it should fix the problem.
For WebRTC you can do it like this:
var mediaConstraints = {
audio: {
echoCancellation: { exact: false },
googEchoCancellation: { exact: false },
googAutoGainControl: { exact: false },
googNoiseSuppression: { exact: false },
}
}

Related

Codemirror does not refresh the contents of the textarea until its clicked or if I use the JSON.parse on the contents while setting

I am developing a web application using Vuejs/Nuxtjs within that I have some textarea which is controlled by CodeMirror for beautification purposes. The problem I am facing is that when the content of the CodeMirror changes then it is not reflected on the CodeMirror textarea unless I click on it or if I use the JSON.parse while setting the value in Watch. If I click on it then it reflects the changes and everything is correctly working.
Following is the textarea which is governed by CodeMirror:
<textarea
ref="input"
:value="$store.state.modules.MyModules.input"
class="form-control"
placeholder="Input"
spellcheck="false"
data-gramm="false"
/>
Following is the code sample where I am loading the contents to CodeMirror if the values changes using the Vuejs Watch function:
data () {
return {
inputEditor: null
}
},
watch: {
'$store.state.modules.MyModules.input' (value) {
if (value !== this.inputEditor.getValue()) {
this.inputEditor.setValue(value)
}
}
},
mounted () {
this.inputEditor = CodeMirror.fromTextArea(this.$refs.testInput, {
mode: "applicaton/ld+json",
beautify: { initialBeautify: true, autoBeautify: true },
lineNumbers: true,
indentWithTabs: true,
autofocus: true,
tabSize: 2,
gutters: ["CodeMirror-lint-markers"],
autoCloseBrackets: true,
autoCloseTags: true,
styleActiveLine: true,
styleActiveSelected: true,
autoRefresh: true,
});
// On change of input call the function
this.inputEditor.on("change", this.createTestData);
// Set the height for the input CodeMirror
this.inputEditor.setSize(null, "75vh");
// Add the border for all the CodeMirror textarea
for (const s of document.getElementsByClassName("CodeMirror")) {
s.style.border = "1px solid black";
}
}
I found issues similar to this and tried the following things but still no luck:
Trying to refresh the contents within the watch method:
watch: {
'$store.state.modules.MyModules.input' (value) {
const vm = this
if (value !== this.inputEditor.getValue()) {
this.inputEditor.setValue(value)
setTimeout(function () {
vm.inputEditor.refresh()
}, 1)
}
}
},
Trying to use the autorefresh within my CodeMirror but that also did not work.
What worked for me is that when setting the value I need to use the JSON.parse within the watch method. If I do that then It's working correctly but I do not want to do that:
watch: {
'$store.state.modules.MyModules.input' (value) {
const vm = this
if (value !== this.inputEditor.getValue()) {
this.inputEditor.setValue(JSON.parse(value))
}
}
},
Can someone please inform me why the CodeMirror data will not be updated if I do not do JSON.parse?
Chain this to the master codemirror object, make sure nothing else is chained:
.on('change', editor => {
globalContent = editor.getValue();
});;
Providing the answer as it can be helpful to someone else in the future:
Actually the vm.inputEditor.refresh() will work only problem was that I was using it with setTimeout 0.001s which is way to quick for to refresh.
After trying a lot I found my stupid mistake. I tried to change it to 1000 or 500 and it works now.
Following is the change:
setTimeout(function () {
vm.inputEditor.refresh()
}, 1000)

How i can use my back camera of my phone in the browser with QUAGGA JS

i want to use Quagga js in my webapp to scan a barcodes...
The problem is that i want use the mobile's back camera, in the documentation say's that quagga use a parameter called "facingMode".
If you set facingMode = "enviroment" that use the webcam if you stay in a PC or the back camera if you stay in a Phone .
And if you set facingMode = "user" that use the mobile's front camera.
Well, i set user and enviroment for test and there is no difference, it stays the same, on the cell phone continues to use the front camera, i try to use the back camera but nothing.
I leave my code at there
function startScanner() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: 600,
height: 450,
facingMode: "enviroment" //or user for front camera
},
},
decoder: {
readers: [
"code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
console.log(navigator.mediaDevices.enumerateDevices());
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
i tried in Android Phone

videoJs inactivityTimeout option not working

I'm trying to set the inactivityTimeout on my video element to shorten the time it takes for the control bar to hide. However, the following doesn't seem to change it:
const opts = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
},
inactivityTimeout: 100,
};
videojs(myVideoEl, opts);
When I do this it does work, but I get a warning:
player.options().inactivityTimeout = 500;
VIDEOJS: WARN: this.options() has been deprecated and will be moved to
the constructor in 6.0
Does anyone know why I can't seem to set it using the options?
var player = videojs("sessionsimple-player",{
inactivityTimeout: 100,
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
}
});
Note: Do not use both data-setup and an options object.
https://docs.videojs.com/tutorial-setup.html#options

how to hide the seek bar of the ads in video.js player using vast plugin

I have a video.js player working with in-roll pre-roll ads before the actual video starts. but i am unable to get rid of seek bar in the ad
I have used VAST pluging to get this thing working.the java script option passed to vast.js are below
Ad video with Seek bar
<script type="text/javascript">
var options = {
ads: {
'skipAd': {
'enabled': true,
'timeOut': 10,
},
'servers' : [
{
'apiAddress': '../static/vast.xml'
//'apiAddress' : 'http://some.domain/xdr-redirect/?http://some.domain/xml/vast.xml', //for xdr only
//'xdrMethod': 'yql' //['yql' | 'xdr']
}
],
'schedule' : [
{
'position' : 'pre-roll',
'startTime': '00:00:00'
},
{
'position' : 'mid-roll',
'startTime': '00:00:07'
},
{
'position' : 'post-roll'
}
],
}
};
_V_("video", options);
is there an option that can be passed to vast.js or add some code to disable the seek bar.
thanx in advance for the answers..
thank you
VideoJS let you register event callback.
You can register a function to vast.adStart and vast.adEnd to set the bar display: none or block, whatever fit's your usecase.
player.on('vast.adStart', function () {
document.querySelector('.vjs-progress-control').style.display = "none";
});

how to make volume bar vertical in video.js player?

I have tried solution given here on the site but it didn't work.
Setting up volume control vertical in video.js
Where I can get best tutorial about video.js.. Any link?
For version 6.2.0:
var options = {
controlBar: {
volumePanel: {inline: false}
},
};
videojs('my-video', options);
Video.js 7.10.2
var player = videojs('my-video', {
controlBar: {
volumePanel: {
inline: false
}
},
});
For video.js 5.x:
var options = {
controlBar: {
volumeMenuButton: {
inline: false,
vertical: true
}
}
};
videojs('player', options);
const options: VideoJsPlayerOptions = {
controlBar: {
volumePanel: {
inline: false,
volumeControl: {
vertical: true
}
}
}
};
This can be done. Please see:
http://jsbin.com/nidevo/2/edit?html,css,output
and
https://github.com/videojs/video.js/issues/942
The howto you cite is for videojs 2.0