Issue on playing video on ios

[ahmedShaheer3]

Description

Hey there i am trying to send video message its working fine the url i am getting after uploading video is not working. when i trying to play that url in any video player in react native its not playing giving me error of "The server is not correctly configured". its working fine android successfully playing video but on ios its not playing my video url is

"https://a41.chat.agora.io/41909830/1147502/chatfiles/1c4ba910-0c33-11ee-b19d-0b7dfceb0053"
i went to mention its working fine before 1.1.2-beta5 i have tested at that time its working good but now its not playing the url although if you paste this url on chrome its downloading the video not playing it.

Version

1.1.1

Output of npx react-native info

System:
OS: macOS 13.0
CPU: (8) arm64 Apple M2
Memory: 134.06 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.7.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.0 - /opt/homebrew/bin/npm
Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.0 - /Users/algoacepc/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

npx react-native run-android

create a video message by

    const thumbnailPath = response?.path?.replace('file://', '');
    console.log('thunbnail response', response);

    //creating video message
    const msg = ChatMessage.createVideoMessage(convId, filePath, convType, {
      displayName: fileName,
      thumbnailLocalPath: thumbnailPath,
      duration: 5,
      width: 200,
      height: 200,
      isChatThread: false,
    });

then after uploading try to play video url with some video player for that i am using react native video

Snack, code example, screenshot, or link to a repository

https://github.com

Platform

• All
• Android
• iOS

SimulatorOrDevice

• All
• Simulator
• Device

iOSVersion

• All
• iOS Earlier than 8
• iOS 8
• iOS 9
• iOS 10
• iOS 11
• iOS 12
• iOS 13
• iOS 14
• iOS 15
• iOS 16 or above
• Android Earlier than API Level 23
• Android API Level 23
• Android API Level 24
• Android API Level 25
• Android API Level 26
• Android API Level 27
• Android API Level 28
• Android API Level 29
• Android API Level 30
• Android API Level 31
• Android API Level 32
• Android API Level 33 or above

[AsteriskZuo]

Can you give a specific example of your video file local path and remote url?

[ahmedShaheer3]

https://a41.chat.agora.io/41909830/1147502/chatfiles/1c4ba910-0c33-11ee-b19d-0b7dfceb0053

this is video url i am trying to play if i paste this in browser its downloading rather then playing and if i try to play this url in react native video player its giving me error "The server is not correctly configured

[AsteriskZuo]

It is recommended to download to the local and use the local url to play.
or change video player.

[AsteriskZuo]

See also the examples here. Including the processing of receiving and sending video messages.
https://github.com/AsteriskZuo/rn_msg_demo

[ahmedShaheer3]

hey there i have checked on android the video streaming working fine but on ios is not working is there any way to stream the video because before video streaming is working fine on previous version but now its not.

[ahmedShaheer3]

hey there i have read your source code there i found following code

const VideoMessageRenderItemDefault: ListRenderItem =
React.memo(
(info: ListRenderItemInfo): React.ReactElement | null => {
const { item } = info;
const msg = item as VideoMessageItemType;
const { width: wWidth } = useWindowDimensions();
const [width, setWidth] = React.useState(wWidth * 0.6);
const [height, setHeight] = React.useState((wWidth * 0.6 * 4) / 3);
const video = React.useRef

  const onCheck = async () => {
    const ret = await new FileHandler().isExisted({
      fileUri: updateUrl(msg.localPath),
    });
    if (ret) {
      setUrl(updateUrl(msg.localPath));
    }
  };

  const hw = (params: {
    height: number;
    width: number;
  }): { width: number; height: number } => {
    const { height, width } = params;
    let ret = params;
    if (width / height >= 10) {
      const w = wWidth * 0.6;
      ret = {
        width: w,
        height: w * 0.1,
      };
    } else if (width * 4 >= 3 * height) {
      const w = wWidth * 0.6;
      ret = {
        width: w,
        height: w * (height / width),
      };
    } else if (width * 10 >= 1 * height) {
      const h = (wWidth * 0.6 * 4) / 3;
      ret = {
        width: (width / height) * h,
        height: h,
      };
    } else {
      // width / height < 1 / 10
      const h = (wWidth * 0.6 * 4) / 3;
      ret = {
        width: 0.1 * h,
        height: h,
      };
    }
    return ret;
  };

  if (item.state === 'recalled') {
    return <RenderRecallMessage {...item} />;
  }

  return (
    <View
      style={[
        styles.container,
        {
          flexDirection: msg.isSender ? 'row-reverse' : 'row',
          // maxWidth: '80%',
        },
      ]}
    >
      <View
        style={[
          {
            marginRight: msg.isSender ? undefined : 10,
            marginLeft: msg.isSender ? 10 : undefined,
          },
        ]}
      >
        <Ionicons name="person-circle" size={24} color="black" />
      </View>
      <Pressable
        onPress={() => {
          if (status?.isPlaying) {
            status.isPlaying
              ? video.current?.pauseAsync()
              : video.current?.playAsync();
          }
        }}
      >
        <Video
          ref={video}
          style={{ height: height, width: width, borderRadius: 10 }}
          source={{
            // uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
            uri: url,
          }}
          useNativeControls
          resizeMode={ResizeMode.CONTAIN}
          isLooping
          onPlaybackStatusUpdate={(s) =>
            setStatus(() => {
              dlog.log('video:onPlaybackStatusUpdate:', s);
              return s;
            })
          }
          onReadyForDisplay={(e) => {
            dlog.log('video:onReadyForDisplay:', e);
            const ret = hw(e.naturalSize);
            setHeight(ret.height);
            setWidth(ret.width);
          }}
          onError={(e) => {
            dlog.log('video:onError:', e);
            onCheck();
          }}
          onLoad={(s) => {
            dlog.log('video:status:', s);
          }}
        />
      </Pressable>
      <View
        style={[
          {
            marginRight: msg.isSender ? 10 : undefined,
            marginLeft: msg.isSender ? undefined : 10,
            opacity: 1,
          },
        ]}
      >
        <StateLabel state={msg.state} />
      </View>
    </View>
  );
}

);

in this code for veiwing the video you are not downloading the video rather then you are just checking if video exit in local storage or not if any error occur while playing video. and also i had notice that you url for playing video is following look like this
// uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"

but i am recieving of video url like this following
https://a41.chat.agora.io/41909830/1147502/chatfiles/1c4ba910-0c33-11ee-b19d-0b7dfceb0053