Remote Image Help - RemoteHelper/server GitHub Wiki

In this section, we'll cover how to request help to the end user, while using a mix of images and text to do so.

From now on, we'll use the following terms:

  • Server: A RemoteHelper instance.
  • Client: The server running the remote task.
  • User: The human user helping the remote task.
  • User page: The webpage the User interacts with.

Requesting Remote Help

Client -> Server

We send the Server the url of our media image, and the hook where we wish to receive the events.

  • Request:

    • URL: server.com/api/help/image
    • Type: POST
    • Content:
    {
            "mediaURL": url,
            "eventsURL": url
    }
    

The server responds with the unique URL served to the user, and a specific done route where the server is listening, waiting for us to tell him in that route that the helping job is done.

  • Response:
    • Status: 200

    • Body:

      {
          "userURL": url,
          "doneURL": url
      }
      

Sending events to the client

Server -> Client

Anytime the user generates an event on the user page, it gets forwarded all the way to the client. Some basic filtering is done server-side.

  • Request:

    • URL: eventsURL
    • Type: POST
    • Body:
    {
        "type": `mousedown` | `mouseup` | `keydown`,
        "content": {
            // If `mousedown` or `mouseup`
            "button": `left` | `middle` | `right`,
            "coordinates": {
                "x": Float
                "y": Float
            }
            // If `keydown`
            "code": Integer,
            "modifiers": [ `ctrlKey`, `altKey`, `shiftKey`, `metaKey` ]
        },
        "timestamp": Integer
    }
    

    Note that the timestamp property is just jQuery's event.timeStamp.

The client can choose to send back another image to the user. In that case, it must send back another mediaURL pointing to the image.

  • Response:

    • Status: 200
    • Payload (if present):
    {
        "mediaURL": url
    }
    

Telling the Server that we are done

Client -> Server

Once the client thinks it won't need more help, it can request to the server to stop sending events.

To do so, it must send back the original user url as a proof. Additionally, it can send an optional doneText that will be displayed to the user. (For example, telling him/her that it can close the window).

  • Request:

    • URL: doneURL
    • Type: POST
    • Body:
    {
        "authURL": userUrl,
        "doneText": String
    }
    
  • Response:

    • Status: 200 | 403