1 year ago

#366308

test-img

Zuet

react-native-webrtc getDisplayMedia don't work

I try to use react-native-webrtc to my project.

When I check media with getUserMedia(), it's working well. But when I try to use getDisplayMedia(), stream view RTCView return a white view has nothing.

It just ask permission and dont log anymore. when I check console console.log(capture?._tracks);, the constraints is a empty object.

[
  {
    _constraints: {},
    _enabled: true,
    _settings: { frameRate: 30, height: 2280, width: 1080 },
    id: "352c000e-6fe2-4b7c-b66a-55b52d4977c5",
    kind: "video",
    label: "352c000e-6fe2-4b7c-b66a-55b52d4977c5",
    muted: false,
    readyState: "live",
    remote: false,
  },
];

This is my full code:

import React, {memo, useEffect, useRef, useState} from 'react';
import {Button, StyleSheet, Text} from 'react-native';
import {mediaDevices, RTCView} from 'react-native-webrtc';

function CaptureView({isFront}) {
  const [capture, setCapture] = useState(null);
  const captureRef = useRef(null);

  useEffect(() => {
    onCapture();
  }, []);

  console.log('capture', capture);
  console.log(capture?._tracks);

  const onCapture = async () => {
    if (!capture) {
      let capturing;
      const constraints = {
        video: true,
      };
      try {
        capturing = await mediaDevices.getDisplayMedia(constraints);
        setCapture(capturing);
      } catch (error) {
        console.error(error);
      }
    } else {
      capture.getTracks().forEach(track => track.stop());
      setCapture(null);
    }
  };

  const onEnd = () => {
    capture?.release();
    setCapture(null);
  };

  return (
    <>
      <Text>Capture View</Text>
      {capture && (
        <RTCView
          ref={captureRef}
          streamURL={capture?.id}
          style={styles.flexChildren}
          mirror={isFront ? true : false}
        />
      )}
      <Button
        title={capture ? 'Stop' : 'Capture'}
        onPress={() => {
          capture ? onEnd() : onCapture();
        }}
      />
    </>
  );
}

const styles = StyleSheet.create({
  flexChildren: {
    flex: 1,
  },
});

export default memo(CaptureView);

getDisplayMedia modal view: getDisplayMedia

demo view: getUserMedia

react-native

webrtc

screen-recording

get-display-media

react-native-webrtc

0 Answers

Your Answer

Accepted video resources