eyeson-team/js-docs

eyeson (web client) JavaScript Documentation

js-docs's Issues

Error 500 when upload image file on layer

Hi,

I got error 500 from your server when i try to add an image to layer:

My function:

addLayer() {
  let formData = new FormData();
  formData.append('file', image1);
  formData.append('url', 'https://eyeson-team.github.io/api/images/eyeson-overlay.png');
  formData.append('insert[title]', 'test');
  formData.append('insert[content]', 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ');
  formData.append('z-index', 1); \n
  axios.post('https://api.eyeson.team/rooms/${this.accessKey}/layers\', formData,{ headers: {'Content-Type': 'multipart/form-data' }})
}`

return empty response with code 500 with or without FormData.

What's the right way to use this feature ?

I have also tried to use the 'url' field with your example URL, the others field appears but not this one.

Finaly, when i create a custom room from your API and a new user join, the camera are not splitted but i see only the user's one.

my code:

• create new room and enter (admin):

  createRoom() {
  console.log('create room')
  const response = await axios.post(`https://api.eyeson.team/rooms?user[name]=${this.adminName}`, {}, {
    headers: {
      'Authorization': API_TOKEN
    }
  })
  this.accessKey = response.data.access_key
  

  }

  startStream() {
    console.log('start stream')
    eyeson.onEvent(event => {
      console.debug('[App] Ignore received event:'+ event.type, event);
      if (event.type !== "accept") {
        return;
      }
      let remoteVideo = document.getElementById("remote-video")
      this.addVideo(remoteVideo, event.remoteStream)
      if(event.connectionStatus !== 'connected') {
        return ;
      }
    });
    eyeson.start(this.accessKey);
    }
  

`
guest access:

createGuestUser() {
  console.log('create guest user')
  const response = await axios.post(`https://api.eyeson.team/guests/${this.$route.query.guest}`, {
    name: this.guestName
  })
  if (!response.data.access_key) {
    return alert('something was wrong during room creation')
  }
  this.accessKey = response.data.access_key
}

and the startStream above

Thanks for your help !

WebRTC: ICE failed, your TURN server appears to be broken, see about:webrtc for more details

Hi,

I'm creating a room server side, passing the access_key to front end. Then:

<script type="text/javascript">
    $( document ).ready(function() {
      var eventHandler = function(event) {
        var actions = {
          accept: function() {
            let video = document.querySelector("video");
            video.srcObject = event.remoteStream;
            video.play();
            eyeson.default.send({
              type: 'update_stream',
              video: true, // yes to video
              audio: false // no to audio
            });
          },
          default: function(event) {
            console.debug('[eyeson]', 'event received:', event);
          }
        };
        return (actions[event.type] || actions['default'])(event);
      };
      
      eyeson.default.onEvent(eventHandler);
      eyeson.default.start('<?=$access_key?>');
    });
</script>

