Quiero usar el chat de video de https://websitebeaver.com/insanely-simple-webrtc-video-chat-using-firebase-with-codepen-demo en reaccionar. el script funcionó bien cuando probé en css js html (sintaxis sin reacción) pero el script no funciona después de convertir para reaccionar

archivo script.js ubicado chatting public js script.js

y el archivo Video.js ubicado chatting src components Messages Video.js

Video.js (hice esto cuando hago clic en el botón, modal abierto. Y luego la videollamada debería funcionar)

import React from 'react'; import { Modal, Icon } from 'semantic-ui-react'; class Video extends React.Component { componentDidMount() { const script = document.createElement('script'); script.src = '../../../public/js/script.js'; script.async = true; document.body.appendChild(script); } render() { return ( {amp}lt;Modal trigger={{amp}lt;Icon name="video camera" color="grey" /{amp}gt;}{amp}gt; {amp}lt;Modal.Header{amp}gt;VideoCall{amp}lt;/Modal.Header{amp}gt; {amp}lt;Modal.Content image{amp}gt; {amp}lt;div className="videoChat"{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="css/style.css" /{amp}gt; {amp}lt;video id="yourVideo" autoPlay muted playsInline className="videoChat" /{amp}gt; {amp}lt;video id="friendsVideo" autoPlay playsInline className="videoChat" /{amp}gt; {amp}lt;br /{amp}gt; {amp}lt;button onclick="showFriendsFace()" type="button" className="btn btn-primary btn-lg" {amp}gt; {amp}lt;span className="glyphicon glyphicon-facetime-video" aria-hidden="true" /{amp}gt;{' '} Call {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Modal.Content{amp}gt; {amp}lt;/Modal{amp}gt; ); } } export default Video; 

script.js

 var firebaseConfig = { apiKey: 'I wrote this', authDomain: 'I wrote this', databaseURL: 'I wrote this', projectId: 'I wrote this', storageBucket: 'I wrote this', messagingSenderId: 'I wrote this', appId: 'I wrote this', measurementId: 'I wrote this' }; firebase.initializeApp(firebaseConfig); var database = firebase.database().ref(); var yourVideo = document.getElementById('yourVideo'); var friendsVideo = document.getElementById('friendsVideo'); var yourId = Math.floor(Math.random() * 1000000000); var servers = { iceServers: [ { urls: 'stun:stun.services.mozilla.com' }, { urls: 'stun:stun.l.google.com:19302' }, { urls: 'turn:numb.viagenie.ca', credential: 'I wrote this', username: 'I wrote this' } ] }; var pc = new RTCPeerConnection(servers); pc.onicecandidate = event ={amp}gt; event.candidate ? sendMessage(yourId, JSON.stringify({ ice: event.candidate })) : console.log('Sent All Ice'); pc.onaddstream = event ={amp}gt; (friendsVideo.srcObject = event.stream); function sendMessage(senderId, data) { var msg = database.push({ sender: senderId, message: data }); msg.remove(); } function readMessage(data) { var msg = JSON.parse(data.val().message); var sender = data.val().sender; if (sender != yourId) { if (msg.ice != undefined) pc.addIceCandidate(new RTCIceCandidate(msg.ice)); else if (msg.sdp.type == 'offer') pc.setRemoteDescription(new RTCSessionDescription(msg.sdp)) .then(() ={amp}gt; pc.createAnswer()) .then(answer ={amp}gt; pc.setLocalDescription(answer)) .then(() ={amp}gt; sendMessage(yourId, JSON.stringify({ sdp: pc.localDescription })) ); else if (msg.sdp.type == 'answer') pc.setRemoteDescription(new RTCSessionDescription(msg.sdp)); } } database.on('child_added', readMessage); function showMyFace() { navigator.mediaDevices .getUserMedia({ audio: true, video: true }) .then(stream ={amp}gt; (yourVideo.srcObject = stream)) .then(stream ={amp}gt; pc.addStream(stream)); } function showFriendsFace() { pc.createOffer() .then(offer ={amp}gt; pc.setLocalDescription(offer)) .then(() ={amp}gt; sendMessage(yourId, JSON.stringify({ sdp: pc.localDescription })) ); } 

e index.html

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8" /{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /{amp}gt; {amp}lt;meta name="theme-color" content="#000000" /{amp}gt; {amp}lt;script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="js/script.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;title{amp}gt;React App{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;noscript{amp}gt; You need to enable JavaScript to run this app. {amp}lt;/noscript{amp}gt; {amp}lt;div id="root"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="js/script.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
frangipani

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.

El método del ciclo de vida del componenteDidMount () generalmente se usa para obtener datos de una API, no para importar un archivo js. Simplemente importe su script.js en Video.js. También debe exportar las funciones que necesita en script.js y luego puede llamar a sus funciones en su clase agregando el nombre que especificó al principio. en el código a continuación solo exporto showFriendsFace () desde script.js y lo llamé en Video.js constructor:

 import React from 'react'; import { Modal, Icon } from 'semantic-ui-react'; import Script from './script' class Video extends React.Component { constructor(){ super(); Script.showFriendsFace(); } render() { return ( //your return code ); } } export default Video; 

y script.js debería verse así:

 //your script codes function showFriendsFace() { console.log("Hello World!"); } export default {showFriendsFace}; 
elahe karami

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.