h265_params 対応

CHANGES.md

@@ -11,6 +11,8 @@
 
 ## develop
 
+- [ADD] `h265_params` のフォームを追加する
+  - @tnamao
 - [ADD] コネクション ID とクライアント ID の表示にラベルを追加する
   - @tnamao
 - [ADD] Sora 接続後にセッション ID の表示を追加する
@@ -55,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

instructions.json

@@ -50,6 +50,9 @@
   "videoH264Params": {
     "description": "映像のコーデックタイプに H264 を指定した場合の設定を指定します。"
   },
+  "videoH265Params": {
+    "description": "映像のコーデックタイプに H265 を指定した場合の設定を指定します。"
+  },
   "videoAV1Params": {
     "description": "映像のコーデックタイプに AV1 を指定した場合の設定を指定します。"
   },

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",

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

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<boolean>) => {
       state.enabledVideoH264Params = action.payload
     },
+    setEnabledVideoH265Params: (state, action: PayloadAction<boolean>) => {
+      state.enabledVideoH265Params = action.payload
+    },
     setEnabledVideoAV1Params: (state, action: PayloadAction<boolean>) => {
       state.enabledVideoAV1Params = action.payload
     },
@@ -355,6 +360,9 @@ export const slice = createSlice({
     setVideoH264Params: (state, action: PayloadAction<string>) => {
       state.videoH264Params = action.payload
     },
+    setVideoH265Params: (state, action: PayloadAction<string>) => {
+      state.videoH265Params = action.payload
+    },
     setVideoAV1Params: (state, action: PayloadAction<string>) => {
       state.videoAV1Params = action.payload
     },

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<HTMLInputElement>): void => {
+    dispatch(setEnabledVideoH265Params(event.target.checked))
+  }
+  const onChangeText = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    dispatch(setVideoH265Params(event.target.value))
+  }
+  return (
+    <>
+      <Row className="form-row">
+        <Col className="col-auto">
+          <FormGroup className="form-inline" controlId="enabledVideoH265Params">
+            <TooltipFormCheck
+              kind="videoH265Params"
+              checked={enabledVideoH265Params}
+              onChange={onChangeSwitch}
+              disabled={disabled}
+            >
+              videoH265Params
+            </TooltipFormCheck>
+          </FormGroup>
+        </Col>
+      </Row>
+      {enabledVideoH265Params ? (
+        <Row className="form-row">
+          <Col className="col-auto">
+            <FormGroup className="form-inline" controlId="videoH265Params">
+              <FormControl
+                className="flex-fill"
+                as="textarea"
+                placeholder="videoH265Paramsを指定"
+                value={videoH265Params}
+                onChange={onChangeText}
+                rows={10}
+                cols={100}
+                disabled={disabled}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+      ) : null}
+    </>
+  )
+}

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 = () => {
           <VideoVP9ParamsForm />
           <VideoAV1ParamsForm />
           <VideoH264ParamsForm />
+          <VideoH265ParamsForm />
         </div>
       </Collapse>
     </Row>

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 = {

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

src/utils.ts

@@ -165,6 +165,7 @@ export function parseQueryString(): Partial<QueryStringParameters> {
     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)