Nothing is displayed in the video container (I do have a

WebRTC: ICE failed, your TURN server appears to be broken, see about:webrtc for more details

Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. conference:310

A connection is already set. If you are trying to start a new session you have to end the current one first.

Can you help ? Thanks!

Screen capture and video simultaneously

Hi, When I started the screen capture session via the JS library, it stopped the camera, and I noticed that there's an empty gray block overlayed on the shared screen (maybe due to the disabled camera?). I was looking for a way to share the camera stream and the shared screen/tab/application window, is it possible to do so?

version: 1.4.2
I started the screen capture session using:

eyeson.send({
    type: 'start_screen_capture', 
    audio: true, 
    screenStream: stream, //the captured stream
    screen: true
});

stream_update should mention that either local or stream receives the update

https://eyeson-team.github.io/js-docs/events/#stream_update seems behave wrong if you update stream AND local. you need to check if one of those has data, right?

We did it like this:

if (event.type === "stream_update") {
	const local = event.localStream;
	if (local) {
		setState((prevState) => ({
			...prevState,
			local: local,
		}));
	}

	const stream = event.stream;
	if (stream) {
		setState((prevState) => ({
			...prevState,
			stream: stream,
		}));
	}
	return;
}

When we tried updating them both in one step it was not working correctly.

Would be great if the documentation would mention this.

Screen sharing doesn't end

Hi,

I'm using
eyeson.default.send({ type: 'start_screen_capture', audio: myaudio, screenStream: null, screen: true });
to start a screen share succesfully, and that works fine. Trying to stop it is less succesful though.

eyeson.default.send({ type: 'stop_presenting' });
doesn't seem to do anything, I would have expected it to switch off the screen share and switch back to the webcams of people in the room, or would something else need to be run? Looking at the console window it clearly posts the command through,
EventHandler::send {type: "stop_presenting", _src: "client"}
EventHandler::send {type: "presentation_ended"}
both end up attached to Logger.js

eyeson.default.send({ type: 'start_stream', video: true, audio: true, screen: false});
seems to work as a stopgap, but that seems to get some of the clients into a bit of a weird loop unable to connect their webcams back to the chat until somebody else joins/leaves or refreshes the page

As a 'possibly' related note, I am having to use eyeson.default instead of just eyeson for all of the calls. I saw another example at #23 that initiated the eyeson call via
var eyesonModule = window.eyeson;
var eyeson = eyesonModule.default;
which presumably does the same thing longer term? Does eyeson have to be initiated separately somehow?

For the record here I am not using react, just linking in the eyeson.js file directly, using the version directly from an npm install

quick test devices

Hi,

is it possible to implement a quick test like yours with your api's? I havent found anything to be able to do it.

thanks

Cannot start conference software as per examples/index.html

Hi there,

I hope you are doing well!

I am encountering a small problem, and cannot find the appropriate documentation to help me.

When I use the index.html as a guide to get started developing my own GUI, and when I look at the React example on github, I understand that I need to call eyeson.start() with a room Access Key that is returned through the API. I retrieved this, and for the instance I'm trying to work, it is NMTtXnaQYwZxmfknL7NPDCDe.

Then, in the JS / Browser, I have registered an event handler through eyeson.onEvent. The first event it receives is a "fetch_room" event that I simply log to the console, and return (as per the example index.html). The second event that the event handler receives is "access_denied", and (obviously) nothing happens.

However, when I browse to the provided Room URL (ending up on eyeson.team), the conference software starts correctly, etc.

This leads me to think that I am missing a crucial step or two. Can you kindly guide me in resolving this initial hurdle, please?

Thank you and best regards,
Guus

What are those ice_failed events?

In a call with the team the image froze several times and those freezing moments correlated to error logs of {"type":"error","name":"ice_failed"} event.
I cannot find anything about the specific errors that can occur in your documentation under https://eyeson-team.github.io/js-docs/events/#error-handling-and-notifications.

I had a look at the codebase and you reference this bug in the appropriate section https://bugs.chromium.org/p/chromium/issues/detail?id=982793&q=ice%20failed&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

So were these connection problems? Do they need to be handled better? The page needed to be refreshed... What happened exactly? Can it be simulated somehow (like disconnecting from wifi etc.)?

Example of how to change video/audio/mic.

Could you maybe provide a full example of how to change the microphone/camera/output?

Currently I'm using the devicemanager, which does not appear to work consistently. Also for the output device it seams to not work at all.

I tried to set the devices with the device manager and also even tried to send the 'start_stream' event.

So it would be aswesome if you could maybe provide a example of how to change audio/video/mic.

Share Screen using javascript

How do i share screen using javascript library.

Error: eyeson.onEvent is not a function

Hello,
Even the eyeson.js file is loaded successfully, I'm having the following error in the console (from the example file too):

Uncaught TypeError: eyeson.onEvent is not a function
    at index.html:20

Guest user joining room issue

Hello,
I am trying to make a guest user joining a created room but after my script execute the following code: eyeson.default.join({ audio: true, video: true });

I get the following error: status_code: 403, reason_phrase: "Forbidden"
and the following response: {type: "error", name: "session_failed"}

Thanks for your help

Create a room through js

Can I create a room using JS?
I have an online educational site and I wanted to use eyeson in it. All I want is to create a room using my backend only that will generate a link and any student with the link could join the classroom.

In short, A faculty can create a room using my website which would be internally using your API's that will generate the joining link.
I read your documentation and I am not sure if there's such a way to integrate with my python and angular webapp?

Change Audio Settings during ScreenSharing

Hy,

is there a way to change the audio input source during my own screen sharing? If I send the event "change_stream" during a screencast, the screencast will continue on client-side, but the remotestream shows the selected camera. No "presentation_ended" event will be triggered. Can you please help me with this?

What did I do for this to happen:

@eyeson.send({ type: 'start_screen_capture', audio: true, screenStream: null, screen: true })
//  ...
@eyeson.send({ type: 'update_stream', audio: config.audio_enabled, video: config.video_enabled })

What did I expect to happen:
Audio Input-Source will change, but Videostream keeps the ScreenSource.

What did happen instead:
The ScreenCapture continues in the browser, but in the remoteStream my Webcam is shown again. No event "presentation_ended".

Typescript Support/Type Definitions

Good Day,

Is there typescript support for the eyeson API or any type definition?

One on one video call

I would like to create a meeting with two participants who can see each other (a 1:1 call). However, when using the JS API to connect to a room the remote stream I get contains both the local and the remote video side by side.

When using the eyeson Web GUI, it works as expected (i.e. fusion mode is disabled) with two participants. Each user can only see the other user in the remote stream.

How can I get the same result as the Web GUI using the JS API?

streaming to youtube

Hello
Video is not streaming to youtube. I have created a broadcast using eyeson php and received true in response in the server side. It says "Upcoming" in youtube platform.
In addition, after creating broadcast via server, i made a send call using javascript

eyeson.send(
{
 type: 'start_youtube',
  broadcastId,
  streamUrl
	}
);

I received 406 error with this message
{"error":"Platform youtube is already in use. You can only have one stream per platform."}

Youtube still says scheduled and upcoming.

how do we initiate youtube live streaming

Can users' audio / video be muted centrally

Hi there,

not so much an issue, as it is a feature request or feature question.

I see in the JS documentation, that each user could mute his / her audio or video feed. Is there a possibility for a central user to do this as well?

I see that I can call eyeson.send({ type: "change_stream", options: { audio: false, video: true } }) in order to mute the audio stream of the current user, however it would be nice, if I could also submit a user ID (obtained through fetch_room or add_user) in order to provide a central panel for the meeting organizer to mute somebody's audio / video stream.

Is this maybe already possible?

Best regards,
Guus

Mobile - Firefox issue

Hi!
Device and browser info:
Redmi Note 11 Pro 5G with Android 12 and MIUI Global v13.0.6 - Firefox 114.1.0

The problem is that other users can't hear and see user of this device. And also Redmi user can hear voices of other users but can see them.

Thanks in advance

eyeson start is not a function in js library

I am trying to handle all eyeson event using basic javascript. I have installed eyeson js using npm and referred to it in html file like this

<script type="text/javascript" src="./node_modules/eyeson/dist/eyeson.js"></script> and alsow tried creating a bundle using browerify, same issue.

When I call eyeson.start(), I am getting an error
Uncaught TypeError: eyeson.start is not a function

Screen sharing - full screen mode

Hello !

I am creating a room video with 4x3 aspect ratio. When someone tries to share the screen, I can't show the video as big as possible. Please check the attached screenshot, you can see empty areas in the streaming video and this prevents me from sharing the wide screen and showing it as big as possible.

Are there any settings when sending an event to share screen or update the stream with local stream (because it's just clear video without any aspect ratio) or something else?

Thank you in advance,
Vahan

Never received connected state

Hello,

1. After calling start, i never received connected status. I am constantly receiving room_ready event type
2. How do i get my local stream after start is called.
3. Can I start youtube stream without anyone joining?
4. Didn't receive accept event type when i am using another browser to join.

Switched from start to connect and receiving configuration error
{code: 1, name: "CONFIGURATION_ERROR", parameter: "uri", value: "[email protected]", message: "Invalid value "[email protected]" for parameter "uri""}

User grid layout

Is there a way to handle the meeting's user layout? Maybe reorder by user participation or manually via a GUI...

And what about layouts bigger than 3x3? Is it possible to show more than 9 users at the same time?

Show participants while screen sharing

Is there a way to show participants while screen sharing? Right now, when you screen share, the only thing that is visible is the shared screen and other participants camera feed are hidden.

Exit meeting with `bye`

when my network is not stable the meeting is exited with reason = "bye",

how can i handle it?

stream video after joining with video disabled

When I join a conference, with eyeson.start(accessKey, { video: false, audio: false }), I`m not able to activate video streaming afterwards.

I`ve tried it with these three options:

1. Using the StreamHelpers, as is necessary with audio
   StreamHelpsers.enableCamera(eyeson.session.localStream)

2. Using the change_stream event, as poorly documented in this repository
   eyeson.send({ type: 'change_stream', options: { video: true })

3. Building a new stream using MediaStreamBuilder
eyeson.session.setStream(await new MediaStreamBuilder({ video: true, audio: true }))

Am I missing something, or is one of the above the "official" way of enabling video

I havn`t had any problems with StreamHelpers.enableCamera(...)/StreamHelpers.disableCamera(...) when the stream was joined with { video: true, ... } options

how to show the controls

i tried the eyes on js.lib
in jquery it works fine, but with out any control only the video of the caller and the caller only see my video
no controls are there only my name and the video
how can i show the controls (mute/ share screen /record/ chat )

Set on DeviceManager does not state that it wants a deviceId

From reading https://eyeson-team.github.io/js-docs/utilities/#device-manager someone could assume that for e.g.
deviceManager.setAudioInput(microphone); // switch microphone
you should pass in the microphone object. I checked the code from bitbucket and saw that the parameter is called deviceId and that's what is being accepted. Otherwise you run into an OverconstrainedError and such things.

Improvement suggestion:
deviceManager.setAudioInput(microphone.deviceId); // switch microphone
-> and same for the other devices

eyeson Chrome Extension link is down

here https://github.com/eyeson-team/js-docs/blob/main/content/screen-capture/index.md you mention the link to the eyeson chrome extension which points here https://chrome.google.com/webstore/detail/eyeson/bbdcikainjamgglhllfjbkeibiiclnck and the link is down

Js library not working

Hello! Please ensure your meeting is not expired. Therefor only join a meeting if the participant is going to connect immediately, otherwise the meeting will expire after a short period of time. The meeting connected event is received as accepted, you can find this also in the getting started example in the documentation. The event received also provides the localStream on demand, however please note that showing the local stream is only required when using SFU mode so you have to either disable SFU mode or remove the local stream having more than two participants. I'm not sure about your question starting a broadcast without stream but I guess you don't want the participant having to start it. You can create a generic user (that does not need to join) and use the access key to start an RTMP stream. Please double check that you have unique access keys for each participant and the meeting does not expire. The start method is the more convenient method as it does all initialization as well. Best wishes!

Originally posted by @unused in #22 (comment)

This is my current javascript code for start

var state = {local: null, stream: null, connecting: false, audio: true, 
	video: true, screen: false, facingMode: "user",recording :false, 
	streaming:false, youtube:false, facebook:false};
var eyesonModule = window.eyeson;
var eyeson = eyesonModule.default;
var start = function() {
	state.connecting = true;
	var access_key= document.getElementById("access_key").value;
	eyeson.onEvent(handleEvent);
	eyeson.start(access_key);
}

 function handleEvent(event) {
 	console.log('[App] Ignore received event:'+ event.type);
  	console.log(event)
	
    if (event.type !== 'accept') {
      return;
    }

    var div = document.getElementById("video-div");
    state.local = event.localStream;
    add_video(div, state.local);
    state.stream = event.remoteStream;
    add_video(div,state.stream);
    state.connecting = false;
}

I am getting access key by using eyeson php library

$eyeson = new Eyeson($api_key);

$room = $eyeson->join($username, $roomname, array("broadcast_available"=> true, "sfu_mode"=> "disabled"));

$access_key = $room->getAccessKey();
$guest_token = $room->getGuestToken();

Can you please guide me how to start the video conference from this state and also how will a participant join to this meeting from my site (not using eyeson link)

Implement eyeson JS into asp.net MVC

Hi,

I am trying to implement the eyeson js video calling into my existing asp.net mvc application. can someone guide me in this?

I already contacted Ekaterina Melnikova from sales team. Based on her response only I am creating this ticket.

Regards,
Venkat

Eyeson Flow

My Scenario:
In the backend I create a room and return the access_key to the frontend so I can join the person that started the room with the js-APIs eyeson.start(accessKey).
All other participants of my room are generated on demand in the backend and as with the room creation the access_key for the guest user is returned to the guest users frontend application.

My Questions:

1. Say a guest users computer crashes - how do I rejoin the presentation? The provided access_key will be invalid by the time the user is ready rejoin. Is there a way of refreshing the access_key or do I have to create a new guest user for the presentation every time? And if I have to create them every time how to remove the old one from the room?
2. How to correctly end a session (frontend)? I tried it with eyeson.destroy() but when I start a new room, close it with eyeson.destroy() afterwards and start a new room I get an "you have to terminate the old session first" error.
3. When I do not end the session on purpose but for example the browser crashes eyeson would reconnect to the session when I open the page again - how do I reconnect the video stream when no accept event is received
4. is there something wrong with the REGISTER sip:integrations.visocon.com SIP/2.0 and directly after that SIP/2.0 401 Unauthorized loggings? can I ignore them or does the Unauthorized Response tell me there is something not configured the way it should be

How to leave a conference room

Hi there,

the documentation for the JS library talks about two events when the user "has disconnected" from the room (type "disconnect") and the user "has left" the room (type "remove_user"). The documentation, however, does not clarify what call to make in order for a user to disconnect from a room.

Further, the documentation allures to the fact that we need to make sure that "If providing a presentation feature you should ensure to close any active presentation held by this user, and on demand remember to restore on reconnect.", however it does not indicate how this can be ensured.

Could you guide me in the right direction, please?

Best regards
Guus

How to end a conference for all participants

Hi there,

what calls would one need to make to the API (via PHP or JS) in order to close a conference for all participants, please?

Best regards,
Guus

Share screen or file using the javascript Library

Hello,
I saw that it is possible to catch a "podium" event when a participant is starting to share his screen or a file.
I would like to send this event using your library so that a user can share a file from our website, but it seems not possible?
thanks

API source on GitHub

Would it be possible to publish the source of the JS api onto GitHub?

As there are no typings and there arent any end-to-end integration examples in the documentation it can be really hard figuring out how the api is meant to be used. Moreover it would open up to possible community contributors

Extract Data / Reporting

Hi! I'm curious about the reporting aspect of your platform.

We need to extract data about calls started via the api

• Total call duration of our api key via an api call
• Call duration after the call
• Total call duration somehow per room
• Ideally a batch call for several room keys
• Maybe also amount of participants would be helpful

Is there anything about this in the documentation or if not could you add it? We need some kind of reporting.

Thanks!

Video Layout issue. Grey boxes around the video

1. Eyeson showing grey border around the video. How can we get an optimal view without the grey borders.
2. And also the quality of the video seems low even though our wifi is stable. Do we set anything in the configuration to avoid any data loss
3. How can we stack videos top to bottom when second person joins instead of horizontal

Please see the image below
right side is from mobile and has a grey background. How do we fix this. Left side is from desktop

---

Audio issue in React application

Hi,

I'm trying to integrate the Eyeson library into a React application designed to function as a broadcast platform with one host and multiple audience members. While I've successfully implemented functionalities to initialize the stream as a host and join as an audience member, I've encountered an issue with audio specifically when joining as an audience member.

Even after disabling the microphone both before and during the audience member session join, audio from the microphone seems to be active in the stream and it appears as being used in the browser tab. I have tried:

• Disabling the audio and video in the eyeson.start() function:
  eyeson.onEvent(handleEvent);
eyeson.start(token, { video: false, audio: false, });
• Disabling audio and video access using DeviceManager after joining the session:
  deviceManager.updateWithOptions({ video: false, audio: false, });
deviceManager.storeConstraints();
• Disabling audio and video using StreamHelpers in the accept event:
  StreamHelpers.toggleAudio(event.localStream, false);
StreamHelpers.toggleCamera(event.localStream, false);

Unfortunately, these attempts haven't resolved the problem.

Compile fails when Eyeson JS Library imported in Angular 11 app

Hi,
I'm developing web app using Angular 11.

I installed Eyeson JS library using npm and imported it in the component named “meeting” in my Angular 11 app.

installation:
npm i --save eyeson

usage:
import eyeson from 'eyeson'
(./src/app/meeting/meeting.component.ts)

Then an error message was displayed on my VSCode and I can’t compile my app:

Could not find a declaration file for module 'eyeson'. 'c:/Users/koezu/Documents/test-environment/test-eyeson/eyeson-test-app/node_modules/eyeson/dist/eyeson.js' implicitly has an 'any' type. Try npm i --save-dev @types/eyesonif it exists or add a new declaration (.d.ts) file containingdeclare module 'eyeson';`

Here’s my app repository:
https://github.com/koezukar/eyeson-test-app

What can I do to compile my app and to embed meeting in my Angular app?

2 participants - show their names

Hello !
I have integrated eyeson with VUE3. Everything works fine.

But one question: how to show members names when only 2 members have joined?
Are there any settings when creating a room or something else?

Thank you in advance,
Vahan

Prevent split screen

Hi,

is it somehow possible to prevent a split screen for the remoteStream if someone joined the room, where you can see both users at once. For our application it is only possible that 2 users join the room, therefor we might want to position the screens in another way.

Browsing away from and back to video conference page

Hi there,

I found that if a user browses away from the page that shows the video conference, that user's video and audio stream are still active (which is a Good Thing(TM)!). How could I detect that the user is still an active user and reconnect the video stream correctly when the user browses back to the video conference page? Just setting up a new participant for the room obviously joins the same person for a second time...

Thank you for providing me with some clues as to how to do this ;-)

Best regards,
Guus

Firefox - getting session_failed event

Hi,

On Laptop, Firefox (PC), I'm getting these events:

1. {"type": "connection": connectionStatus": "ready"}
2. {"type": "broadcasts_update", "broadcasts": []}
3. {"type": "disconnect"}
4. {"type": "error", "name": "session_failed", "code": "TypeError"}
5. {"type": "disconnect"}

But on chrome it's ok.
What does the 4th event mean and how to solve it?