37
Views
5
Comments
What am I doing wrong with Html and JS in my mobile app?
Question

Hi,

I am trying to include the following code on my mobile app:

Html: - 

SyntaxEditor Code Snippet

"<div class='columns'>
  <div class='column'>
    <p><button type='button' onclick= getStream('video')>Grab video</button></p>
    
    <video controls autoplay style='height:180px; width: 240px;'></video>
  </div>
  <div class='column'>
    <p><button type='button' onclick= getStream('audio')>Grab audio</button></p>
    
    <audio controls></audio>
  </div>
</div>"

where the JS node is: document.getElementById(audiocontainer.id).innerHTML  = $parameters.html || "unknown";


JS: I have created a file audio.js which is in "Scripts" with all the JS functions.

function getUserMedia(constraints) {
  // if Promise-based API is available, use it
  if (navigator.mediaDevices) {
    return navigator.mediaDevices.getUserMedia(constraints);
  } // otherwise try falling back to old, possibly prefixed API...

  var legacyApi = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

  if (legacyApi) {
    // ...and promisify it
    return new Promise(function (resolve, reject) {
      legacyApi.bind(navigator)(constraints, resolve, reject);
    });
  }
}
function getStream(type) {
  if (!navigator.mediaDevices && !navigator.getUserMedia && !navigator.webkitGetUserMedia && !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
    alert('User Media API not supported.');
    return;
  }
}

It does not work!!! Could you help me. 

Thank you and best regards,

Luis


Rank: #89

Hi Luis,

Have you checked with  inspect element on browser .find any kind of error.


regards

Rahul

mvp_badge
MVP
Rank: #132

Hi! Can you share more details about the errors? Or share the oml file?

BR,

Luis

Rank: #507

Luis Barqueira wrote:

Hi,

I am trying to include the following code on my mobile app:

Html: - 

SyntaxEditor Code Snippet

"<div class='columns'>
  <div class='column'>
    <p><button type='button' onclick= getStream('video')>Grab video</button></p>
    
    <video controls autoplay style='height:180px; width: 240px;'></video>
  </div>
  <div class='column'>
    <p><button type='button' onclick= getStream('audio')>Grab audio</button></p>
    
    <audio controls></audio>
  </div>
</div>"

where the JS node is: document.getElementById(audiocontainer.id).innerHTML  = $parameters.html || "unknown";


JS: I have created a file audio.js which is in "Scripts" with all the JS functions.

function getUserMedia(constraints) {
  // if Promise-based API is available, use it
  if (navigator.mediaDevices) {
    return navigator.mediaDevices.getUserMedia(constraints);
  } // otherwise try falling back to old, possibly prefixed API...

  var legacyApi = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

  if (legacyApi) {
    // ...and promisify it
    return new Promise(function (resolve, reject) {
      legacyApi.bind(navigator)(constraints, resolve, reject);
    });
  }
}
function getStream(type) {
  if (!navigator.mediaDevices && !navigator.getUserMedia && !navigator.webkitGetUserMedia && !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
    alert('User Media API not supported.');
    return;
  }
}

It does not work!!! Could you help me. 

Thank you and best regards,

Luis



I don't think you can specify something like onclick=getStream('video'), it is lack of quotes or double-quotes around getStream, for example: onclick="getStream('video')"

Hope this help

Rank: #9098

Hi,

thank you all for your kindly responses.

Suingo Lam, in fact the code should be 

onclick="getStream('video')"

However, I have changed the way to present the HTML and JS code in Outsystems. I used for each HTML tag an Outsystems HTML Element, setting its atributes properly. Then used OS Buttons where the actions onclick call for the JS functions. This way, its more clear and I don`t need to inject the html code as I was doing.

Many yhaks to all of you,

Luis


Rank: #377

Hi Luis,

Just to be sure: In your JS you refer to an audiocontainer id. Are you sure that that's in your page?


Regards,
Lennart