I am looking for ways to do Audio call only in ApiRTC but cannot seem to do it right as the streams keep on appearing. Hoping someone could assist. Thanks in advance. Below is my code
startVoiceCall() {
//apiRTC.setLogLevel(10);
this.ua = new apiRTC.UserAgent({
uri: "apzkey:xxxx",
});
let registerInformation = {
cloudUrl: "https://cloud.apizee.com",
};
this.ua
.register(registerInformation)
.then((session) => {
this.isDisabled = false;
console.log("User registered with session: ", session);
session
.on("contactListUpdate", (updatedContacts) => {
console.log("contactListUpdate", updatedContacts);
})
.on("incomingCall", (invitation) => {
var answerOptions = {
mediaTypeForIncomingCall : 'AUDIO'
};
invitation.accept(null, answerOptions).then((call) => {
this.currentCall = call;
this.setAudioCallListeners();
this.onCall = true;
});
});
//session.allowMultipleCalls(true);
this.connectedSession = session;
});
this.checkPermissions();
}
When subscribing to a stream, you can pass SubscribeOptions as second parameter with :
conversation.subscribeToStream(streamId, { audioOnly: true })
ApiRTC reference : https://dev.apirtc.com/reference/Conversation.html#subscribeToStream
This will make the subscriber receive audio only.
Related
So, i have a very basic PeerJS System set up, but when i even try to call somebody sometimes it doesn't send any data, it just logs to console to following:
WebRTC: ICE failed, your TURN server appears to be broken, see about:webrtc for more details
Can you tell me why? Thanks!
let peer = new Peer(userData.userid, {
host: '/',
port: 3001,
});
let userStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
})
userStream.getTracks().forEach(function(track) {
track.stop();
});
Outgoing:
this.callcenterservice.callStarted.subscribe(async (frid: string) => {
if (frid !== "" && frid !== undefined) {
// outgoing call
let call = peer.call(frid, userStream)
call.on('stream', (streamData) => {
console.log("ACCEPTED",streamData)
})
this.http.post<any>(`${environment.api_url}/getUserById`, {
userid: frid
}).subscribe((result) => {
this.queueCall.userData = result;
this.queueCall.type = "outgoing";
}
})
Incoming:
peer.on('call', async (call) => {
console.log('incoming call')
let frid = call.peer;
// incoming call
this.queueCall.type = "incoming"
// ACCEPT CALL
setTimeout(() => {
let answerBtn = <HTMLButtonElement>document.querySelector("#acceptCall");
answerBtn.addEventListener('click', () => {
call.answer(userStream)
})
}, 100);
call.on('stream', (stream) => {
console.log("STREAM",stream)
})
})
In response to a click handler, i currently perform a:
axios.get("http://whatever.com/itemId").then(response => {
console.log(response);
});
theoretically, a user might click several times extremely quickly in succession. however, I need to process responses in the same order as the requests are made, and these responses are not always ordered.
Can anyone give any pointers?
Came up with the following, which seems to work well. Maybe such a thing should be part of the library itself. Hope others find it useful.
import axios from 'axios';
class OrderedAxios {
constructor() {
this.promises = []
}
get(url) {
var outsideResolve;
var outsideReject;
let promise = new Promise((resolve, reject) => {
outsideResolve = resolve;
outsideReject = reject;
});
promise.resolve = outsideResolve;
promise.reject = outsideReject;
this.promises.push(promise);
axios.get(url)
.then(response => {
promise.response = response;
this.processPromises();
})
.catch(error => {
promise.error = error;
this.processPromises();
})
return promise;
}
processPromises() {
let continueProcessing = false;
do {
continueProcessing = false;
if (this.promises.length) {
let promise = this.promises[0];
if (promise.response || promise.error) {
this.promises.shift();
if (promise.response) {
promise.resolve(promise.response);
} else {
promise.reject(promise.error);
}
continueProcessing = true;
}
}
} while (continueProcessing);
}
}
export default OrderedAxios;
I am trying to test a real-time data connection between peers using RTCMultiConnection.
Setting up a session/room seems to work, but once it has been made, peers cannot seem to join. If I run this function again from another browser, while a session is opened, it still says the room does not exist and it opens up a new one, rather than joining in.
The channel and session id's are identical, so why does the peer not find the session?
function makeOrJoinRoom(id){
channelid = 'channel'+id;
roomid = 'room'+id;
sessionMedia = {audio: false, video: false, data: true};
var connection = new RTCMultiConnection(channelid);
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.checkPresence( roomid, function(roomExists, roomid) {
alert('checking presence...');
alert('Room exists='+roomExists);
if(roomExists) {
alert('I am a participant');
connection.join({
sessionid: roomid,
session: sessionMedia
});
} else {
alert('I am the moderator');
connection.session = sessionMedia;
connection.open({
sessionid: roomid
});
}
});
}
Please replace your function with this:
function makeOrJoinRoom(roomid) {
var connection = new RTCMultiConnection();
connection.session = {
data: true
};
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
alert('checking presence...');
connection.checkPresence(roomid, function(roomExist, roomid) {
alert('Room exists=' + roomExist);
if (roomExist === true) {
alert('I am a participant');
connection.join(roomid);
} else {
alert('I am the moderator');
connection.open(roomid);
}
});
connection.onopen = function(event) {
alert('WebRTC chat opened!');
};
}
// call above function like this
makeOrJoinRoom('your-unique-room-id');
I have tried numerous ways of adding a cast button to video.js player but cannot do this for the life of me. Can anyone help?
I'm using the hellovideo cms for videos and need plugins added but have no idea about jquery etc.. so please if anyone can help?
There is a really nice plugin for this: https://github.com/kim-company/videojs-chromecast
Just follow the setup instructions (adding the js and css to your page).
I tried kim-company/videojs-chromecast. It only works with an older version of videojs, I used 5.4.6. It's quite buggy. Another I tried was benjipott/video.js-chromecast, which claims to work with newer videojs, but I didn't like it at all. So I gave up on videojs, I always found the native HTML5 video player more reliable and easier to work with (videojs just wraps this anyway). For the chromecast stuff, I provide a nearby button that links to chromecast.link, where I wrote a full web chromecast sender app. Pass the video and poster URL in the fragment, per this example:
https://chromecast.link/#content=http://host/some.mp4,poster=http://host/poster.jpg,subtitles=http://host/webvtt.srt
I recently answered this question, you can check it out here: How to implement chromecast support for html5 player for more information
var session = null;
$( document ).ready(function(){
var loadCastInterval = setInterval(function(){
if (chrome.cast.isAvailable) {
console.log('Cast has loaded.');
clearInterval(loadCastInterval);
initializeCastApi();
} else {
console.log('Unavailable');
}
}, 1000);
});
function initializeCastApi() {
var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
sessionListener,
receiverListener);
chrome.cast.initialize(apiConfig, onInitSuccess, onInitError);
};
function sessionListener(e) {
session = e;
console.log('New session');
if (session.media.length != 0) {
console.log('Found ' + session.media.length + ' sessions.');
}
}
function receiverListener(e) {
if( e === 'available' ) {
console.log("Chromecast was found on the network.");
}
else {
console.log("There are no Chromecasts available.");
}
}
function onInitSuccess() {
console.log("Initialization succeeded");
}
function onInitError() {
console.log("Initialization failed");
}
$('#castme').click(function(){
launchApp();
});
function launchApp() {
console.log("Launching the Chromecast App...");
chrome.cast.requestSession(onRequestSessionSuccess, onLaunchError);
}
function onRequestSessionSuccess(e) {
console.log("Successfully created session: " + e.sessionId);
session = e;
}
function onLaunchError() {
console.log("Error connecting to the Chromecast.");
}
function onRequestSessionSuccess(e) {
console.log("Successfully created session: " + e.sessionId);
session = e;
loadMedia();
}
function loadMedia() {
if (!session) {
console.log("No session.");
return;
}
var videoSrc = document.getElementById("myVideo").src;
var mediaInfo = new chrome.cast.media.MediaInfo(videoSrc);
mediaInfo.contentType = 'video/mp4';
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.autoplay = true;
session.loadMedia(request, onLoadSuccess, onLoadError);
}
function onLoadSuccess() {
console.log('Successfully loaded video.');
}
function onLoadError() {
console.log('Failed to load video.');
}
$('#stop').click(function(){
stopApp();
});
function stopApp() {
session.stop(onStopAppSuccess, onStopAppError);
}
function onStopAppSuccess() {
console.log('Successfully stopped app.');
}
function onStopAppError() {
console.log('Error stopping app.');
}
as a code template doing it like this,
.controller('PushNotificationsCtrl', function ($scope, $cordovaPush) {
var androidConfig = {
"senderID":"372433177444",
"ecb":"onNotification"
};
$cordovaPush.register(androidConfig).then(function(result) {
// Success!
$scope.pushSuccess = result
}, function(err) {
$scope.pushSuccess = err;
});
I manage to successfully get an RegID from GCM. But then how do I manage onNotification from androidConfig ?
i found the solution.
instead of doing this :
var androidConfig = {
"senderID":"372433177444",
"ecb":"onNotification"
};
I do like this :
var androidConfig = {
"senderID":"372433177444",
"ecb":"window.onNotification"
};
then
window.onNotification = function(e) {
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
console.log("Your regID is : " + e.regid);
}
break;
case 'message':
// this is the actual push notification. its format depends on the data model from the push server
console.log('message = '+e.message);
angular.element(document.querySelector('#yata')).html(e.message);
break;
case 'error':
console.log('GCM error = '+e.msg);
break;
default:
console.log('An unknown GCM event has occurred');
break;
}
};
all work as expected now :)
Change the following code to ng-cordova.js:
//config.ecb = 'angular.element(' + injector + ').injector().get(\'$cordovaPush\').onNotification';
config.ecb = "angular.element(" + injector + ").injector().get('$cordovaPush').onNotification";
and then set the options configuration object as follows:
var options = {
android: {
senderID: "789175757493",
ecb:"onNotification",
forceShow: true
},
}
It will display notifications in notification drawer when application is opened.