Merge pull request #132 from ryuujo1573/master

release/4.2.2

Demo/package.json

@@ -1,9 +1,9 @@
 {
   "name": "multiple-track-demo",
-  "version": "4.1.9",
+  "version": "4.2.1",
   "private": true,
   "description": "multiple track demo",
-  "author": "Yao Zhi <yaozhi@qiniu.com>",
+  "author": "pili-coresdk <pili-coresdk@qiniu.com>",
   "homepage": "https://demo-rtc.qnsdk.com",
   "license": "MIT",
   "repository": {
@@ -17,43 +17,47 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@types/history": "^4.7.2",
-    "@types/jest": "^23.3.10",
-    "@types/node": "^10.12.15",
-    "@types/qs": "^6.5.1",
-    "@types/react": "^16.7.13",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-router-dom": "^4.3.1",
-    "@types/seedrandom": "^2.4.27",
-    "@types/store": "^2.0.1",
     "clipboard": "^2.0.4",
     "core-js": "^2.6.3",
     "flv.js": "^1.5.0",
+    "history": "4.10.1",
     "lodash": "^4.17.11",
     "mobx": "^5.8.0",
     "mobx-react": "^5.4.3",
     "mobx-react-router": "^4.0.5",
-    "qnweb-rtc": "^4.2.0",
+    "qnweb-rtc": "4.2.2",
     "qs": "^6.6.0",
-    "react": "^16.8.0",
-    "react-app-polyfill": "^0.2.0",
-    "react-avatar": "^3.5.0",
-    "react-dom": "^16.8.0",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "^2.1.3",
+    "react": "16.8.0",
+    "react-app-polyfill": "0.2.0",
+    "react-avatar": "3.5.0",
+    "react-dom": "16.8.0",
+    "react-router": "4.3.1",
+    "react-router-dom": "4.3.1",
+    "react-scripts": "2.1.4",
     "seedrandom": "^2.4.4",
-    "store": "^2.0.12",
-    "typescript": "^3.2.4"
+    "store": "^2.0.12"
+  },
+  "devDependencies": {
+    "@types/clipboard": "^2.0.1",
+    "@types/history": "^4.7.2",
+    "@types/jest": "^23.3.10",
+    "@types/lodash": "4",
+    "@types/node": "^18",
+    "@types/qs": "^6.5.1",
+    "@types/react": "^16.7.13",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-router": "^4.4.5",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/seedrandom": "^2.4.27",
+    "@types/store": "^2.0.1",
+    "@types/webpack-env": "^1.13.6",
+    "prettier": "^2.8.6",
+    "typescript": "^4.9.4"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "devDependencies": {
-    "@types/clipboard": "^2.0.1",
-    "@types/webpack-env": "^1.13.6"
-  }
+  ]
 }

Demo/src/components/UserPlayer/index.tsx

