URL-based authentication for Http streaming to embed video in HTML

Answered

Grace Gan

January 30, 2024 21:59

I've setup nx meta on my local server and want to embed http streaming video in my angular application. 

Here's my typescript code:

const serverAddress = 'http://localhost:7001';

const username = 'admin';

const password = 'password';

// Note: this is the username and password I use to login when I visit http://localhost:7001 on the browser

const cameraId = '80b60e60-1a02-37a7-b3c0-f2b66de8b698'

const { realm, nonce } =  await this.getRealAndNonce(serverAddress);

const authKey = this.getAuthKey(username,password, realm, nonce, );

const videoUrl = `${serverAddress}/media/${cameraId}.mp4?auth=${authKey}

&pos=${start.toISOString()}&endPos=${end.toISOString()}

`;

 

// Note: start and end are Date objects 

 

  async getRealAndNonce(serverAddress: string) {

    const getNonceUrl = `${serverAddress}/api/getNonce`;

    return await axios.get(getNonceUrl, {}).then((res) => {

      return { realm: res.data.reply.realm, nonce: res.data.reply.nonce };

    });

  }

  getAuthKey(username: string, password: string, realm: string, nonce: string) {

    const digest = md5(`${username}:${realm}:${password}`);

    const partial_ha2 = md5(`GET:`);

    const simplified_ha2 = md5(`${digest}:${nonce}:${partial_ha2}`);

    return btoa(`${username}:${nonce}:${simplified_ha2}`);

  }

 

I then embed this video url in my html as follows

<div class="vid">

        <video preload="none" controls height="100%">

        <!-- Note: item.url here is the videoUrl produced in the typescript code above-->

          <source [src]="item.url" type="video/mp4" />

        </video>

</div>

I'm having two problems at the moment

1. url-based authentication is not working as in the browser when I try to play the video, it prompts me with a login popup to enter my crendentials. However, even putting in my username and password manually doesn't allow me to view the video. I've found that I'll have to login through http://localhost:7001 (with the same credentials), then when I go to my application I can view the video without the auth error.

2. I am not able to rewind/fast forward the video while it is playing (I can only restart it), and it doesn't show the actual timestamp, is there a better way to embed the video such that I can rewind/fast forward while it is playing and view the actual timestmap?

 

Supporting docs:

https://meta.nxvms.com/docs/developers/knowledgebase/198-how-to-embed-video-from-the-vms-on-a-website 
https://meta.nxvms.com/docs/developers/knowledgebase/278-how-does-authentication-work

 

Thanks,

Grace

0

• 

  Ichiro

  • Network Optix team

  February 04, 2024 11:49

  Hi Grace Gan,

  For the first question, it is likely you need to redirect the authentication.
  Probably this post can help you. 

  For the RE/FF of the video, it is likely you need to implement functions individually.
  There are several framework or libraries you can use, probably using those libraries might be helping you to have RE/FF on the browser.

  Hope this helps.

   

   

  1
• 

  Grace Gan

  February 04, 2024 19:11

  Hi Ichiro,

  Thanks for your response, I don't quite get what you mean by redirect the authentication, do you mean by redirecting the user to the login page then redirecting them back to my application?

  I'm not sure why the url-based authentication wouldn't work though as it's designed for direct link access like this isn't it. I also played around a bit more and noticed that it seems like the authentication works if I use a cloud user credentials but not for local user, do you know why?

  0
• 

  Andrey Terentyev

  • Network Optix team

  February 06, 2024 10:34

  Hi,

  To make the code you've quoted working, the local user account you're using must have the digest authentication schema enabled.

  

  0

Please sign in to leave a comment.