Merge pull request #255 from AgoraIO/dev-xuch

FIX: select camera or microphone not work

One-to-One-Video/Agora-Web-Tutorial-1to1-React/package.json

@@ -5,12 +5,12 @@
  "dependencies": {
  "@material-ui/core": "^4.0.2",
  "@material-ui/icons": "^4.1.0",
- "@types/agora-rtc-sdk": "^2.6.0",
+ "@types/agora-rtc-sdk": "^3.1.0",
  "@types/jest": "24.0.13",
  "@types/node": "12.0.7",
  "@types/react": "16.8.19",
  "@types/react-dom": "16.8.4",
- "agora-rtc-sdk": "^2.9.0",
+ "agora-rtc-sdk": "^3.3.1",
  "agora-stream-player": "^1.1.3",
  "agoran-awe": "1.1.2",
  "notistack": "^0.8.6",

One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
@@ -35,7 +35,7 @@ import { SnackbarProvider, useSnackbar } from "notistack";
 // useMicrophone hook returns a list of microphones when the hook is called
 // useMediaStream hook returns localStream, a list of remote streams and 
 // a contatenated list of localstream and remote streams when the hook is called
-import { useCamera, useMicrophone, useMediaStream } from "./hooks";
+import { useCamera, useMicrophone, useMediaStream, usePermission } from "./hooks";
 
 // This is an enhanced Web SDK. The enhancement basically converts the callback syntax into promises.
 // Rest of the code will use async/await syntax in conjuction with these promises.
@@ -136,9 +136,10 @@ function App() {
  // const agoraClient = AgoraRTC.createClient({ mode: state.mode, codec: state.codec });
 
  // All hooks are called to get the necessary data
+ const permission = usePermission()
  const cameraList = useCamera();
  const microphoneList = useMicrophone();
- let [localStream, remoteStreamList, streamList] = useMediaStream(agoraClient);
+ let [localStream, remoteStreamList] = useMediaStream(agoraClient);
 
  const { enqueueSnackbar } = useSnackbar();
 
@@ -149,13 +150,49 @@ function App() {
  });
  };
 
+ const changeCamera = async (e: React.ChangeEvent<unknown>) => {
+ let cameraId = (e.target as HTMLInputElement).value;
+ if (cameraId == state.cameraId) {
+ return
+ } else {
+ update("setCamera")(e);
+ if (localStream) {
+ const stream = AgoraRTC.createStream({
+ audio: false,
+ video: true,
+ cameraId: cameraId,
+ });
+ await stream.init();
+ localStream.replaceTrack(stream.getVideoTrack())
+ }
+ }
+ }
+
+ const changeMicrophone = async (e: React.ChangeEvent<unknown>) => {
+ let microphoneId = (e.target as HTMLInputElement).value;
+ if (microphoneId == state.microphoneId) {
+ return
+ } else {
+ update("setMicrophone")(e);
+ if (localStream) {
+ const stream = AgoraRTC.createStream({
+ video: false,
+ audio: true,
+ microphoneId: microphoneId,
+ });
+ await stream.init();
+ localStream.replaceTrack(stream.getAudioTrack())
+ }
+ }
+ }
+
  // Starts the video call
  const join = async () => {
  // Creates a new agora client with given parameters.
  // mode can be 'rtc' for real time communications or 'live' for live broadcasting.
- const client = AgoraRTC.createClient({ mode: state.mode, codec: state.codec })
+ const client = AgoraRTC.createClient({ mode: state.mode, codec: state.codec });
  // Loads client into the state
- setClient(client)
+ setClient(client);
  setIsLoading(true);
  try {
  const uid = isNaN(Number(state.uid)) ? null : Number(state.uid);
@@ -171,7 +208,9 @@ function App() {
  streamID: uid || 12345,
  video: true,
  audio: true,
- screen: false
+ screen: false,
+ cameraId: state.cameraId,
+ microphoneId: state.microphoneId,
  });
 
  // stream.setVideoProfile('480p_4')
@@ -348,7 +387,7 @@ function App() {
  <TextField
  id="cameraId"
  value={state.cameraId}
- onChange={update("setCamera")}
+ onChange={changeCamera}
  select
  label="Camera"
  helperText="Please select your camera"
@@ -364,7 +403,7 @@ function App() {
  <TextField
  id="microphoneId"
  value={state.microphoneId}
- onChange={update("setMicrophone")}
+ onChange={changeMicrophone}
  select
  label="Microphone"
  helperText="Please select your microphone"

One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as useCamera } from './useCamera';
 export { default as useMicrophone } from './useMicrophone';
 export { default as useMediaStream } from './useMediaStream';
+export { default as usePermission } from './usePermission';

One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/hooks/useMounted.ts

@@ -0,0 +1,14 @@
+import { useEffect, useCallback, useRef } from 'react';
+
+const useMounted = (): (() => boolean) => {
+ const ref = useRef<boolean>(false);
+ useEffect(() => {
+ ref.current = true;
+ return () => {
+ ref.current = false;
+ };
+ }, []);
+ return useCallback(() => ref.current, []);
+};
+
+export default useMounted;

One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/hooks/usePermission.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import useMounted from './useMounted';
+import AgoraRTC from '../utils/AgoraEnhancer';
+
+const usePermission = () => {
+ const [hasPermission, setHasPermission] = useState(false);
+ const isMounted = useMounted();
+
+ // request media permissions
+ useEffect(() => {
+ const tempAudioStream = AgoraRTC.createStream({ audio: true, video: false });
+ const tempVideoStream = AgoraRTC.createStream({ audio: false, video: true });
+ Promise
+ .all([tempAudioStream.init(), tempVideoStream.init()])
+ .then(_ => {
+ return true;
+ })
+ .catch(error => {
+ console.log(error)
+ return false;
+ })
+ .then(has => {
+ tempAudioStream.close();
+ tempVideoStream.close();
+ isMounted() && setHasPermission(has)
+ })
+ }, []);
+
+ return hasPermission;
+}
+
+export default usePermission;