MOD: offer/answer at same page

k-takahashi23 · May 8, 2021 · bd857f7 · bd857f7
1 parent 326127e
commit bd857f7
Showing 1 changed file with 97 additions and 18 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,42 +1,121 @@
 import { useEffect, useRef } from "react"
 
+let localStream: MediaStream;
+let remoteStream: MediaStream;
+let localPeerConnection: RTCPeerConnection;
+let remotePeerConnection: RTCPeerConnection;
+
+const offerOptions: RTCOfferOptions = {
+  offerToReceiveAudio: true,
+  offerToReceiveVideo: true,
+};
+
 const IndexPage = () => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const audioRef = useRef<HTMLAudioElement>(null);
+  const localVideoRef = useRef<HTMLVideoElement>(null);
+  const remoteVideoRef = useRef<HTMLVideoElement>(null);
+  const remoteAudioRef = useRef<HTMLAudioElement>(null);
 
   useEffect(() => {
-    const setVideoStream = async () => {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-      if (videoRef.current) {
-        videoRef.current.srcObject = stream;
-      }
-    }
+    const setStream = async () => {
+      try {
+        localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = localStream;
+        }
+
+        const videoTracks = localStream.getVideoTracks();
+        const audioTracks = localStream.getAudioTracks();
+
+        const configuration = {};
+        localPeerConnection = new RTCPeerConnection(configuration);
+        remotePeerConnection = new RTCPeerConnection(configuration);
+
+        localPeerConnection.onicecandidate = (ev: RTCPeerConnectionIceEvent) => {
+          const iceCandidate = ev.candidate;
+          if (iceCandidate) {
+            remotePeerConnection
+              .addIceCandidate(iceCandidate)
+              .then(() => {
+                console.log('[localPeer]: addIceCandidate success.')
+              })
+              .catch(error => {
+                console.log(error)
+              })
+          }
+        };
+
+        remotePeerConnection.onicecandidate = (ev: RTCPeerConnectionIceEvent) => {
+          const iceCandidate = ev.candidate;
+          if (iceCandidate) {
+            remotePeerConnection
+              .addIceCandidate(iceCandidate)
+              .then(() => {
+                console.log('[remotePeer]: addIceCandidate success.')
+              })
+              .catch(error => {
+                console.log(error)
+              })
+          }
+        };
+
+        remotePeerConnection.ontrack = (ev: RTCTrackEvent) => {
+          console.log('onTrack')
+          remoteStream = new MediaStream()
+          console.log(ev.track)
+          remoteStream.addTrack(ev.track)
+          if (ev.track.kind === 'video') {
+            if (remoteVideoRef.current) {
+              remoteVideoRef.current.srcObject = remoteStream
+            }
+          }
+          if (ev.track.kind === 'audio') {
+            if (remoteAudioRef.current) {
+              remoteAudioRef.current.srcObject = remoteStream
+            }
+          }
+        }
 
-    const setAudioStream = async () => {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      if (audioRef.current) {
-        audioRef.current.srcObject = stream;
+        localPeerConnection.addTrack(videoTracks[0], localStream);
+        localPeerConnection.addTrack(audioTracks[0], localStream);
+
+        const offerDescription = await localPeerConnection.createOffer(offerOptions);
+        await localPeerConnection.setLocalDescription(offerDescription);
+        await remotePeerConnection.setRemoteDescription(offerDescription);
+
+        const answerDescription = await remotePeerConnection.createAnswer();
+        await remotePeerConnection.setLocalDescription(answerDescription);
+        await localPeerConnection.setRemoteDescription(answerDescription);
+
+      } catch (e) {
+        console.error(e);
       }
     }
 
-    setVideoStream();
-    setAudioStream();
+    setStream()
   }, [])
 
 
   return (
     <>
       <div>
         <video
-          style={{ width: '300px', height: '300px', maxWidth: '100%' }}
-          ref={videoRef}
+          style={{ margin: '30px', width: '300px', height: '300px', maxWidth: '100%' }}
+          ref={localVideoRef}
+          playsInline
           autoPlay
+          muted
+        />
+        <video
+          style={{ margin: '30px', width: '300px', height: '300px', maxWidth: '100%' }}
+          ref={remoteVideoRef}
           playsInline
+          autoPlay
         />
         <audio
-          ref={audioRef}
+          style={{ display: 'none' }}
+          ref={remoteAudioRef}
           controls
-          // autoPlay
+          autoPlay
         />
       </div>
     </>