1 year ago
#366308
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);
react-native
webrtc
screen-recording
get-display-media
react-native-webrtc
0 Answers
Your Answer