Merge pull request #129 from yydounai1234/master

release/4.2.0

Author: yydounai1234

Demo/package-lock.json

@@ -11,7 +11,7 @@
     "url": "git+https://github.com/pili-engineering/QNRTC-Web.git"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
     "build": "react-scripts build"
   },
   "dependencies": {
@@ -33,7 +33,7 @@
     "mobx": "^5.8.0",
     "mobx-react": "^5.4.3",
     "mobx-react-router": "^4.0.5",
-    "qnweb-rtc": "^4.1.9",
+    "qnweb-rtc": "^4.2.0",
     "qs": "^6.6.0",
     "react": "^16.8.0",
     "react-app-polyfill": "^0.2.0",

Demo/package.json

@@ -23,14 +23,15 @@ interface State {
 
 @observer
 export default class UserPlayer extends React.Component<Props, State> {
-
+  public ref: HTMLDivElement | undefined;
   handlePlayerDom(track: Track, ref: HTMLDivElement | null) {
     if (!ref) return;
+    this.ref = ref;
     if (track.rtcTrack.mediaElement && track.rtcTrack.mediaElement.parentElement === ref) return;
     if (ref.innerHTML) {
       ref.innerHTML = '';
     }
-    track.rtcTrack.play(ref).catch(e => {
+    track.rtcTrack.play(ref, {mirror: false}).catch(e => {
       console.log(`mtd demo ${track.rtcTrack.isAudio() ? "audio" : "video"} track play fail`, e);
       this.props.addShouldResumedTrack(track);
     });

Demo/src/components/UserPlayer/index.tsx

@@ -14,6 +14,8 @@ import {
   IconButton,
   Switch,
   ButtonBase,
+  Select,
+  MenuItem
 } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
 import Input from '../components/Input';
@@ -101,6 +103,7 @@ interface State {
   // enhance: boolean;
   // selected: number;
   joinRoomStep: number;
+  showScreenConfig: boolean;
 }
 
 @inject('routerStore', 'userStore', 'roomStore', 'messageStore', 'isMobile')
@@ -119,13 +122,26 @@ class Home extends Component<Props, State> {
       roomid: props.roomStore.id,
       roomToken: '',
       joinRoomStep: props.userStore.id ? 1 : 0,
+      showScreenConfig: this.isShowScreenConfig(props.roomStore.selectedTrackCreateMode),
     };
   }
 
+
+  private isShowScreenConfig(mode: TrackCreateMode) {
+    return mode === TrackCreateMode.C || mode === TrackCreateMode.D;
+  }
+
   handleRadioChange = async (event: React.ChangeEvent<{}>, value: string) => {
-    this.props.roomStore.setSelectedTrackCreateMode(value as TrackCreateMode);
+    const mode = value as TrackCreateMode;
+    const showScreenConfig = this.isShowScreenConfig(mode);
+    this.props.roomStore.setSelectedTrackCreateMode(mode);
+    this.setState({ showScreenConfig });
   };
 
+  onChangeScreenConfig = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.props.roomStore.setScreenConfig(event.target.value as "480p" | "720p" | "1080p");
+  }
+
   showMessage = this.props.messageStore.show;
 
   verifyState = (): boolean => {
@@ -185,7 +201,23 @@ class Home extends Component<Props, State> {
   };
 
   render() {
+    const options = [
+        {
+          label: "480p(640x480 15fps 500kbps)",
+          value: "480p"
+        },
+        {
+          label: "720p(1280x720 30fps 1130kbps)",
+          value: "720p"
+        },
+        {
+          label: "1080p(1920x1080 30fps 3000kbps)",
+          value: "1080p"
+        }
+    ];
+
     const { classes,isMobile } = this.props;
+    const { showScreenConfig } = this.state;
     // const { enhance } = this.state;
     return (
       <div className={classes.root}>
@@ -272,7 +304,11 @@ class Home extends Component<Props, State> {
                   { !isMobile && <FormControlLabel value={TrackCreateMode.C} control={<Radio />} label={TrackCreateMode.C} />}
                   { !isMobile && <FormControlLabel value={TrackCreateMode.D} control={<Radio />} label={TrackCreateMode.D} />}
                 </RadioGroup>
+                {showScreenConfig && <Select value={this.props.roomStore.screenConfig} onChange={this.onChangeScreenConfig}>
+                  {options.map(opt => <MenuItem value={opt.value} key={opt.value}>{opt.label}</MenuItem>)}
+                </Select>}
               </FormControl>
+              
             </Grid>
           </Grid>}
           <Grid item container wrap="nowrap" justify="center" spacing={16}>

Demo/src/pages/home.tsx

@@ -38,7 +38,7 @@ interface Props extends RouteComponentProps<Params> {
 @observer
 export default class LivePage extends React.Component<Props, State> {
   public video = React.createRef<HTMLDivElement>();;
-  public flvPlayer?: flvjs.Player;
+  public flvPlayer?: any;
   private stopRetrying?: (err?: any) => void;
 
   public async componentDidMount(): Promise<void> {
@@ -68,7 +68,7 @@ export default class LivePage extends React.Component<Props, State> {
 
   componentWillUnmount() {
     if (this.stopRetrying) this.stopRetrying();
-    if (this.flvPlayer) this.flvPlayer.unload();
+    if (this.flvPlayer) this.flvPlayer.destroy && this.flvPlayer.destroy();
     this.props.roomStore.leaveRoom();
     this.props.messageStore.hideLoading();
   }

Demo/src/pages/live/index.tsx

@@ -169,6 +169,7 @@ interface Props extends WithStyles<typeof styles> {
 @inject('routerStore', 'userStore', 'roomStore', 'messageStore', 'menuStore', 'isMobile')
 @observer
 class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
+  private localTrackRef = React.createRef<UserPlayer>();
   componentDidMount() {
     document.title = `房间:${this.props.roomStore.id},appid:${this.props.roomStore.appId}`;
 
@@ -264,6 +265,12 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
       });
   };
 
+  toggleCameraFacingMode = () => {
+    if (this.localTrackRef.current && this.localTrackRef.current.ref) {
+      this.props.roomStore.toggleCameraFacingMode(this.localTrackRef.current.ref);
+    }
+  };
+
   selectTracks = (): Promise<RTCTrack[] | undefined> => {
     const { roomStore, messageStore } = this.props;
     return roomStore.getSelectTracks()
@@ -399,6 +406,7 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
           {isMobile && <div className={classes.screenMobile}>
             <div className={arr.length > 3 ? 'col-4 row-4' : arr.length > 1 ? 'col-6 row-6' : arr.length > 0 ? 'col-12 row-6' : 'col-12 row-12'}>
               <UserPlayer
+                ref={this.localTrackRef}
                 isMobile={isMobile}
                 local
                 tracks={Array.from(roomStore.publishedTracks.values())}
@@ -592,7 +600,7 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
                       placement="top-end"
                     >
                       <IconButton
-                        onClick={roomStore.toggleCameraFacingMode}
+                        onClick={this.toggleCameraFacingMode}
                       >
                         {roomStore.facingMode === 'user' ? <PhotoCamera /> : <CameraEnhance />}
                       </IconButton>

Demo/src/pages/room.tsx

@@ -14,7 +14,8 @@ import QNRTC, {
   QNScreenVideoTrack,
   QNLocalAudioTrack,
   QNLocalVideoTrack,
-  QNVideoOptimizationMode
+  QNVideoOptimizationMode,
+  QNCameraVideoTrack
 } from "qnweb-rtc";
 import userStore from './userStore';
 import { RTC_APP_ID } from '../common/api';
@@ -67,6 +68,10 @@ export class RoomStore {
   @observable
   public selectedTrackCreateMode: TrackCreateMode = TrackCreateMode.B;
 
+
+  @observable
+  public screenConfig: "480p" | "720p" | "1080p" = "1080p";
+
   @observable
   public videoDeviceId?: string = undefined;
 
@@ -100,7 +105,7 @@ export class RoomStore {
   @computed
   public get publishedCameraTracks(): Track[] {
     return Array.from(this.publishedTracks.values())
-      .filter(v => v.rtcTrack.tag === 'camera');
+      .filter(v => v.rtcTrack.tag === 'camera' || v.rtcTrack.tag === 'screen');
   }
 
   /** 已发布的 VideoTrack(Screen) */
@@ -114,6 +119,11 @@ export class RoomStore {
     this.selectedTrackCreateMode = mode;
   }
 
+  @action
+  public setScreenConfig(config: "480p" | "720p" | "1080p") {
+    this.screenConfig = config;
+  }
+
   /** 切换已发布的 VideoTrack(Camera) Mute状态 */
   @action.bound
   public toggleMutePublishedCamera() {
@@ -128,12 +138,14 @@ export class RoomStore {
 
   /** 切换前后置摄像头 */
   @action.bound
-  public async toggleCameraFacingMode() {
+  public async toggleCameraFacingMode(ref: HTMLDivElement) {
     this.setFaceingMode(this.facingMode === 'user' ? 'environment' : 'user');
-    await this.unpublish();
-    const rtcTracks = await this.getSelectTracks();
-    console.log("update video facingMode repub:", rtcTracks);
-    await this.publish(rtcTracks);
+    const tracks = Array.from(this.publishedTracks.values()).map(t => (t.rtcTrack as QNLocalTrack));
+    const cameraTrack = tracks.find(item => item instanceof QNCameraVideoTrack);
+    if (cameraTrack) {
+      await (cameraTrack as QNCameraVideoTrack).switchCamera();
+      cameraTrack.play(ref ,{mirror: false});
+    }
   }
   /** 切换已发布的 AudioTrack Mute状态 */
   @action.bound
@@ -443,7 +455,7 @@ export class RoomStore {
             }
           ),
           (await QNRTC.createScreenVideoTrack({
-            encoderConfig: "1080p",
+            encoderConfig: this.screenConfig,
             screenVideoTag: "screen",
             optimizationMode: QNVideoOptimizationMode.DETAIL
           }) as QNScreenVideoTrack)
@@ -453,7 +465,7 @@ export class RoomStore {
       // 屏幕共享 + 系统声音
       case TrackCreateMode.D: {
         const ts = await QNRTC.createScreenVideoTrack({ 
-          encoderConfig: "1080p",
+          encoderConfig: this.screenConfig,
           optimizationMode: QNVideoOptimizationMode.DETAIL,
           screenAudioTag: "system-audio", 
           screenVideoTag: "screen" 
@@ -482,6 +494,10 @@ export class RoomStore {
           this.setLocalTracks([...this.localTracks, ...tracks]);
           this.publish(tracks);
         });
+      } else if (track.tag === "screen") {
+        track.on("ended", async () => {
+          track.trackID && this.publishedTracks.delete(track.trackID);
+        });
       }
     }
   }