I have an audio device with 4 inputs microphones..
Someone knows if i can use all these inputs with Web audio API ?
Thanks !
It should work by calling getUserMedia four times, choosing a different device each time, and using createMediaStreamSource four times, although I haven't tested.
yes,you can list all input devices and select one to use.
<html><body>
<select id="devices_list"></select>
<script>
function devices_list(){
var handleMediaSourcesList = function(list){
for(i=0;i<list.length;i++){
var device= list[i];
if(device.kind == 'audioinput') {
document.querySelector('#devices_list').options.add(new Option(device.label ,device.deviceId));
}
}
}
if (navigator["mediaDevices"] && navigator["mediaDevices"]["enumerateDevices"])
{
navigator["mediaDevices"]["enumerateDevices"]().then(handleMediaSourcesList);
}
// Old style API
else if (window["MediaStreamTrack"] && window["MediaStreamTrack"]["getSources"])
{
window["MediaStreamTrack"]["getSources"](handleMediaSourcesList);
}
}
function usemic(){
navigator.getUserMedia ({
"audio":{
"optional": [{
"sourceId": document.querySelector('#devices_list').value
}]
}}, function (stream) {
//...some code to use stream from mic
},function(err){
debuginfo('getMedia ERR:'+err.message );
});
}
</script>
</body></html>
Related
I have the following bit of code:
Which prints the following in the console:
I've been bashing my head for a very long time, not sure where to go from here. It was working just fine when I pushed last. Then, I made some changes which broke it as you can see. To try to fix it, I stashed my changes, but I'm still getting this error.
Edit
search: throttle(live => {
let vm = this;
console.log("entered!!!");
console.log("this", this);
console.log("vm", vm);
if (typeof live == "undefined") {
live = true;
}
if (!live) {
// We are on the search page, we need to update the results
if (vm.$route.name != "search") {
vm.$router.push({ name: "search" });
}
}
vm.$store.dispatch("search/get", {
type: vm.searchType,
query: vm.searchQuery
});
}, 500)
Assuming search is in your methods it should not be using an arrow function as that will give you the wrong this binding.
Instead use:
methods: {
search: throttle(function (live) {
// ...
}, 500)
}
Here I'm also assuming that throttle will preserve the this value, which would be typical for implementations of throttling.
Like I said in my comment, I suspect this is a scoping issue.
Perhaps if you return the throttle function with the Vue component passed in, you might see better results:
search: function() {
let vm = this;
return throttle(live => {
console.log("entered!!!");
console.log("this", this);
console.log("vm", vm);
if (typeof live == "undefined") {
live = true;
}
if (!live) {
// We are on the search page, we need to update the results
if (vm.$route.name != "search") {
vm.$router.push({ name: "search" });
}
}
vm.$store.dispatch("search/get", {
type: vm.searchType,
query: vm.searchQuery
});
}, 500)
}
I want to make Alice in navig.html able to call Seb in index.html with a live video stream.
But in the index.html file, I am not able to display the remote live stream of Alice in index.html file because the video player displays nothing. Why ?
This is Alice, she has an offer (navig.html)
<video id="video1" controls ></video>
<script>
navigator.getUserMedia({audio:true, video:true}, success, error);
function success(stream) {
var video1 = document.querySelector("#video1");
video1.src = URL.createObjectURL(stream)
video1.play()
//rtcpeer
console.log("1")
var pc1 = new RTCPeerConnection()
pc1.addStream(stream)
pc1.createOffer().then(function(desc) {
pc1.setLocalDescription(desc)
console.log("" + JSON.stringify(desc))
})
}
function error(err) {
console.log(err)
}
</script>
This is Seb, he wants to receive live stream from Alice using its offer (index.html)
<video id="video1" controls ></video>
<textarea></textarea>
<p onclick="finir()">Fini</p>
<script>
function finir() {
navigator.getUserMedia({audio:true, video:true}, success, error);
}
function success(stream) {
var champ = document.querySelector("textarea").value
var texto = JSON.parse(champ)
console.log(texto)
var vid2 = document.querySelector("#video1");
var pc2 = new RTCPeerConnection()
pc2.setRemoteDescription(texto)
pc2.createAnswer()
pc2.onaddstream = function(e) {
vid2.src = URL.createObjectURL(e.stream);
vid2.play()
}
}
function error(err) {
console.log(err)
}
</script>
Thanks for helping
Oh, if it would be so simple ;).
With WebRTC you also need some kind of signaling protocol to exchange offer/answer between the parties. Please check one of the many WebRTC samples available.
I have a bunch of nodes that will contain markup in an unpredictable structure. I want to be able to watch these nodes and see if the html of the any of the child nodes or their descendants change, no matter how slightly. If they do, then I want to fire an event.
Can I do this through dojo? I'm using 1.10, the latest one.
Thanks.
It sounds like you're looking for dom mutations. As far as I'm aware dojo does not provide an api for this, but they're pretty simple to set up. The problem is different browsers have different ways of doing this.
var observeNode = document.getElementById('observeMe');
// Check for vendor-specific versions of MutationObserver.
MutationObserver = (function() {
var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
for (var i=0, il=prefixes.length; i<il; i++) {
if (prefixes[i] + 'MutationObserver' in window) {
return window[prefixes[i] + 'MutationObserver'];
}
}
}());
// Sniff for MutationObserver support
if (MutationObserver) {
var observer = new MutationObserver(function(mutations) {
alert('Something changed!');
});
observer.observe(observeNode, {attributes: true, childList: true, characterData: true});
} else {
// Fall back to mutation events
if (observeNode.addEventListener) {
observeNode.addEventListener('DOMSubtreeModified', function() {
alert('Something changed!');
});
}
// IE8 and below has its own little weird thing
else {
observeNode.onpropertychange = function() {
alert('Something Changed!');
}
}
}
I currently have an issue implementing a simple Google Places Autocomplete input in a webview.
My issue seems to be related to a bug in ios7 where the blur event is triggered before the place_changed has been fired, thus the input field doesn't take the chosen value.
Here is the code (part of an AngularJS directive):
var newAutocomplete = function () {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function () {
scope.$apply(function () {
var place = scope.gPlace.getPlace();
if (!place || !place.geometry) {
return;
}
scope.location = {
coords: {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
},
address: element.val()
};
});
});
};
Any idea how to handle this? Delaying the onBlur event?
Thanks in advance.
[SELF-ANSWERED]
I just found out the problem was related to the use of the FastClick library.
This is what needs to be added in the page to make it work:
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks to can't tap on item in google autocomplete list on mobile for the solution!
I have some trouble with Jplayer. One block has two links to 2 mp3 tracks. Sing 1 and Sing 2. FF, IE, Safari and Chrome work with them by Jplayer correctly. But Opera dont.
$("#media01").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"/files/sing01.mp3"
});
},
swfPath: "/scripts/js/",
supplied: "mp3",
wmode: "window"
});
$('.popup-player a#media01').click(function(){
$("a#media02").removeClass('active');
$("#media02").jPlayer("pause");
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$("#media01").jPlayer("setMedia", {
mp3:"/files/sing01.mp3"
}).jPlayer("play");
} else {
$("#media01").jPlayer("pause");
}
});
// Second //
$("#media02").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"/files/sing02.mp3"
});
},
swfPath: "/scripts/js/",
supplied: "mp3",
wmode: "window"
});
$('.popup-player a#media02').click(function(){
$("a#media01").removeClass('active');
$("#media01").jPlayer("pause");
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$("#media02").jPlayer("setMedia", {
mp3:"/files/sing02.mp3"
}).jPlayer("play");
} else {
$("#media02").jPlayer("pause");
}
});
JS and JQuery - level bad :(
In Opera dont play tracks, or play one of this random, or play 0.5 sec of last
Thanks for answer.
Have you tried to set the fallback?
solution: "flash, html", // Flash with an HTML5 fallback.
or
solution: "html, flash", // HTML5 with an Flash fallback.