Call the Web Component in React, but no display

How to implement?
1

I try to import and call the Web Component(Openvidu Call) in at react.JS

After I click the Join button, the Openvidu-webcomponent is not display

image
image1184×390 59.8 KB

The code I use the openvidu tutorial one and do some modify (Change the ajax to axio)
the backend server is can receive the axio request and OpenVidu server also receive it.

New user only can put one screenshot, if need more info pls let me know,
Thanks .

2

Already solve this error, is the CORS policy block the request,
and can display the Preparing session, but keep loading.
Console log is here.
image

3

Have you run the webcomponent tutorial?

Are you capable to make it work?

4

Have you run the web component tutorial?

Yes, I go though it and it work.

Are you capable to make it work?

I trying to do it, and for now I can get token from OpenVidu and assign it to the web Component.

If I manually to assign the token (which I get it from Postman), and it work.

but if trying to make a axios request then will happen this error.

image
image1392×330 28.5 KB


import "./OpenVidu/openvidu-webcomponent-2.24.0"
import "./OpenVidu/openvidu-webcomponent-2.24.0.css"
import "./OpenVidu/openvidu-browser-2.24.0"
import axios from "axios";
import {useEffect, useState} from "react";
import async from "async";



function App (){

    useEffect(() =>{
        const webComponent = document.querySelector('openvidu-webcomponent');
        console.log(webComponent);
        webComponent.addEventListener('onSessionCreated', (event) =>{
            const session = event.detail;
            session.on('connectionCreated', (e) => {
                console.log("connectionCreated", e);
            });

            session.on('streamDestroyed', (e) => {
                console.log("streamDestroyed", e);
            });

            session.on('streamCreated', (e) => {
                console.log("streamCreated", e);
            });

            session.on('sessionDisconnected', (event) => {
                console.warn("sessionDisconnected event");
                webComponent.style.display = 'none';
            });

            session.on('exception', (exception) => {
                console.error(exception);
            });
        });

        webComponent.addEventListener('onJoinButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarLeaveButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarCameraButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarMicrophoneButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarScreenshareButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarParticipantsPanelButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarChatPanelButtonClicked', (event) => { });
        webComponent.addEventListener('onToolbarFullscreenButtonClicked', (event) => { });
        webComponent.addEventListener('onParticipantCreated', (event) => { });


    },[])


    async function createToken(sessionId) {
        console.log("Start createToken " + sessionId)
        const config = {
            method: 'post',
            url: 'http://localhost:4443/openvidu/api/sessions/' + sessionId + '/connection',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + btoa('OPENVIDUAPP:' + 'MY_SECRET'),
            }
        };

        const res = await axios(config)

        return res.data
    }



    async function getToken(sessionId) {
        const id = await createSession(sessionId);
        return createToken(sessionId);

    }

     async function joinSession() {
        debugger
         const sessionId = "AAA-BBB-CCC";


         console.warn('SESSION ID', sessionId);

         var promiseResults = await Promise.all([getToken(sessionId), getToken(sessionId)]);

         console.warn('promiseResults', promiseResults);

         var tokens = {webcam: promiseResults[0], screen: promiseResults[1]};

         var webComponent = document.querySelector('openvidu-webcomponent');
         webComponent.tokens = tokens;
     }

     function createSession(sessionId) {
        console.log("createSession ",sessionId)
        const data = JSON.stringify({
            "customSessionId": sessionId
        });

        const config = {
            method: 'post',
            url: 'http://localhost:4443/openvidu/api/sessions',
            headers: {
                'Content-Type': 'application/json',
                'Authorization':'Basic ' + btoa('OPENVIDUAPP:'+'MY_SECRET'),
            },
            data: data
        };

         axios(config)
            .then(function (response) {
                console.log(response.data);
                return response.data
            })
            .catch(function (error) {
                console.log(error);
            });

    }

    return (
      <>
          <input type={"button"} value={"Join"} onClick={joinSession}/>
    <openvidu-webcomponent style={{height:"100%"}}></openvidu-webcomponent>
      </>
  )
}

export default App;

Here is my code,
I really thanks for your helping and reply

5

I already found out, and it work!.
I forget to call get the token.

var tokens = {webcam: promiseResults[0].token, screen: promiseResults[1].token};

Thanks your amazing project.

1 Like
6

I wanna contribute it to openvidu-tutorial for how to using web component in react.
do you think it useful?
if yes, I try to pull request for it
Thanks

7

You can do a PR and we will review it
Thank you.