aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.scss49
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx57
-rw-r--r--src/client/views/webcam/WebCamLogic.js14
3 files changed, 82 insertions, 38 deletions
diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 2f35eeca2..41307a808 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -4,7 +4,7 @@
background: whitesmoke;
color: grey;
border-radius: 15px;
- box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+ box-shadow: #9c9396 0.2vw 0.2vw 0.4vw;
border: solid #BBBBBBBB 5px;
pointer-events: all;
display: flex;
@@ -18,29 +18,66 @@
letter-spacing: 2px;
font-size: 16px;
width: 100%;
+ margin-top: 20px;
+ }
+
+ .videoContainer {
+ position: relative;
+ width: calc(100% - 20px);
+ height: 100%;
+ /* border: 10px solid red; */
+ margin-left: 10px;
+ }
+
+ .buttonContainer {
+ display: flex;
+ width: calc(100% - 20px);
+ height: 50px;
+ justify-content: center;
+ text-align: center;
+ /* border: 1px solid black; */
+ margin-left: 10px;
+ margin-top: 0;
+ margin-bottom: 15px;
}
#roomName {
outline: none;
border-radius: inherit;
border: 1px solid #BBBBBBBB;
+ margin: 10px;
+ padding: 10px;
}
.side {
width: 25%;
height: 20%;
position: absolute;
- top: 65%;
+ /* top: 65%; */
z-index: 2;
- right: 5%;
+ right: 0px;
+ bottom: 18px;
}
.main {
position: absolute;
- width: 95%;
- height: 75%;
- top: 20%;
+ width: 100%;
+ height: 100%;
+ /* top: 20%; */
+ align-self: center;
+ }
+
+ .videoButtons {
+ border-radius: 50%;
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ justify-self: center;
align-self: center;
+ margin: 5px;
+ border: 1px solid black;
}
} \ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index cbf75f708..9c339e986 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -8,7 +8,14 @@ import { InkingControl } from "../InkingControl";
import "../../views/nodes/WebBox.scss";
import "./DashWebRTCVideo.scss";
import adapter from 'webrtc-adapter';
-import { initialize, hangup } from "./WebCamLogic";
+import { initialize, hangup, refreshVideos } from "./WebCamLogic";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faSync, faPhoneSlash } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faSync);
+library.add(faPhoneSlash);
+
/**
* This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
@@ -19,14 +26,6 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
private roomText: HTMLInputElement | undefined;
@observable remoteVideoAdded: boolean = false;
- componentDidMount() {
- DocumentDecorations.Instance.addCloseCall(this.closeConnection);
- }
-
- closeConnection: CloseCall = () => {
- hangup();
- }
-
@action
changeUILook = () => {
this.remoteVideoAdded = true;
@@ -47,34 +46,30 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
- _ignore = 0;
- onPreWheel = (e: React.WheelEvent) => {
- this._ignore = e.timeStamp;
- }
- onPrePointer = (e: React.PointerEvent) => {
- this._ignore = e.timeStamp;
- }
- onPostPointer = (e: React.PointerEvent) => {
- if (this._ignore !== e.timeStamp) {
- e.stopPropagation();
- }
+ @action
+ onClickRefresh = () => {
+ refreshVideos();
}
- onPostWheel = (e: React.WheelEvent) => {
- if (this._ignore !== e.timeStamp) {
- e.stopPropagation();
- }
+
+ onClickHangUp = () => {
+ hangup();
}
render() {
let content =
- <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
+ <div className="webcam-cont" style={{ width: "100%", height: "100%" }}>
<div className="webcam-header">DashWebRTC</div>
<input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
- <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
- }}></video>
- <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
- }}></video>
-
+ <div className="videoContainer">
+ <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
+ }}></video>
+ <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
+ }}></video>
+ </div>
+ <div className="buttonContainer">
+ <div className="videoButtons" style={{ background: "red" }} onClick={this.onClickHangUp}><FontAwesomeIcon icon={faPhoneSlash} color="white" /></div>
+ <div className="videoButtons" style={{ background: "green" }} onClick={this.onClickRefresh}><FontAwesomeIcon icon={faSync} color="white" /></div>
+ </div>
</div >;
let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
@@ -86,7 +81,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
<div className={classname} >
{content}
</div>
- {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
+ {!frozen ? (null) : <div className="webBox-overlay" />}
</>);
}
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index 3dfb82465..f542fb983 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -277,4 +277,16 @@ function handleRemoteHangup() {
function sendMessage(message) {
console.log('Client sending message: ', message);
socket.emit('message', message, room);
-}; \ No newline at end of file
+};
+
+export function refreshVideos() {
+ var localVideo = document.querySelector('#localVideo');
+ var remoteVideo = document.querySelector('#remoteVideo');
+ if (localVideo) {
+ localVideo.srcObject = localStream;
+ }
+ if (remoteVideo) {
+ remoteVideo.srcObject = remoteStream;
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:59:03 +0000