bluejeans (84f5d546) · Commits · Suryaprasadh M / ving-next-poc

components/ConferenceScreen.js

+3 −1

Original line number	Diff line number	Diff line
		@@ -6,6 +6,7 @@ import useTeamsMeeting from "./hooks/teams-provider/useTeamsMeeting";
		import useZoomMeeting from "./hooks/zoom-provider/useZoomMeeting";
		// import useWebexMeeting from "./hooks/webex-provider/useWebexMeeting";
		import useJitsiMeeting from "./hooks/jitsi-provider/useJitsiMeeting";
		import useBlueJeansMeeting from "./hooks/blueJeans-provider/useBlueJeansMeeting";
		import Router from "next/router";

		const inter = Inter({ subsets: ["latin"] });
		@@ -55,6 +56,7 @@ const useMeetingConnector = {
		zoom: useZoomMeeting,
		// webex: useWebexMeeting,
		jitsi: useJitsiMeeting,
		blueJeans: useBlueJeansMeeting,
		};

		export default function ConferenceScreen({
		@@ -77,7 +79,7 @@ export default function ConferenceScreen({
		const meetingDetails = useMemo(() => {
		return getMeetingIdAndPasscode(meetingLink, meetingPasscode, provider);
		}, [meetingLink, meetingPasscode, provider]);

		console.log("meetingDetails", meetingDetails);
		if (!meetingConnector) {
		return <div>Invalid provider.</div>;
		}

components/hooks/blueJeans-provider/useBlueJeansMeeting.js

0 → 100644

+118 −0

Original line number	Diff line number	Diff line
		import {
		BJNWebClientSDK,
		ConnectionState,
		ErrorInfo,
		Error,
		ContentShareState,
		} from "@bluejeans/web-client-sdk";
		import { useEffect, useRef, useState } from "react";

		let onParticipantsAddedToWR = (message) => {
		console.log("Waiting Room : New participants joined ", message);
		};

		let onParticipantsRemovedFromWR = (message) => {
		console.log("Waiting Room : Participants left ", message);
		};

		// sdk.meetingService.moderatorWaitingRoomService.events.added.unsubscribe(
		// onParticipantsAddedToWR
		// );
		// sdk.meetingService.moderatorWaitingRoomService.events.removed.unsubscribe(
		// onParticipantsRemovedFromWR
		// );

		function subscribeEvents(webrtcSDK, setParticipants) {
		webrtcSDK.meetingService.observe("connectionState", () => {
		if (
		webrtcSDK.meetingService.connectionState === ConnectionState.CONNECTED
		) {
		webrtcSDK.meetingService.participantService.observe(
		"participants",
		() => {
		const participants =
		webrtcSDK.meetingService.participantService.participants;
		console.log("participants", participants)
		setParticipants(participants);
		}
		);
		}
		});

		// webrtcSDK.meetingService.moderatorWaitingRoomService.events.added.subscribe(
		// onParticipantsAddedToWR
		// );

		// webrtcSDK.meetingService.moderatorWaitingRoomService.events.removed.subscribe(
		// onParticipantsRemovedFromWR
		// );
		}

		function joinMeeting(webrtcSDK, meetingProps, setParticipants) {
		console.log("onJoin Meeting", webrtcSDK)
		webrtcSDK.meetingService
		.joinMeeting(
		meetingProps.meetingId,
		meetingProps.passcode,
		meetingProps.name
		)
		.then(() => {
		subscribeEvents(webrtcSDK, setParticipants);
		// webrtcSDK.meetingService.setAudioMuted(true);
		// webrtcSDK.meetingService.setVideoMuted(true);
		// // Disable self video preview, so self view accurate reflects in-meeting mute state
		// webrtcSDK.meetingService.setSelfVideoPreviewEnabled(false);
		});
		}

		function leaveMeeting(webrtcSDK) {
		webrtcSDK.meetingService.endMeeting();
		}

		function startShare(webrtcSDK) {
		webrtcSDK.meetingService.contentService.startContentShare();
		}

		function stopShare(webrtcSDK) {
		if (
		webrtcSDK.meetingService.contentService.contentShareState ==
		ContentShareState.STARTED
		) {
		webrtcSDK.meetingService.contentService.stopContentShare();
		} else {
		console.log("No shared content");
		}
		}

		function useBlueJeansMeeting(meetingId, passcode, name) {
		// const [webrtcSDK, setWebrtcSDK] = useState();
		const [participants, setParticipants] = useState([]);

		const webrtcSDK = useRef();

		useEffect(() => {
		const webSDK = new BJNWebClientSDK();
		// setWebrtcSDK(webSDK);
		webrtcSDK.current = webSDK;
		console.log("webrtcSDK======>", webrtcSDK.current, webSDK);

		joinMeeting(webrtcSDK.current, { meetingId, passcode, name }, setParticipants);
		}, []);

		return {
		participants,
		leaveMeeting: () => {
		leaveMeeting(webrtcSDK.current);
		},

		startShare: () => {
		startShare(webrtcSDK.current);
		},

		stopShare: () => {
		stopShare(webrtcSDK.current);
		},
		};
		}

		export default useBlueJeansMeeting;

package-lock.json

+431 −32

File changed.

Preview size limit exceeded, changes collapsed.

package.json

+2 −1

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@
		"version": "0.1.0",
		"private": true,
		"scripts": {
		"dev": "next dev",
		"dev": "next dev -p 8080",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
		@@ -11,6 +11,7 @@
		"dependencies": {
		"@azure/communication-calling": "^1.9.1",
		"@azure/communication-common": "^2.2.0",
		"@bluejeans/web-client-sdk": "^1.4.0",
		"@next/font": "13.0.7",
		"@zoomus/websdk": "^2.4.5",
		"axios": "^1.2.1",

pages/index.js

+29 −3

Original line number	Diff line number	Diff line
		@@ -29,7 +29,11 @@ function Home() {
		{join ? (
		<ConferenceScreen {...meetingDetails} />
		) : (
		<MeetingInput setJoin={setJoin} setMeetingDetails={setMeetingDetails} />
		<MeetingInput
		setJoin={setJoin}
		setMeetingDetails={setMeetingDetails}
		meetingDetails={meetingDetails}
		/>
		)}
		</div>
		);
		@@ -37,7 +41,7 @@ function Home() {

		export default Home;

		function MeetingInput({ setJoin, setMeetingDetails }) {
		function MeetingInput({ setJoin, setMeetingDetails, meetingDetails }) {
		return (
		<div>
		<input
		@@ -50,11 +54,24 @@ function MeetingInput({ setJoin, setMeetingDetails }) {
		}));
		}}
		autoComplete="true"
		style={{ padding: "10px", width: "100%", margin: "20px 0px" }}
		/>

		<input
		type="number"
		name="passcode"
		placeholder="passcode"
		onChange={(e) =>
		setMeetingDetails((prev) => ({
		...prev,
		meetingPasscode: e.target.value,
		}))
		}
		style={{ padding: "10px", width: "100%" }}
		/>

		<div style={{ marginTop: "20px" }}>
		{["teams", "zoom", "webex", "jitsi"].map((provider, i) => (
		{["teams", "zoom", "webex", "jitsi", "blueJeans"].map((provider, i) => (
		<button
		key={i}
		style={{
		@@ -66,6 +83,15 @@ function MeetingInput({ setJoin, setMeetingDetails }) {
		borderRadius: "10px",
		}}
		onClick={() => {
		if (!meetingDetails.meetingLink) {
		alert("Meeting Link is Required!");
		return;
		}

		// if (provider === "blueJeans" && !meetingDetails.meetingPasscode) {
		// alert("meetingPasscode is Required!");
		// return;
		// }
		setMeetingDetails((prev) => ({ ...prev, provider }));
		setJoin(true);
		}}