音频在twilio视频聊天中显示为禁用

时间:2019-01-17 09:13:41

标签: javascript reactjs twilio

我正在尝试与twilio建立视频聊天。我可以打开摄像头并运行视频,但是无法使音频正常工作。选择控件时,可以放大视频和图片到图片的模式,但不能控制音频。

这是怎么看

enter image description here

这是代码

function App() {
  let localMediaRef = React.useRef(null);;
  const [data, setIdentity] = React.useState({
    identity: null,
    token: null
  });
  const [room, setRoom] = React.useState({
    activeRoom: null,
    localMediaAvailable: null,
    hasJoinedRoom: null
  });
  async function fetchToken() {
    try {
      const response = await fetch("/token");
      const jsonResponse = await response.json();
      const { identity, token } = jsonResponse;
      setIdentity({
          identity,
          token
      });
    } catch (e) {
      console.error("e", e);
    }
  }

  React.useEffect(() => {
    fetchToken();
  }, []);

  const attachTracks = (tracks, container) => {
    tracks.forEach(track => {
      container.appendChild(track.attach());
    });
  };

  // Attaches a track to a specified DOM container
  const attachParticipantTracks = (participant, container) => {
    const tracks = Array.from(participant.tracks.values());
    attachTracks(tracks, container);
  };

  const roomJoined = room => {
    // Called when a participant joins a room
    console.log("Joined as '" + data.identity + "'");
    setRoom({
      activeRoom: room,
      localMediaAvailable: true,
      hasJoinedRoom: true
    });

    // Attach LocalParticipant's Tracks, if not already attached.
    const previewContainer = localMediaRef.current;
    if (!previewContainer.querySelector("video")) {
      attachParticipantTracks(room.localParticipant, previewContainer);
    }
  };

  const joinRoom = () => {
    let connectOptions = {
      name: "Interview Testing"
    };
    let settings = {
      audio: true
    }
    console.log('data', data, data.token)
    Video.connect(
      data.token,
      connectOptions,
      settings
    ).then(roomJoined, error => {
      alert("Could not connect to Twilio: " + error.message);
    });
  };
  return (
    <div className="App">
        <FeatureGrid>
          <span onClick={joinRoom}>Webcam</span>
        </FeatureGrid>
        <PanelGrid>
          {room.localMediaAvailable ? (
            <VideoPanels>
              <VideoPanel ref={localMediaRef} />
            </VideoPanels>
          ) : (
            ""
          )}
        </PanelGrid>
    </div>
  );
}

export default App;

我也如何启用音频?视频设置也仅在右键单击后显示。我们不能默认显示吗?

更新

使用LocalAudioTrack

enter image description here

这是remoteaudiotrack

enter image description here

0 个答案:

没有答案