@class100/webrtc
Version:
TODO
106 lines • 6.14 kB
JavaScript
import React, { useRef, useEffect } from 'react';
import { useDebounceEffect } from 'ahooks';
const TRTCWebPlayer = (props) => {
var _a, _b;
const container = useRef(null);
const isPlayAudio = ((_a = props) === null || _a === void 0 ? void 0 : _a.isPlayAudio) === false ? false : true;
const isPlayVideo = ((_b = props) === null || _b === void 0 ? void 0 : _b.isPlayVideo) === false ? false : true;
useDebounceEffect(() => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
console.warn('=====================================');
console.warn('');
console.warn('');
console.info('props?.uid: ', props === null || props === void 0 ? void 0 : props.uid);
console.info('props?.remoteStream: ', props === null || props === void 0 ? void 0 : props.remoteStream);
console.info('props?.isPlayVideo: ', props === null || props === void 0 ? void 0 : props.isPlayVideo, isPlayVideo);
console.info('props?.isPlayAudio: ', props === null || props === void 0 ? void 0 : props.isPlayAudio, isPlayAudio);
console.info('props?.current: ', container.current);
console.warn('');
console.warn('');
console.warn('=====================================');
if (container.current) {
try {
if (!document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} video`) &&
!document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} audio`)) {
(_a = props.remoteStream) === null || _a === void 0 ? void 0 : _a.play(container.current, {
objectFit: (props === null || props === void 0 ? void 0 : props.fit) || 'cover',
});
}
if (props.remoteStream) {
(_b = props.remoteStream) === null || _b === void 0 ? void 0 : _b.muteVideo();
(_c = props.remoteStream) === null || _c === void 0 ? void 0 : _c.muteAudio();
}
if (isPlayVideo) {
(_d = props.remoteStream) === null || _d === void 0 ? void 0 : _d.unmuteVideo();
// fix 临时方案
if (document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} video`)) {
//@ts-ignore
(_e = document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} video`)) === null || _e === void 0 ? void 0 : _e.play();
}
}
else {
(_f = props.remoteStream) === null || _f === void 0 ? void 0 : _f.muteVideo();
// fix 临时方案
if (document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} video`)) {
//@ts-ignore
(_g = document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} video`)) === null || _g === void 0 ? void 0 : _g.pause();
}
}
if (isPlayAudio) {
(_h = props.remoteStream) === null || _h === void 0 ? void 0 : _h.unmuteAudio();
// fix 临时方案
if (document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} audio`)) {
//@ts-ignore
(_j = document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} audio`)) === null || _j === void 0 ? void 0 : _j.play();
}
}
else {
(_k = props.remoteStream) === null || _k === void 0 ? void 0 : _k.muteAudio();
// fix 临时方案
if (document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} audio`)) {
//@ts-ignore
(_l = document.querySelector(`#rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid} audio`)) === null || _l === void 0 ? void 0 : _l.pause();
}
}
}
catch (err) {
console.error('==============================');
console.error('');
console.error('');
console.error(`TRTCWebPlayer error`);
console.error(err);
console.error('');
console.error('');
console.error('==============================');
}
}
return () => {
var _a;
try {
if (props.remoteStream) {
(_a = props.remoteStream) === null || _a === void 0 ? void 0 : _a.stop();
}
}
catch (err) {
console.error('==============================');
console.error('');
console.error('');
console.error(`TRTCWebPlayer error stop`);
console.error(err);
console.error('');
console.error('');
console.error('==============================');
}
};
}, [container.current, props.remoteStream, isPlayAudio, isPlayVideo], { wait: 500 });
useEffect(() => {
if (props.remoteStream) {
if (props.audioOutputDeviceId) {
props.remoteStream.setAudioOutput(props.audioOutputDeviceId);
}
}
}, [props.remoteStream, props.audioOutputDeviceId]);
return (React.createElement("div", { ref: container, id: `rtc_remote_view_${props === null || props === void 0 ? void 0 : props.uid}`, "data-uid": props === null || props === void 0 ? void 0 : props.uid, className: "remote-video video-player", style: { width: '320px', height: '240px' } }));
};
export default TRTCWebPlayer;
//# sourceMappingURL=TRTCWebView.js.map