Type Error with MediaStream Properties in react-native-webrtc

[sultanmyrza]

Type Error with MediaStream Properties in react-native-webrtc

"react-native-webrtc": "^124.0.5"

Description

When using the MediaStream type from react-native-webrtc, TypeScript reports missing properties that should be available on the MediaStream interface.

Error Message

Type 'MediaStream' is missing the following properties from type 'MediaStream': _tracks, _id, _reactTag, toURL, release

Sample Code

import { useState } from "react";
import { View } from "react-native";
import { MediaStream, mediaDevices } from "react-native-webrtc";

const configuration = {
  iceServers: [
    {
      urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"],
    },
  ],
  iceCandidatePoolSize: 10,
};

export default function HomeScreen() {
  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);

  const [peerConnection, setPeerConnection] =
    useState<RTCPeerConnection | null>(null);

  const initializePeerConnection = (): RTCPeerConnection => {
    const peerConnection = new RTCPeerConnection(configuration);

    // Handle incoming remote stream
    peerConnection.ontrack = (event) => {
      console.log("Received remote stream");
      if (event.streams && event.streams[0]) {
        setRemoteStream(event.streams[0] as unknown as MediaStream);
      }
    };

    return peerConnection;
  };

  const startCameraStream = async () => {
    const pc = new RTCPeerConnection(configuration);

    const stream = await mediaDevices.getUserMedia({
      audio: true,
      video: true,
    });
    setLocalStream(stream);

    pc.ontrack = (event) => {
      const mediaStream = event.streams[0];
      setRemoteStream(mediaStream); // ts-error: Type 'MediaStream' is missing the following properties from type 'MediaStream': _tracks, _id, _reactTag, toURL, release
    };

    setPeerConnection(pc);
  };

  const stopCameraStream = () => {
    peerConnection?.close();
  };
  return <View></View>;
}

P.S: As temporary workaround I trick TypeScript but I don't like it

setRemoteStream(event.streams[0] as unknown as MediaStream);

[hevi08]

Use like this

Either import everything from 'react-native-webrtc' or use registerGlobals()

import { useState } from 'react';
import { View } from 'react-native';
import { MediaStream, mediaDevices, RTCPeerConnection } from 'react-native-webrtc';

const configuration = {
    iceServers: [
        {
            urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'],
        },
    ],
    iceCandidatePoolSize: 10,
};

export default function HomeScreen() {
    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
    const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);

    const [peerConnection, setPeerConnection] = useState<RTCPeerConnection | null>(null);

    const initializePeerConnection = (): RTCPeerConnection => {
        const peerConnection = new RTCPeerConnection(configuration);

        // Handle incoming remote stream
        peerConnection.addEventListener('track', (event) => {
            console.log('Received remote stream');
            if (event.streams && event.streams[0]) {
                setRemoteStream(event.streams[0]);
            }
        });

        return peerConnection;
    };

    const startCameraStream = async () => {
        const pc = new RTCPeerConnection(configuration);

        const stream = await mediaDevices.getUserMedia({
            audio: true,
            video: true,
        });
        setLocalStream(stream);

        pc.addEventListener('track', (event) => {
            const mediaStream = event.streams[0];
            setRemoteStream(mediaStream);
        });

        setPeerConnection(pc);
    };

    const stopCameraStream = () => {
        peerConnection?.close();
    };
    return <View></View>;
}

[hevi08]

By the way, i always import from react-native-webrtc directly.

Because, if i use navigator.mediaDevices.getDisplayMedia(), vscode will tell you that, you can pass these options

But in internally, its not taking any args getDisplayMedia() 🫠

[alwi2022]

did you use expo 53 for this project?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sultanmyrza]

Use like this

Either import everything from 'react-native-webrtc' or use registerGlobals()

import { MediaStream, mediaDevices, RTCPeerConnection } from 'react-native-webrtc';

export default function HomeScreen() {

const initializePeerConnection = (): RTCPeerConnection => {
    const peerConnection = new RTCPeerConnection(configuration);

    // Handle incoming remote stream
    peerConnection.addEventListener('track', (event) => {
        console.log('Received remote stream');
        if (event.streams && event.streams[0]) {
            setRemoteStream(event.streams[0]);
        }
    });

    return peerConnection;
};

}

Nice try @hevi08

Thank you for hint. However it will give Property 'addEventListener' does not exist on type 'RTCPeerConnection'.ts(2339) see

@hevi08 I updated issue description and created a branch in case if you want to give us another hint. See Steps to reproduce thanks.

[sultanmyrza]

did you use expo 53 for this project?

Thank you for note @alwi2022 yes it is. I added Environment section

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.