search

philnash / twilio-video-react-hooks

A video chat application built with Twilio Video and React Hooks
MIT License
110 stars 61 forks source link

problems on hosting on netlify server #42

Open nour-gamal opened 3 years ago

nour-gamal commented 3 years ago

I am trying to host the project on netlify and i'm getting that error allover the time

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

are their any way to deploy it on netlify?

philnash commented 3 years ago

I'm sure there is a way to deploy this to Netlify, but I haven't tried that myself.

This repo contains both a front end React application as well as a server application that generates access tokens and is written with Express. I believe Netlify likely handles building the React application, but you would need to change the Express application to work with Netlify Functions instead.

I presume the syntax error is because the application is requesting a token from the back-end and getting a non-JSON response back.

If you can translate the endpoint that creates a token into a Netlify Function and update the React application to fetch the token from your Netlify Function endpoint, the application will probably work.

Let me know how you get on with that.

jiftuq commented 3 years ago

Can you use Twilio serveless function inlieu of the server part? And how do you add screensharing with react hooks?

philnash commented 3 years ago

@jiftuq You can absolutely use a Twilio Serverless function instead of the Express server. If you go down this route, we have a template function for creating a Video token that you might find useful.

This is a good blog post that introduces adding screen sharing in Twilio Video, but it does not use React. For a more involved React example, you can check out the Video team's fully featured React Video chat. While I haven't had the time myself to dig into how it works (I'm currently on holiday) you can see that getDisplayMedia is used in the useScreenShareToggle custom hook here. Hopefully that gives you an idea of how to work with it.