Welcome to the Panopto Community

Please note: All new registrants to the Panopto Community Forum must be approved by a forum moderator or admin. As such, if you navigate to a feature that is members-only, you may receive an error page if your registration has not yet been approved. We apologize for any inconvenience and are approving new members as quickly as possible.

Call API via Javascript

Robin BeyerRobin Beyer Tyro
in API

Hi there,

this is my first post here 😊

I have a basic question about the API. Is it possible to call it via Javascript? If yes, I have some more questions.

Out of a web-based application (login via OAuth2) we would like to control Panopto. It is running in a browser. Via API-calls I would like to do the following actions:

  • Name the session and set length
  • Start the record
  • Extend the length of the session while it is recorded
  • Stop the session (automatically when the set length is reached or manually via a stop button)
  • Save the record at the personal space of the signed in user
  • If possible: show instant replay

The application runs stand-alone on a local node.js-Server and can only be used by one user at the same time.

Panopto is a new thing for me. I have no idea if it's possible to develop this. Unfortunately I have no idea where to look for solutions as well.

Any help or hint is appreciated. Thank you!

Tagged:

Answers

  • Michael EspeyMichael Espey Superstar

    This page is a great place to start on the Panopto API. The Panopto Github also has some good examples. Assuming your application can handle OAuth, it should be fine, but I am not sure that all that you wish will be possible depending on the requirements. I think most of this could be done as a mix of either the SOAP or REST api and the JS api to get a player.

    Knowing the use case would be good in identifying what would work.

    I am looking into a "one button studio" type setup with Panopto being the target in that case we would record in my application directly then upload the files into a session after it has been configured, that might be easier to control the end user experience and provide that instant review bit. Recording via a remote recorder isn't really intended to be used in the way you are wanting.

    This github repo is their Python upload example: https://github.com/Panopto/upload-python-sample

    -Michael

  • Robin BeyerRobin Beyer Tyro

    Hi Michael,

    thank you for the reply! It was very helpful I think. But I have serveral new questions.

    To start a new record, I need to send a JSON to API (via JS). I would do it like this, am I correct?

     var xhr = new XMLHttpRequest();
            var url = "https://xyz.panopto.eu/api/v1/scheduledRecordings";
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                }
            };
            var dataj = JSON.stringify({
                "Name": session_name,
                "Description": session_name,
                "StartTime": starttime,
                "EndTime": stoptime,
                "FolderId": "string",
                "Recorders": [
                    {
                        "RemoteRecorderId": "string",
                        "SuppressPrimary": true,
                        "SuppressSecondary": true
                    }
                ],
                "IsBroadcast": true
            });
            xhr.send(dataj);

    "session_name", "starttime" and "stoptime" are declared in my code earlier. How can I get the FolderID? What is the RemoteRecorderID?

    A general question about timing: How does Panopto react if the sent time is in the past? Does it start immediately or will it wait forever?

    Actually our project is called "one button studio" as well. We built a HTML-Frontend, which runs on a local node.js-server. The website is reachable by only one client. Your solution for a similar project is interesting. We will think about it.

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    Michael did a great job answering your first questions (thank you, Michael!). Let me see if I can help with some of the other questions you have.

    You can get the folder ID manually from the Panopto website for a folder if you have creator access to it by going to the folder settings, and clicking on Manage. That will display the folder's ID. You can also search for a folder using our public REST API, and that will return its ID (http://demo.hosted.panopto.com/Panopto/api/docs/index.html#/Folders/Folders_SearchForFolders).

    To schedule a recording, you would need to have previously set up a remote recorder in your Panopto site. The RemoteRecorderID is the ID of that recorder. You can also use our public REST API to search for a remote recorder by name, to get its ID (http://demo.hosted.panopto.com/Panopto/api/docs/index.html#/RemoteRecorders/RemoteRecorders_SearchForRemoteRecorders).

    If you try to create or update a recording time to be in the past, if it's more than a few minutes, the API call would return an error, and the scheduled time would not be updated. If the start time is less than 5 minutes in the past, then the recording would start immediately.

    Please let me know if you have any other questions.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    thank you very much. It helped a bit, I think. But I need some more support...

    Folder ID: I am loggend in via OAuth2 with a specific user. How can I ask the API to give me the "main folder" of this user? I want to store the videos there.

    RemoteRecorderID: Maybe I need to clean my glasses again, but I cannot find it. At the admin page I can click on settings -> RemoteRecorder and have list of my recorders with names and IPs. I can see the new one as well. But I do not see an RemoteRecorderID anywhere. Where do I find it?

    General question: My webapp is running locally, so my domain is localhost/... . If I try to call the API via xyz.panopto.com, I get a CORS-Error ('Access-Control-Allow-Origin'). Do you have an idea how to avoid it?

    Thank you very much (again)

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    We do not currently have an API Endpoint on our REST API to get a user's personal folder. That is something we will be adding in the future, but does not yet exist. Our SOAP API does have an endpoint to retrieve a personal folder for a user:

    https://support.panopto.com/resource/APIDocumentation/Help/html/013c9b30-a52f-92ce-7256-57800fb79c36.htm

    The remote recorder ID isn't shown on the Panopto interface. You can search for a remote recorder by name, using the public REST API, and that will return the ID of the remote recorder.

    For the CORS error you are getting, I noticed in your sample above you are calling https://xyz.panopto.eu/api/v1/... I understand that's an example, but can you verify that your actual URL is similar to https://xyz.panopto.eu/Panopto/api/v1/... ? It's possible that you are missing the "Panopto" in the URL after .eu. In addition, when creating the XMLHttpRequest object, please make sure that you have set the withCredentials property to true, to ensure that the access token is sent by the browser.

    Please let me know if you have any other questions. If you're continue to get CORS errors, you may also want to open a support ticket so we can get some additional information from you.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro
    edited December 2020

    Hi Kevin,

    your post helped a lot. Indeed I forgot the "Panopto"-part behind the domain! I added the withCredentials-boolean as well. The CORS-errors are gone but now I get an Error 404: 

    "No HTTP resource was found that matches the request URI 'http://xyz.cloud.panopto.eu/Panopto/api/v1/remoteRecorders/search?name=OBS'

    Did I forget something (again) or made wrong anything else?

    You find my code for searching remoteRecorders attached:

    var request = new XMLHttpRequest();
        request.open('GET', 'https://xyz.cloud.panopto.eu/Panopto/api/v1/remoteRecorders/search?name=OBS', true);
request.send();

    Thank you and best regards

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    It looks like the query parameter for the search term is incorrect. The query parameter name is searchQuery, not name. Can you try the following URL instead?

    request.open('GET', 'https://xyz.cloud.panopto.eu/Panopto/api/v1/remoteRecorders/search?searchQuery=OBS', true);

    Please let me know if that works for you, or if you have any other questions.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    thank you again! This error is fixed, now I get a new one: 401. It comes with a hint at the issues tab in my browser console: "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"

    Do you know how to fix this?

    Best regards

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    The public REST API should only be using your access token for authentication, and not a cookie. Are you adding the access token to the Authorization header of the request to search for a remote recorder? We have more information on how to use access tokens on our support article here:

    https://support.panopto.com/s/article/How-to-Get-OAuth2-Access-Tokens-for-Users#hTargetInstance1

    Once you receive an access token through the OAuth2 workflow, you should add it to the Authorization header of each request made to the public REST API. The value of the header should be "Bearer <ACCESS_TOKEN>", replacing <ACCESS_TOKEN> with the access token you receive from the OAuth2 login.

    Please let me know if you have any additional questions on how to authorize requests to the public API, or how to get an access token.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    another thanks to you! With the token I get no errors anymore and the API gives a response.

    However, the response is 

    {"Results":[]}

    My searchQuery fits exactly on the name of my remoteRecorder. Even if I use just one or two letter, it does not find anything. Another mistake of mine?

    (Notice: If I search for folders for example, I get some results)

    Best regards,

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    I apologize, I didn't see your response to this earlier.

    Have you verified that the user you are using to get a token has permission to view the remote recorders? The search endpoint will only return remote recorders that the user has access to, so if your user does not have permission to view remote recorders, then you would get an empty list for your results.

    Please try verifying that your user has access to the remote recorder(s) you are searching for. If that is not the issue, please let me know and I can look further into this for you.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    no worries, your answer came just in time. I had a meeting today and your post helped a lot. At this point I have two new questions for you.

    1. Since every user needs access to this remote recorder, is there an easy way to enable this permission for severals users? Or will we have to enable it for one by one?
    2. Logout: I found this site in your documentation: https://support.panopto.com/s/article/Federated-Logout-Integration-Point But if I integrate the logout link in my application (https://xyz.panopto.cloud.eu/Panopto/Pages/Auth/Logout.aspx) it will not logout the user. Instead it redirects to the panopto web interface (https://xyz.cloud.panopto.eu/Panopto/Pages/Home.aspx) and the user is still logged in. I registered an "Allowed Post Logout URL as well". How do I add the query? Would it be like this
    https://xyz.cloud.panopto.eu/Panopto/Pages/Auth/Logout.aspx/ReturnUrl?query=localhost:3000/start.html

    Thank you very much

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    1. You can add users to groups, and give those groups permissions to the remote recorders. Please see the following support articles for more information about this:
      1. User Groups: https://support.panopto.com/s/article/Create-Groups
      2. Sharing Remote Recorder Access: https://support.panopto.com/s/article/Share-Access-to-Remote-Recorders
    2. Once you have added the "Allowed Post Logout URL" in your administrator settings, you should be able to add the ReturnURL query parameter to the Logout endpoint. For example: https://xyz.cloud.panopto.eu/Panopto/Pages/Auth/Logout.aspx?ReturnUrl=localhost:3000/start.html

    Please let me know if you have any other questions.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    thank you again. After a long break this project is going on now. We try to setup the following workflow: Every User gets a folder with the name "OBS" (name of our application). After login the application looks for a folder with the name "OBS". The return value gives us the folder ID. We take this ID and use it later as storing path. Questions:

    1. Does the API return only the folder for the logged in user or every folder with the name "OBS"?
    2. I tested the several folder roles in the admin area (viewer, creator, publisher). Which one should I use? It seems like the API could not find the folder if the role is creator.
    3. Is there a simple way to add an empty folder with identical names for every user?

    Second task: Since our application is a JavaScript-only application, the access token expires after 60 minutes, am I right? It is impossible to get a refresh token without another login? Is there an "easy" way to change the application to make it possible to get refresh tokens?

    Best regards,

    Robin

  • Robin BeyerRobin Beyer Tyro

    Second question: I try to schedule a record via the POST-call. Panopto answers with a 404.

    Code:

    var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", reqListener_xhr);
            xhr.open("POST", 'https://xyz.cloud.panopto.eu/Panopto/api/v1/scheduledRecordings', true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Authorization", "Bearer "+token);     //use token for authorization
            xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                }
            };
            var dataj = JSON.stringify({
                "Name": session_name,
                // "Description": session_name,
                "StartTime": starttime,
                "EndTime": stoptime,
                "FolderId": j_folderId,
                "Recorders": [
                    {
                        "RemoteRecorderId": j_recId,
                        "SuppressPrimary": false,
                        "SuppressSecondary": true
                    }
                ],
                "IsBroadcast": false
            });
            xhr.send(dataj);
            console.log(dataj);

    The code generates this JSON:

    {
 "Name":"Session name",
 "StartTime":"2021-01-18T16:31:19.290Z",
 "EndTime":"2021-01-18T16:41:19.290Z",
 "FolderId":"90b0c504-0a92-4836-aae9-acb10093368e",
 "Recorders":
  [
   {
    "RemoteRecorderId":"593e3477-8bec-4585-92bf-ac3600a07615",
    "SuppressPrimary":false,
    "SuppressSecondary":true
   }
  ],
"IsBroadcast":false
}

    Panopto reply message:

    {"Message":"No HTTP resource was found that matches the request URI 'http://xyz.cloud.panopto.eu/Panopto/api/v1/scheduledRecordings'."}

    What am I doing wrong?

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    I apologize for the delay in getting back to you, but I have some answers for you on the questions you asked above.

    1. The API will return any folder with the name "OBS" that they are able to view. If the user has access to multiple "OBS" folders, then the API would return all of them.
    2. Can you explain a bit more about what you mean with regards to testing several roles in the admin area? Generally, the folder API would return any folders that the current user has permission to view, regardless of their role.
    3. Our public REST API does not currently have the capability to create new folders, however that is available using our public SOAP API (https://support.panopto.com/resource/APIDocumentation/Help/html/f161880b-d96a-2ccb-6664-1188ff4bc2dd.htm). Creating folders is a feature we will be adding to the REST API in the future, but unfortunately I don't have an ETA for that right now.

    With regards to the refresh token, a JavaScript only application can not be easily modified to get refresh tokens. Refresh tokens are only issued to clients that can maintain them securely and confidentially, and those clients will need to authenticate themselves in some fashion in order to get a refresh token. If you had a server side component, that could be used to get and maintain the refresh token instead, passing just the access token back to your JavaScript application.

    For your most recent question on scheduling a new remote recording, it looks like you may be missing a required query parameter in the call. In order to create a new scheduled recording, you would need to add the resolveConflicts parameter to the URL:

    https://xyz.cloud.panopto.eu/Panopto/api/v1/scheduledRecordings?resolveConflicts=false

    Please let me know if that helps, or if you have any other questions.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    no worries about late reply.

    1. Folder: If I understand correctly, every user can have his own folder called "OBS". That would be a workaround for us, but with much work. (Every user needs a new folder and access to its specific folder. Since we have no C#-programmer, I think we would have to do it manually.) Is there a possibility to find the root folder of the user via Rest API, which already exists (e.g. unified\user.name)?
    2. Roles: I login as admin at the Panopto webinterface (xyz.cloud.panopto.eu). System -> User -> specific "user" -> access. If I add new folders (which I had to do if I used the workaround of 1), I can select different roles. How do they distinguish?

    Indeed we have a servers side component. The application is running on a local node.js server. Does it work?

    Yes. I missed the query parameter of the call. Again. Thank you for finding this.

    Best regards,

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    1. Do you mean their personal folder ("My Folder") for each user? If so, the REST API search feature does not currently return users' personal folders, but that is something we will be looking into in the future. If you were looking for another folder and I'm misunderstanding, please let me know and I can look further into it.
    2. The roles specify what kind of access the user has to that specific folder. Regardless of which role they have, a user who has access to a folder should be able to find it with the folder search public API endpoint. A user with a Viewer role on a folder can only view the folder, it's sessions, and subfolders (unless stricter permissions have been set on the session or subfolder). A user with a Creator role can view content in the folder, as well as create new sessions and subfolders in that folder. A user with a Publisher role can view the folder, it's sessions, and it's subfolders, and also has the ability to approve videos within the folder (https://support.panopto.com/s/article/Publish-Videos-Using-the-Approval-Workflow). If you're still having issues with finding a specific folder that a user has access to using the REST API, please open a support ticket so I can get some more specific information from you to look into it.
    3. Yes, as long as you have a server side component, you should be able to get a refresh token to use. You will need to make sure that you are using either a Server Side Web Application or a Hybrid Application API Client type, and you will need to add the offline_access scope to your request for an access token. Section 1.7 of the How to Get OAuth2 Access Tokens For Users support article has more information on how to use a refresh token.

    Please let me know if you have any other questions.

    Thanks,

    Kevin

  • Robin BeyerRobin Beyer Tyro

    Hi Kevin,

    thanks for your detailed answer.

    1. Yes, I meant the personal folder ("My Folder"). A real pity that it cannot be found by the REST API yet. Is there a way to combine REST API and SOAP API? I think about two different scenarios:
      1. Call the personal folder via SOAP API and send the ID to our web application.
      2. Check right after login if a folder "OBS" does exist for this user. If yes, take the ID and send it to our web application. If not, create it and send the ID to the web app.

    Do you think, any of those is realizable?

    Thanks for the explanation 2 and 3. I will check it and ask again if something is unclear.

    Robin

  • Kevin BaumKevin Baum Panopto Employee

    Hi Robin,

    Yes, either of those should work. You can use the SOAP API to get the user's personal folder, and then forward that to your web application in order to use it with the REST API endpoints.

    Please let me know if you have any other questions.

    Thanks,

    Kevin

Sign In or Register to comment.