@@ -40,7 +40,11 @@ export default class UserPlayer extends React.Component<Props, State> {
   handleTrackFullScreen(track: Track) {
     const videoElement = track.rtcTrack.mediaElement;
     if (!videoElement) return;
-    videoElement.requestFullscreen();
+    if ("requestFullscreen" in videoElement) {
+      videoElement.requestFullscreen();
+    } else if ("webkitRequestFullscreen" in videoElement) {
+      (videoElement as any).webkitRequestFullscreen();
+    }
   }
 
   handleCaptureFrame(track: Track, event: React.MouseEvent<HTMLDivElement>) {

Demo/src/pages/live/index.tsx

@@ -19,11 +19,13 @@ import { MessageStore } from '../../stores/messageStore';
 import { UserStore } from '../../stores/userStore';
 import { verifyRoomId, timeout, retrying } from '../../common/utils';
 import { QNRenderMode, QNTranscodingLiveStreamingTrack } from "qnweb-rtc";
+import { ResumePlay } from "../../components/ResumePlay";
 interface Params {
   roomid: string;
 }
 
 interface State {
+  showDialog: boolean;
 }
 
 interface Props extends RouteComponentProps<Params> {
@@ -34,11 +36,18 @@ interface Props extends RouteComponentProps<Params> {
   isMobile: Boolean;
 }
 
+let flvPlayer: any;
+
 @inject('roomStore', 'routerStore', 'messageStore', 'userStore', 'isMobile')
 @observer
 export default class LivePage extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showDialog: false
+    };
+  }
   public video = React.createRef<HTMLDivElement>();;
-  public flvPlayer?: any;
   private stopRetrying?: (err?: any) => void;
 
   public async componentDidMount(): Promise<void> {
@@ -68,7 +77,7 @@ export default class LivePage extends React.Component<Props, State> {
 
   componentWillUnmount() {
     if (this.stopRetrying) this.stopRetrying();
-    if (this.flvPlayer) this.flvPlayer.destroy && this.flvPlayer.destroy();
+    if (flvPlayer) flvPlayer.destroy && flvPlayer.destroy();
     this.props.roomStore.leaveRoom();
     this.props.messageStore.hideLoading();
   }
@@ -87,13 +96,19 @@ export default class LivePage extends React.Component<Props, State> {
       height: "100vh"
     }
     // @ts-ignore
-    this.flvPlayer = new QNPlayer.CreatePlayer(config)
+    flvPlayer = new QNPlayer.CreatePlayer(config);
     // @ts-ignore
-    this.flvPlayer.on("complete", () => {
+    flvPlayer.on("complete", () => {
+      flvPlayer.play().catch(() => {
+        this.setState({
+          showDialog: true
+        });
+      })
+
       this.props.messageStore.hideLoading();
     })
     // @ts-ignore
-    this.flvPlayer.on("error", (data) => {
+    flvPlayer.on("error", (data) => {
       this.props.messageStore.hideLoading();
         this.props.messageStore.showAlert({
         show: true,
@@ -102,11 +117,15 @@ export default class LivePage extends React.Component<Props, State> {
       });
     })
   }
+  handleResumePlay() {
+    flvPlayer && flvPlayer.play().then(() => this.setState({showDialog: false}));
+  }
 
   public render(): JSX.Element {
     const { isMobile } = this.props;
     return (
       <div className={`${styles.container} ${isMobile ? styles.containerMobile : ''}`}>
+        <ResumePlay open={this.state.showDialog} handleResumePlay={this.handleResumePlay.bind(this)}/>
         <p className={styles.roomName}>房间名称: {this.props.match.params.roomid}</p>
         <div className={`${isMobile ? styles.videoMobileContainer : styles.videoContainer}`}>
           <div id="livedemo"></div>

Demo/src/pages/room.tsx

@@ -188,10 +188,10 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
     if (roomStore.state !== QNConnectionState.DISCONNECTED) {
       return;
     }
-    if (qsobj.appId) {
+    if (typeof qsobj.appId == 'string') {
       roomStore.setAppId(qsobj.appId);
     }
-    let token: string | undefined = qsobj.roomToken;
+    let token: string | undefined = qsobj.roomToken as string;
     let tracks: RTCTrack[] | undefined;
     messageStore.showLoading('加入房间中...');
     try {
@@ -275,7 +275,6 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
     const { roomStore, messageStore } = this.props;
     return roomStore.getSelectTracks()
       .catch(e => {
-        console.log(e);
         messageStore.hideLoading();
         switch (e.code) {
           case 11010:
@@ -306,6 +305,13 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
               content: '请手动选择系统声音',
             });
             break;
+          case 23004:
+            messageStore.showAlert({
+              show: true,
+              title: '没有权限',
+              content: '获取屏幕录制权限被拒绝，请手动打开录制权限后重新进入房间',
+            })
+            break
           default:
             messageStore.showAlert({
               show: true,
@@ -335,7 +341,7 @@ class Room extends Component<Props & RouteComponentProps<RoomRouterProps>, {}> {
       this.props.messageStore.showAlert({
         show: true,
         title: '订阅失败',
-        content: error.toString(),
+        content: error instanceof Error ? error.toString() : '',
       });
     }
   };

Demo/src/stores/roomStore.ts

@@ -440,6 +440,11 @@ export class RoomStore {
       // 音视频 + 屏幕共享
       case TrackCreateMode.C: {
         tracks = [
+          (await QNRTC.createScreenVideoTrack({
+            encoderConfig: this.screenConfig,
+            screenVideoTag: "screen",
+            optimizationMode: QNVideoOptimizationMode.DETAIL
+          }) as QNScreenVideoTrack),
           ...await QNRTC.createMicrophoneAndCameraTracks(
             { tag: "microphone", microphoneId: this.audioDeviceId },
             {
@@ -453,12 +458,7 @@ export class RoomStore {
                 bitrate: vConfig.config.video!.bitrate
               }
             }
-          ),
-          (await QNRTC.createScreenVideoTrack({
-            encoderConfig: this.screenConfig,
-            screenVideoTag: "screen",
-            optimizationMode: QNVideoOptimizationMode.DETAIL
-          }) as QNScreenVideoTrack)
+          )
         ];
         break;
       }

ReleaseNotes/release-note-4.2.1.md

@@ -0,0 +1,42 @@
+# QNRTC Web v4.2.1
+
+
+## 简介
+
+QNRTC Web 是七牛云推出的一款 Web 平台实时音视频 SDK，提供了音视频通话、发布、订阅、静音等功能，提供灵活的接口，支持高度定制以及二次开发。
+
+
+## 功能
+
+### SDK
+
+- 新增本地录制功能
+- 新增 QNRTC 配置接口
+
+
+## 优化
+
+- 增强摄像头切换接口，可通过多种方法选择并切换
+- 优化了 TypeScript 类型标注
+
+
+## 修复
+
+### SDK
+
+- 修复 iOS 15.1 Safari 视频发布/静音导致页面崩溃的问题
+
+### Demo
+
+- 修复 Safari 直播时，无法播放纯音频的问题
+- 修复用户在取消屏幕共享时无法退出采集状态的问题
+
+
+## 备注
+
+- 本地录制功能在部分浏览器下无法使用，详细的浏览器支持情况可查看[MDN文档](https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker#browser_compatibility)
+
+
+## 问题反馈
+
+当你遇到任何问题时，可以提交 `issue` 来反馈问题，请尽可能地描述你所遇到的问题或异常，并附带相关的日志或错误信息。

ReleaseNotes/release-note-4.2.2.md

@@ -0,0 +1,16 @@
+# QNRTC Web v4.2.2
+
+
+## 简介
+
+QNRTC Web 是七牛云推出的一款 Web 平台实时音视频 SDK，提供了音视频通话、发布、订阅、静音等功能，提供灵活的接口，支持高度定制以及二次开发。
+
+
+## 修复
+
+- 修复了 QQ 浏览器上频繁触发权限弹窗的问题
+
+
+## 问题反馈
+
+当你遇到任何问题时，可以提交 `issue` 来反馈问题，请尽可能地描述你所遇到的问题或异常，并附带相关的日志或错误信息。