From 4a0e05033c3210fe554476225209c48d57ad31b4 Mon Sep 17 00:00:00 2001
From: oddcancer <670292548@qq.com>
Date: Tue, 14 Feb 2023 15:29:17 +0800
Subject: [PATCH] v2.4.31 - Set publisher video to mirror.

---
 example/rtc/css/style.css | 43 ++++++++++++++++++++++-----------------
 example/rtc/index.html    |  5 +++--
 example/rtc/js/main.js    | 24 ++++++++++++++++------
 src/odd.js                |  2 +-
 src/rtc/rtc.netstream.js  |  1 -
 5 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/example/rtc/css/style.css b/example/rtc/css/style.css
index b245a68..4eaef7d 100644
--- a/example/rtc/css/style.css
+++ b/example/rtc/css/style.css
@@ -20,25 +20,24 @@
 	flex-direction: row;
 }
 
-.rtc-parameters .row > span {
+.rtc-parameters .row>span {
 	margin-right: 40px;
 	width: 100%;
 	display: flex;
 	flex-direction: row;
 }
 
-.rtc-parameters .row > span:last-child {
+.rtc-parameters .row>span:last-child {
 	margin-right: 0;
 }
 
-.rtc-parameters .row > span label {
+.rtc-parameters .row>span label {
 	margin-right: 10px;
-	width: 94px;
 	flex-grow: 0;
 }
 
-.rtc-parameters .row > span input,
-.rtc-parameters .row > span select {
+.rtc-parameters .row>span input,
+.rtc-parameters .row>span select {
 	padding: 2px 4px;
 	height: 24px;
 	line-height: 24px;
@@ -59,25 +58,25 @@
 	justify-content: center;
 }
 
-.toolbar > * {
+.toolbar>* {
 	margin-right: 20px;
 }
 
-.toolbar > *:last-child {
+.toolbar>*:last-child {
 	margin-right: 0;
 }
 
 @media only screen and (max-width: 568px) {
-.toolbar {
-	height: auto;
-	display: block;
-	flex-direction: unset;
-}
-
-.toolbar > *,
-.toolbar > *:last-child {
-	margin: 4px auto;
-}
+	.toolbar {
+		height: auto;
+		display: block;
+		flex-direction: unset;
+	}
+
+	.toolbar>*,
+	.toolbar>*:last-child {
+		margin: 4px auto;
+	}
 }
 
 
@@ -89,6 +88,12 @@
 	margin: 20px 0 0 0;
 }
 
+#view .mirror {
+	transform: rotateY(180deg);
+	-webkit-transform: rotateY(180deg);
+	-moz-transform: rotateY(180deg);
+}
+
 #view video {
 	width: 50%;
 	float: left;
@@ -96,4 +101,4 @@
 
 #view video:nth-child(even) {
 	float: none;
-}
+}
\ No newline at end of file
diff --git a/example/rtc/index.html b/example/rtc/index.html
index b071ef7..1e93366 100644
--- a/example/rtc/index.html
+++ b/example/rtc/index.html
@@ -102,8 +102,9 @@
                             <select id='sl_profiles'></select>
                         </span>
                         <span>
-                            <label style="width: 50%;"><input id='ch_enablevideo' type='checkbox' checked onchange='onVideoEnableChange();'>Video</label>
-                            <label style="width: 50%;"><input id='ch_enableaudio' type='checkbox' checked onchange='onAudioEnableChange();'>Audio</label>
+                            <label><input id='ch_enableaudio' type='checkbox' checked onchange='onAudioEnableChange();'>Audio</label>
+                            <label><input id='ch_enablevideo' type='checkbox' checked onchange='onVideoEnableChange();'>Video</label>
+                            <label><input id='ch_enablemirror' type='checkbox' checked onchange='onMirrorEnableChange();'>Mirror</label>
                         </span>
                     </div>
                     <div class='row'>
diff --git a/example/rtc/js/main.js b/example/rtc/js/main.js
index dca04c7..0530232 100644
--- a/example/rtc/js/main.js
+++ b/example/rtc/js/main.js
@@ -133,6 +133,8 @@ function onPreviewClick(e) {
         _preview = ns;
 
         var video = ns.video;
+        video.setAttribute('controls', '');
+        video.classList[ch_enablemirror.checked ? 'add' : 'remove']('mirror');
         video.muted = true;
         video.srcObject = ns.stream;
         video.play().catch(function (err) {
@@ -191,6 +193,8 @@ function onPublishClick(e) {
         });
 
         var video = ns.video;
+        video.setAttribute('controls', '');
+        video.classList[ch_enablemirror.checked ? 'add' : 'remove']('mirror');
         video.muted = true;
         video.srcObject = ns.stream;
         video.play().catch(function (err) {
@@ -209,28 +213,35 @@ function onPublishClick(e) {
     });
 }
 
-function onVideoEnableChange(e) {
+function onAudioEnableChange(e) {
     utils.forEach(rtc.publishers, function (_, ns) {
         ns.getSenders().forEach((sender) => {
             var track = sender.track;
-            if (track && track.kind === 'video') {
-                track.enabled = ch_enablevideo.checked;
+            if (track && track.kind === 'audio') {
+                track.enabled = ch_enableaudio.checked;
             }
         });
     });
 }
 
-function onAudioEnableChange(e) {
+function onVideoEnableChange(e) {
     utils.forEach(rtc.publishers, function (_, ns) {
         ns.getSenders().forEach((sender) => {
             var track = sender.track;
-            if (track && track.kind === 'audio') {
-                track.enabled = ch_enableaudio.checked;
+            if (track && track.kind === 'video') {
+                track.enabled = ch_enablevideo.checked;
             }
         });
     });
 }
 
+function onMirrorEnableChange(e) {
+    utils.forEach(rtc.publishers, function (_, ns) {
+        var video = ns.video;
+        video.classList[ch_enablemirror.checked ? 'add' : 'remove']('mirror');
+    });
+}
+
 function onChangeProfileClick(e) {
     utils.forEach(rtc.publishers, function (_, ns) {
         ns.setProfile(sl_profiles.value);
@@ -263,6 +274,7 @@ function play(name) {
             switch (e.data.code) {
                 case Code.NETSTREAM_PLAY_START:
                     var video = e.srcElement.video;
+                    video.setAttribute('controls', '');
                     video.srcObject = e.data.info.streams[0];
                     video.play().catch(function (err) {
                         console.warn(`${err}`);
diff --git a/src/odd.js b/src/odd.js
index 12d8507..5ca7940 100644
--- a/src/odd.js
+++ b/src/odd.js
@@ -1,6 +1,6 @@
 odd = function () {
     return {
-        version: '2.4.30',
+        version: '2.4.31',
     };
 };
 
diff --git a/src/rtc/rtc.netstream.js b/src/rtc/rtc.netstream.js
index cec5092..0e2ea72 100644
--- a/src/rtc/rtc.netstream.js
+++ b/src/rtc/rtc.netstream.js
@@ -75,7 +75,6 @@
             _this.video = utils.createElement('video');
             _this.video.setAttribute('playsinline', '');
             _this.video.setAttribute('autoplay', '');
-            _this.video.setAttribute('controls', '');
 
             _pid = 0;
             _screenshare = false;