Embedded Layout not showing the microphone button in iphone (ios)

Community Support
1

Description

We are using the rocketchat embedded URL to add chat to our applications android and ios
the controls that we need are upload image, record video, record audio
images and videos are working fine
the problem is the layout in the iphone is not showing the microphone button
in the android it is working fine
can anyone tell me what is the reason?

Server Setup Information

  • Version of Rocket.Chat Server: 2.4.0
  • Operating System: linux
  • Deployment Method: tar
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled
  • NodeJS Version: v8.17.0
  • MongoDB Version: 4.0.14
  • Proxy:
  • Firewalls involved:

Any additional Information

3

I have spent a very good time trying to figure out a solution to this issue, but I couldn’t find a straight forward solution, cause it’s a platform-specific (iOS with UIWebView or the new WKWebView) for some reasons iOS prevent uploading files (audio, video…) using these two views.

If you try to open the rocket chat embedded layout on iOS-Chrome, you will face the same problem, but if you open it using Safari, you will notice that all are working (uploading files, audio, video…).

So here comes the workaround that would make our life easier, although it will cost us some UI sacrificing.

You need to develop a feature to record a voice, or a video if you would like to and save the audio/video file somewhere and then upload it using the Rocket Chat APIs to the required channel.

While uploading, you need to tell the rocket chat backend of what type is your file. And here is the solution:

  1. Record a voice using a microphone near to your embedded

  2. Once you are OK with the file and you saved it locally somewhere, you need to upload it using the following function:

    private void SendFileToRocketChat(string groupId, string filePath, string fileType)
{

    var url = "your-rocket-chat-domain.com" + "/api/v1/rooms.upload/" + groupId;
    string boundary = "----------------------------" + DateTime.Now.Ticks.ToString("x");

    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
    request.ContentType = "multipart/form-data; boundary=" + boundary;
    request.Method = "POST";
    request.KeepAlive = true;
    request.Headers.Add("X-Auth-Token", UserAuth); //your user 'admin' authentication token
    request.Headers.Add("X-User-Id", UserId); //your user 'admin' authentication user ID

    Stream memStream = new System.IO.MemoryStream();
    var boundarybytes = System.Text.Encoding.ASCII.GetBytes("\r\n--" + boundary + "\r\n");
    var endBoundaryBytes = System.Text.Encoding.ASCII.GetBytes("\r\n--" + boundary + "--");
    string formdataTemplate = "\r\n--" + boundary + "\r\nContent-Disposition: form-data; name=\"{0}\";\r\n\r\n{1}";

    string headerTemplate = "Content-Disposition: form-data; name=\"file\"; filename=\"{1}\"\r\n" + "Content-Type: " + fileType + "\r\n\r\n";
    memStream.Write(boundarybytes, 0, boundarybytes.Length);
    var header = string.Format(headerTemplate, "file", filePath);
    var headerbytes = System.Text.Encoding.UTF8.GetBytes(header);
    memStream.Write(headerbytes, 0, headerbytes.Length);
    using (var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read))
    {
        var buffer = new byte[1024];
        var bytesRead = 0;
        while ((bytesRead = fileStream.Read(buffer, 0, buffer.Length)) != 0)
        {
            memStream.Write(buffer, 0, bytesRead);
        }
    }

    memStream.Write(endBoundaryBytes, 0, endBoundaryBytes.Length);
    request.ContentLength = memStream.Length;
    using (Stream requestStream = request.GetRequestStream())
    {
        memStream.Position = 0;
        byte[] tempBuffer = new byte[memStream.Length];
        memStream.Read(tempBuffer, 0, tempBuffer.Length);
        memStream.Close();
        requestStream.Write(tempBuffer, 0, tempBuffer.Length);
    }
    using (var response = request.GetResponse())
    {
        Stream stream2 = response.GetResponseStream();
        StreamReader reader2 = new StreamReader(stream2);
        string res = reader2.ReadToEnd();
    }
}

  3. Now you can call your function as follows:

    SendFileToRocketChat("yourgroupID","/file/audio/sample.mp3","audio/mp3");

  4. And if you need to upload a video, use the same function:

    SendFileToRocketChat("yourgroupID","/file/video/sample.mp4","video/mp4");

I hope this would make a workaround until we find a proper solution for this issue.