From 42d12682626ce63d97f9efa3ce5c987723476c5c Mon Sep 17 00:00:00 2001 From: Takeshi NAMAO Date: Mon, 4 Dec 2023 17:24:48 +0900 Subject: [PATCH 1/4] =?UTF-8?q?h265=5Fparams=20=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- instructions.json | 3 + src/app/actions.ts | 16 +++++ src/app/slice.ts | 8 +++ .../DevtoolsPane/VideoH265ParamsForm.tsx | 58 +++++++++++++++++++ src/components/DevtoolsPane/index.tsx | 4 ++ .../Header/DownloadReportButton.tsx | 2 + src/types.ts | 4 ++ src/utils.ts | 8 +++ 8 files changed, 103 insertions(+) create mode 100644 src/components/DevtoolsPane/VideoH265ParamsForm.tsx diff --git a/instructions.json b/instructions.json index 8d40e430..d75b837d 100644 --- a/instructions.json +++ b/instructions.json @@ -50,6 +50,9 @@ "videoH264Params": { "description": "映像のコーデックタイプに H264 を指定した場合の設定を指定します。" }, + "videoH265Params": { + "description": "映像のコーデックタイプに H265 を指定した場合の設定を指定します。" + }, "videoAV1Params": { "description": "映像のコーデックタイプに AV1 を指定した場合の設定を指定します。" }, diff --git a/src/app/actions.ts b/src/app/actions.ts index c2b44ab0..1e6eed1a 100644 --- a/src/app/actions.ts +++ b/src/app/actions.ts @@ -145,6 +145,9 @@ export const setInitialParameter = () => { if (qsParams.videoH264Params !== undefined) { dispatch(slice.actions.setVideoH264Params(qsParams.videoH264Params)) } + if (qsParams.videoH265Params !== undefined) { + dispatch(slice.actions.setVideoH265Params(qsParams.videoH265Params)) + } if (qsParams.videoAV1Params !== undefined) { dispatch(slice.actions.setVideoAV1Params(qsParams.videoAV1Params)) } @@ -256,6 +259,7 @@ export const setInitialParameter = () => { forwardingFilter, videoVP9Params, videoH264Params, + videoH265Params, videoAV1Params, } = getState() if (e2ee) { @@ -316,6 +320,10 @@ export const setInitialParameter = () => { if (videoH264Params !== '') { dispatch(slice.actions.setEnabledVideoH264Params(true)) } + // videoH265Params が存在した場合は enabledH265Params をセットする + if (videoH265Params !== '') { + dispatch(slice.actions.setEnabledVideoH265Params(true)) + } // videoAV1Params が存在した場合は enabledVideoAV1Params をセットする if (videoAV1Params !== '') { dispatch(slice.actions.setEnabledVideoAV1Params(true)) @@ -358,6 +366,10 @@ export const copyURL = () => { appendAudioVideoParams && state.videoH264Params !== '' && state.enabledVideoH264Params ? state.videoH264Params : undefined, + videoH265Params: + appendAudioVideoParams && state.videoH265Params !== '' && state.enabledVideoH265Params + ? state.videoH265Params + : undefined, videoAV1Params: appendAudioVideoParams && state.videoAV1Params !== '' && state.enabledVideoAV1Params ? state.videoAV1Params @@ -962,6 +974,7 @@ function pickConnectionOptionsState(state: SoraDevtoolsState): ConnectionOptions enabledForwardingFilter: state.enabledForwardingFilter, enabledVideoVP9Params: state.enabledVideoVP9Params, enabledVideoH264Params: state.enabledVideoH264Params, + enabledVideoH265Params: state.enabledVideoH265Params, enabledVideoAV1Params: state.enabledVideoAV1Params, ignoreDisconnectWebSocket: state.ignoreDisconnectWebSocket, audioLyraParamsBitrate: state.audioLyraParamsBitrate, @@ -979,6 +992,7 @@ function pickConnectionOptionsState(state: SoraDevtoolsState): ConnectionOptions videoCodecType: state.videoCodecType, videoVP9Params: state.videoVP9Params, videoH264Params: state.videoH264Params, + videoH265Params: state.videoH265Params, videoAV1Params: state.videoAV1Params, role: state.role, } @@ -1893,6 +1907,7 @@ export const { setEnabledSignalingUrlCandidates, setEnabledVideoVP9Params, setEnabledVideoH264Params, + setEnabledVideoH265Params, setEnabledVideoAV1Params, setAudioStreamingLanguageCode, setEnabledAudioStreamingLanguageCode, @@ -1935,5 +1950,6 @@ export const { setVideoTrack, setVideoVP9Params, setVideoH264Params, + setVideoH265Params, setVideoAV1Params, } = slice.actions diff --git a/src/app/slice.ts b/src/app/slice.ts index 90c9a686..1021c36b 100644 --- a/src/app/slice.ts +++ b/src/app/slice.ts @@ -60,6 +60,7 @@ const initialState: SoraDevtoolsState = { enabledSignalingUrlCandidates: false, enabledVideoVP9Params: false, enabledVideoH264Params: false, + enabledVideoH265Params: false, enabledVideoAV1Params: false, audioStreamingLanguageCode: '', enabledAudioStreamingLanguageCode: false, @@ -116,6 +117,7 @@ const initialState: SoraDevtoolsState = { videoInputDevices: [], videoVP9Params: '', videoH264Params: '', + videoH265Params: '', videoAV1Params: '', version: packageJSON.version, cameraDevice: true, @@ -245,6 +247,9 @@ export const slice = createSlice({ setEnabledVideoH264Params: (state, action: PayloadAction) => { state.enabledVideoH264Params = action.payload }, + setEnabledVideoH265Params: (state, action: PayloadAction) => { + state.enabledVideoH265Params = action.payload + }, setEnabledVideoAV1Params: (state, action: PayloadAction) => { state.enabledVideoAV1Params = action.payload }, @@ -355,6 +360,9 @@ export const slice = createSlice({ setVideoH264Params: (state, action: PayloadAction) => { state.videoH264Params = action.payload }, + setVideoH265Params: (state, action: PayloadAction) => { + state.videoH265Params = action.payload + }, setVideoAV1Params: (state, action: PayloadAction) => { state.videoAV1Params = action.payload }, diff --git a/src/components/DevtoolsPane/VideoH265ParamsForm.tsx b/src/components/DevtoolsPane/VideoH265ParamsForm.tsx new file mode 100644 index 00000000..fff907df --- /dev/null +++ b/src/components/DevtoolsPane/VideoH265ParamsForm.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import { Col, FormControl, FormGroup, Row } from 'react-bootstrap' + +import { setEnabledVideoH265Params, setVideoH265Params } from '@/app/actions' +import { useAppDispatch, useAppSelector } from '@/app/hooks' +import { isFormDisabled } from '@/utils' + +import { TooltipFormCheck } from './TooltipFormCheck' + +export const VideoH265ParamsForm: React.FC = () => { + const enabledVideoH265Params = useAppSelector((state) => state.enabledVideoH265Params) + const videoH265Params = useAppSelector((state) => state.videoH265Params) + const connectionStatus = useAppSelector((state) => state.soraContents.connectionStatus) + const disabled = isFormDisabled(connectionStatus) + const dispatch = useAppDispatch() + const onChangeSwitch = (event: React.ChangeEvent): void => { + dispatch(setEnabledVideoH265Params(event.target.checked)) + } + const onChangeText = (event: React.ChangeEvent): void => { + dispatch(setVideoH265Params(event.target.value)) + } + return ( + <> + + + + + videoH265Params + + + + + {enabledVideoH265Params ? ( + + + + + + + + ) : null} + + ) +} diff --git a/src/components/DevtoolsPane/index.tsx b/src/components/DevtoolsPane/index.tsx index 29faead5..cca4c8b2 100644 --- a/src/components/DevtoolsPane/index.tsx +++ b/src/components/DevtoolsPane/index.tsx @@ -65,6 +65,7 @@ import { VideoCodecTypeForm } from './VideoCodecTypeForm' import { VideoContentHintForm } from './VideoContentHintForm' import { VideoForm } from './VideoForm' import { VideoH264ParamsForm } from './VideoH264ParamsForm' +import { VideoH265ParamsForm } from './VideoH265ParamsForm' import { VideoInputForm } from './VideoInputForm' import { VideoTrackForm } from './VideoTrackForm' import { VideoVP9ParamsForm } from './VideoVP9ParamsForm' @@ -240,12 +241,14 @@ const RowAdvancedSignalingOptions: React.FC = () => { const audioLyraParamsBitrate = useAppSelector((state) => state.audioLyraParamsBitrate) const enabledVideoVP9Params = useAppSelector((state) => state.enabledVideoVP9Params) const enabledVideoH264Params = useAppSelector((state) => state.enabledVideoH264Params) + const enabledVideoH265Params = useAppSelector((state) => state.enabledVideoH265Params) const enabledVideoAV1Params = useAppSelector((state) => state.enabledVideoAV1Params) const enabledOptions = [ audioStreamingLanguageCode !== '', audioLyraParamsBitrate !== '', enabledVideoVP9Params, enabledVideoH264Params, + enabledVideoH265Params, enabledVideoAV1Params, ].some((e) => e) const linkClassNames = ['btn-collapse-options'] @@ -278,6 +281,7 @@ const RowAdvancedSignalingOptions: React.FC = () => { + diff --git a/src/components/Header/DownloadReportButton.tsx b/src/components/Header/DownloadReportButton.tsx index bbd5bb2e..275e1db9 100644 --- a/src/components/Header/DownloadReportButton.tsx +++ b/src/components/Header/DownloadReportButton.tsx @@ -42,6 +42,7 @@ function createDownloadReport(): DownloadReport { enabledSignalingUrlCandidates: state.enabledSignalingUrlCandidates, enabledVideoVP9Params: state.enabledVideoVP9Params, enabledVideoH264Params: state.enabledVideoH264Params, + enabledVideoH265Params: state.enabledVideoH265Params, enabledVideoAV1Params: state.enabledVideoAV1Params, facingMode: state.facingMode, fakeVolume: state.fakeVolume, @@ -75,6 +76,7 @@ function createDownloadReport(): DownloadReport { videoTrack: state.videoTrack, videoVP9Params: state.videoVP9Params, videoH264Params: state.videoH264Params, + videoH265Params: state.videoH265Params, videoAV1Params: state.videoAV1Params, } const report = { diff --git a/src/types.ts b/src/types.ts index 74775b0b..76eed5b2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -80,6 +80,7 @@ export type SoraDevtoolsState = { enabledForwardingFilter: boolean enabledVideoVP9Params: boolean enabledVideoH264Params: boolean + enabledVideoH265Params: boolean enabledVideoAV1Params: boolean audioStreamingLanguageCode: string enabledAudioStreamingLanguageCode: boolean @@ -138,6 +139,7 @@ export type SoraDevtoolsState = { videoInputDevices: MediaDeviceInfo[] videoVP9Params: string videoH264Params: string + videoH265Params: string videoAV1Params: string version: string cameraDevice: boolean @@ -347,6 +349,7 @@ export type ConnectionOptionsState = Pick< | 'enabledForwardingFilter' | 'enabledVideoVP9Params' | 'enabledVideoH264Params' + | 'enabledVideoH265Params' | 'enabledVideoAV1Params' | 'ignoreDisconnectWebSocket' | 'audioLyraParamsBitrate' @@ -364,6 +367,7 @@ export type ConnectionOptionsState = Pick< | 'videoCodecType' | 'videoVP9Params' | 'videoH264Params' + | 'videoH265Params' | 'videoAV1Params' | 'role' > diff --git a/src/utils.ts b/src/utils.ts index a063e3d3..d1b06ab7 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -165,6 +165,7 @@ export function parseQueryString(): Partial { videoCodecType: parseSpecifiedStringParameter(qs.videoCodecType, VIDEO_CODEC_TYPES), videoVP9Params: parseStringParameter(qs.videoVP9Params), videoH264Params: parseStringParameter(qs.videoH264Params), + videoH265Params: parseStringParameter(qs.videoH265Params), videoAV1Params: parseStringParameter(qs.videoAV1Params), audioInput: parseStringParameter(qs.audioInput), videoInput: parseStringParameter(qs.videoInput), @@ -703,6 +704,13 @@ export function createConnectOptions( connectionOptionsState.videoH264Params, ) } + // videoH265Params + if (connectionOptionsState.enabledVideoH265Params) { + connectionOptions.videoH265Params = parseMetadata( + true, + connectionOptionsState.videoH265Params, + ) + } // videoVP9Params if (connectionOptionsState.enabledVideoAV1Params) { connectionOptions.videoAV1Params = parseMetadata(true, connectionOptionsState.videoAV1Params) From 0a4476e869e4cd0339e7dda82ccc5c2b4a1eedc3 Mon Sep 17 00:00:00 2001 From: Takeshi NAMAO Date: Mon, 4 Dec 2023 17:25:54 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E5=A4=89=E6=9B=B4=E5=B1=A5=E6=AD=B4?= =?UTF-8?q?=E3=81=AB=E8=BF=BD=E8=A8=98=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGES.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 8eaa2cdc..61c91249 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -11,6 +11,8 @@ ## develop +- [ADD] `h265_params` のフォームを追加する + - @tnamao - [ADD] コネクション ID とクライアント ID の表示にラベルを追加する - @tnamao - [ADD] Sora 接続後にセッション ID の表示を追加する From 93ddbc589a235e363f7722e4c1e8aacfafd7fdc6 Mon Sep 17 00:00:00 2001 From: Takeshi NAMAO Date: Mon, 4 Dec 2023 17:39:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?sora-js-sdk=202023.2.0-canary.14=20?= =?UTF-8?q?=E3=81=AB=E4=B8=8A=E3=81=92=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5593ce85..6d271ccd 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "redux": "4.2.1", "redux-logger": "3.0.6", "redux-thunk": "2.4.2", - "sora-js-sdk": "2023.2.0-canary.13" + "sora-js-sdk": "2023.2.0-canary.14" }, "devDependencies": { "@biomejs/biome": "1.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbfbbf71..d5c1a107 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,8 +48,8 @@ dependencies: specifier: 2.4.2 version: 2.4.2(redux@4.2.1) sora-js-sdk: - specifier: 2023.2.0-canary.13 - version: 2023.2.0-canary.13 + specifier: 2023.2.0-canary.14 + version: 2023.2.0-canary.14 devDependencies: '@biomejs/biome': @@ -2913,8 +2913,8 @@ packages: engines: {node: '>=14.16'} dev: true - /sora-js-sdk@2023.2.0-canary.13: - resolution: {integrity: sha512-nMkF2NN49462621PVS8b8D73uty0LC8CcKJG9rLOiUhEYoNt3EzoCMhHHXpHscmoS0mraZryHL1XAMBsb3MsDA==} + /sora-js-sdk@2023.2.0-canary.14: + resolution: {integrity: sha512-EzyeZobLwfSKkh/fYG0BISEOYDWMGvC97eM475cli7dRDEX3bMCfabRPPm0ZRvY24GYpHDSt7dCNOuzm1ssz9w==} engines: {node: '>=18'} dev: false From f6516ff23e489cbdb056f936c8b5570d00b33922 Mon Sep 17 00:00:00 2001 From: Takeshi NAMAO Date: Mon, 4 Dec 2023 17:41:29 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E5=A4=89=E6=9B=B4=E5=B1=A5=E6=AD=B4?= =?UTF-8?q?=E3=82=92=E6=9B=B4=E6=96=B0=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index 61c91249..24804666 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -57,7 +57,7 @@ - @voluntas - [CHANGE] 一時的に ; ありにする - @voluntas -- [UPDATE] sora-js-sdk のバージョンを 2023.2.0-canary.2 に上げる +- [UPDATE] sora-js-sdk のバージョンを 2023.2.0-canary.14 に上げる - @voluntas - [UPDATE] @shiguredo/virtual-background のバージョンを 2023.2.0 に上げる - @sile