v2.4.31 - Set publisher video to mirror.

Author: oddengine

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,11 +88,17 @@
 	margin: 20px 0 0 0;
 }
 
+#view .mirror {
+	transform: rotateY(180deg);
+	-webkit-transform: rotateY(180deg);
+	-moz-transform: rotateY(180deg);
+}
+
 #view video {
 	width: 50%;
 	float: left;
 }
 
 #view video:nth-child(even) {
 	float: none;
-}
+}

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'>

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}`);

src/odd.js

@@ -1,6 +1,6 @@
 odd = function () {
     return {
-        version: '2.4.30',
+        version: '2.4.31',
     };
 };
 

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;