React

by kasofiddle

HTML

<script src="//static.opentok.com/v2/js/opentok.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

async function authorize(constraints) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    console.log(stream);
  } catch (e) {
    console.log(e);
  }
}

async function loadDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  console.log(devices);
  const mic: any = devices.find((d) => d.kind === 'audioinput');
  const cam: any = devices.find((d) => d.kind === 'videoinput');

  return {
    video: {
      deviceId: { exact: cam.deviceId },
    },
    audio: {
      echoCancellation: { ideal: true },
      deviceId: { exact: mic.deviceId },
      autoGainControl: { ideal: true },
      noiseSuppression: { ideal: true },
    },
  };
}

async function authorizeAndPublish() {
  console.log('authorize and publish');
  const constraints = { video: true, audio: true };
  await authorize(constraints);
  const constraints2 = await loadDevices();
  await authorize(constraints);
}

const TodoApp = () => {

  React.useEffect(() => {
    setTimeout(async () => {
      console.log('call 1');
      const constraints = { video: true, audio: true };
      await authorize(constraints);
    }, 1000);
  }, []);

return (
	<div>
      <button
        onClick={(e) => {
          e.preventDefault();
          authorizeAndPublish();
        }}
      >
        publish
      </button>
   </div>);
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))