search

easemob / react-native-chat-sdk

MIT License
2 stars 10 forks source link

Issue on playing video on ios #30

Open ahmedShaheer3 opened 1 year ago

ahmedShaheer3 commented 1 year ago

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

SimulatorOrDevice

iOSVersion

AsteriskZuo commented 1 year ago

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

ahmedShaheer3 commented 1 year ago

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 commented 1 year ago

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

AsteriskZuo commented 1 year ago

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

ahmedShaheer3 commented 1 year ago

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 commented 1 year ago

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