Finally we have getUserMedia?

Hi All, @brainstorrrm

I am glad to see the new feature of “ask a question” to the community, I hope that this can be a question that can be resolved without significant time.

Finally we have the npm for “getUserMedia”, this is meant to be a wrapper for navigator.getUserMedia, however any implementation that I have tried, comes back with the “failed” and seems to be not supported? this may be simple resolve?

I have previously followed many examples of getting this to work but it would be great if anyone can now provide a working example, now that we have the getUserMedia module. I look forward to seeing how we can implement this, it could open a world to progressive web app development utilising mobile cameras.

Looking forward to seeing what can be achieved,

Best wishes,

Si

Please take a note of our forum guidelines about using @ tags on your posts.
Use Tags Properly.
You can only @ tag Wix Community Managers & Corvid Masters—NOT Wix employees.

As for your question, you are actually aware that the getUserMedia npm that you are talking about which has just been added to Wix Package Manager is version 2.0.1 which is actually 3 years old and that Wix tells you how to use any nodeJS.
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager#using-an-installed-package241

To use it and to find out more info about it, then you need to be looking the nodeJS own documentation as it is not a Wix product.
https://www.npmjs.com/package/getusermedia

Also, note that this actually got deprecated too.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

This is a legacy method. Please use the newer navigator.mediaDevices.getUserMedia() instead. While technically not deprecated, this old callback version is marked as such, since the specification strongly encourages using the newer promise returning version.
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Make sure that you do check the compatibility table in the above article and check out the little black arrows underneath the different versions, so that you can see the notes about implementing it too.

The getUserMedia nodeJS that you are wanting to use has not been updated since 2.0.1 due to the depreceation.

There are many websites that you can view to read up on the newer version of MediaDevices.getUserMedia.
https://reference.codeproject.com/book/dom/mediadevices/getusermedia
https://docs.w3cub.com/dom/mediadevices/getusermedia/
https://developers.google.com/web/updates/2015/10/media-devices?hl=en
https://stackoverflow.com/questions/37315361/chrome-navigator-mediadevices-getusermedia-is-not-a-function

Hi Gos,

Many thanks for your response,

I am sure you can understand my frustration with this, I have been trying to access a devices camera from Wix for sometime, not through third party apps. I am sure that I and many others have been wanting to utilise the camera of our devices for sometime to be able to add, added functionality to the work that we are working on.

Please advise of how to and what is needed to be requested to access a devices camera now that we can utilise npm packages in the front end.

I have read your response, but when I have tried to utilise the methods that you have suggested, I have utilised them in an IFrame out of one, tried to communicate with the html component through messaging and nothing seems to be working. None of them have seemingly worked because the IFrame or HTML component is sandboxed.

is it possible to utilise the navigator.mediaDevices.getUserMedia? and access the camera? I have been waiting for a longtime to be able to do so.

In relation to the @ I do apologise, I thought it was just a way of including others in messaging, similar to how a @ works in twitter etc, I was also unaware of who is and isn’t an employee/corvid masters/community managers. I have updated my knowledge on this though having re-read the guidelines.

best wishes

Simon

@simonadams

Was curious, so I tried this out.
Master GOS provided everything you need.
No npm library required.

You probably want something like this to work in your iFrame:
https://webrtc.github.io/samples/src/content/getusermedia/gum/

I got it working nicely, but only with Desktop MS Edge for now.
Wix Corvid WebRTC Sample

In MS Edge, the iFrame asks properly for permission to turn the cam on, via the browser, and if permitted by the user, will stream the cam to the video element in the iFrame.

Other browsers (Chrome, Opera, Dolphin) fail with “DOMException: Permission denied.” There’s no dialog to grant permission, it simply fails.
Should be an easy fix, do some research on permissions for this method and solve this. Since the code is pure JS and HTML 5 browser methods, you should be able to get Corvid tech support to assist.

Place the code below into an iFrame and load the page with MS Edge.

<!DOCTYPE html>
<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
-->
<html>
<head>

    <meta charset="utf-8">
    <meta name="description" content="WebRTC code samples">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta itemprop="description" content="Client-side WebRTC code samples">
    <meta itemprop="image" content="https://github.com/webrtc/samples/blob/gh-pages/src/images/webrtc-icon-192x192.png">
    <meta itemprop="name" content="WebRTC code samples">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">

    <base target="_blank">

    <title>getUserMedia</title>

    <link rel="icon" sizes="192x192" href="https://github.com/webrtc/samples/blob/gh-pages/src/images/webrtc-icon-192x192.png">
    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">

    <style>
        /*
         *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
         */

        .hidden {
          display: none;
        }
        .highlight {
          background-color: #eee;
          font-size: 1.2em;
          margin: 0 0 30px 0;
          padding: 0.2em 1.5em;
        }

        .warning {
          color: red;
          font-weight: 400;
        }

        @media screen and (min-width: 1000px) {
          /* hack! to detect non-touch devices */
          div#links a {
            line-height: 0.8em;
          }
        }

        audio {
          max-width: 100%;
        }

        body {
          font-family: 'Roboto', sans-serif;
          font-weight: 300;
          margin: 0;
          padding: 1em;
          word-break: break-word;
        }

        button {
          background-color: #d84a38;
          border: none;
          border-radius: 2px;
          color: white;
          font-family: 'Roboto', sans-serif;
          font-size: 0.8em;
          margin: 0 0 1em 0;
          padding: 0.5em 0.7em 0.6em 0.7em;
        }

        button:active {
          background-color: #cf402f;
        }

        button:hover {
          background-color: #cf402f;
        }

        button[disabled] {
          color: #ccc;
        }

        button[disabled]:hover {
          background-color: #d84a38;
        }

        canvas {
          background-color: #ccc;
          max-width: 100%;
          width: 100%;
        }

        code {
          font-family: 'Roboto', sans-serif;
          font-weight: 400;
        }

        div#container {
          margin: 0 auto 0 auto;
          max-width: 60em;
          padding: 1em 1.5em 1.3em 1.5em;
        }

        div#links {
          padding: 0.5em 0 0 0;
        }

        h1 {
          border-bottom: 1px solid #ccc;
          font-family: 'Roboto', sans-serif;
          font-weight: 500;
          margin: 0 0 0.8em 0;
          padding: 0 0 0.2em 0;
        }

        h2 {
          color: #444;
          font-weight: 500;
        }

        h3 {
          border-top: 1px solid #eee;
          color: #666;
          font-weight: 500;
          margin: 10px 0 10px 0;
          white-space: nowrap;
        }

        li {
          margin: 0 0 0.4em 0;
        }

        html {
          /* avoid annoying page width change
          when moving from the home page */
          overflow-y: scroll;
        }

        img {
          border: none;
          max-width: 100%;
        }

        input[type=radio] {
          position: relative;
          top: -1px;
        }

        p {
          color: #444;
          font-weight: 300;
        }

        p#data {
          border-top: 1px dotted #666;
          font-family: Courier New, monospace;
          line-height: 1.3em;
          max-height: 1000px;
          overflow-y: auto;
          padding: 1em 0 0 0;
        }

        p.borderBelow {
          border-bottom: 1px solid #aaa;
          padding: 0 0 20px 0;
        }

        section p:last-of-type {
          margin: 0;
        }

        section {
          border-bottom: 1px solid #eee;
          margin: 0 0 30px 0;
          padding: 0 0 20px 0;
        }

        section:last-of-type {
          border-bottom: none;
          padding: 0 0 1em 0;
        }

        select {
          margin: 0 1em 1em 0;
          position: relative;
          top: -1px;
        }

        h1 span {
          white-space: nowrap;
        }

        a {
          color: #6fa8dc;
          font-weight: 300;
          text-decoration: none;
        }

        h1 a {
          font-weight: 300;
          margin: 0 10px 0 0;
          white-space: nowrap;
        }

        a:hover {
          color: #3d85c6;
          text-decoration: underline;
        }

        a#viewSource {
          display: block;
          margin: 1.3em 0 0 0;
          border-top: 1px solid #999;
          padding: 1em 0 0 0;
        }

        div#errorMsg p {
          color: #F00;
        }

        div#links a {
          display: block;
          line-height: 1.3em;
          margin: 0 0 1.5em 0;
        }

        div.outputSelector {
          margin: -1.3em 0 2em 0;
        }

        p.description {

          margin: 0 0 0.5em 0;
        }

        strong {
          font-weight: 500;
        }

        textarea {
          resize: none;
          font-family: 'Roboto', sans-serif;
        }

        video {
          background: #222;
          margin: 0 0 20px 0;
          --width: 100%;
          width: var(--width);
          height: calc(var(--width) * 0.75);
        }

        ul {
          margin: 0 0 0.5em 0;
        }

        @media screen and (max-width: 650px) {
          .highlight {
            font-size: 1em;
            margin: 0 0 20px 0;
            padding: 0.2em 1em;
          }

          h1 {
            font-size: 24px;
          }
        }

        @media screen and (max-width: 550px) {
          button:active {
            background-color: darkRed;
          }

          h1 {
            font-size: 22px;
          }
        }

        @media screen and (max-width: 450px) {
          h1 {
            font-size: 20px;
          }
        }
    </style>

</head>

<body>

<div id="container">
    <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a>
        <span>getUserMedia</span> in a Wix-Corvid iFrame</h1>

    <video id="gum" autoplay="" playsinline=""></video>
    <button id="showVideo">Open camera</button>

    <div id="errorMsg"></div>

    <p class="warning"><strong>Warning:</strong> if you're not using headphones, pressing play will cause feedback.</p>

    <p>Display the video stream from <code>getUserMedia()</code> in a video element.</p>

    <p>The <code>MediaStream</code> object <code>stream</code> passed to the <code>getUserMedia()</code> callback is in
        global scope, so you can inspect it from the console.</p>

    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum"
       title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<!--
 *  <script id="data" type="application/json" src="https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/gum/js/main.js"></script>
 * No error message with above command, but main.js fails to load due to github not being a CDN
-->
<script>
    /*
     *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
     *
     *  Use of this source code is governed by a BSD-style license
     *  that can be found in the LICENSE file in the root of the source
     *  tree.
     */
    'use strict';

    // Put variables in global scope to make them available to the browser console.
    const constraints = window.constraints = {
      audio: false,
      video: true
    };

    function handleSuccess(stream) {
      const video = document.querySelector('video');
      const videoTracks = stream.getVideoTracks();
      console.log('Got stream with constraints:', constraints);
      console.log(`Using video device: ${videoTracks[0].label}`);
      window.stream = stream; // make variable available to browser console
      video.srcObject = stream;
    }

    function handleError(error) {
      if (error.name === 'ConstraintNotSatisfiedError') {
        const v = constraints.video;
        errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
      } else if (error.name === 'PermissionDeniedError') {
        errorMsg('Permissions have not been granted to use your camera and ' +
          'microphone, you need to allow the page access to your devices in ' +
          'order for the demo to work.');
      }
      errorMsg(`getUserMedia error: ${error.name}`, error);
    }

    function errorMsg(msg, error) {
      const errorElement = document.querySelector('#errorMsg');
      errorElement.innerHTML += `<p>${msg}</p>`;
      if (typeof error !== 'undefined') {
        console.error(error);
      }
    }

    async function init(e) {
      try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
        e.target.disabled = true;
      } catch (e) {
        handleError(e);
      }
    }

    document.querySelector('#showVideo').addEventListener('click', e => init(e));
</script>

</body>
</html>

Hi Brainstorm, I have just realised that you have responded, I am sure the amount of views this post has received shows how much of a need there is for users to be able to have this functionality on their sites, As i have just seen this today I will look into how to get this working on all web browsers as I personally use Safari or Chrome and if this can be achieved in these i am sure so many people will be grateful to yourself and others that have contributed. Many thanks for the reply and sorry for the slow response the world has been a very strange place over the past number of months. Best Wishes Si

I believe it may be down to the permissions? there is this snippet of code that allows all forms of get user media to be utilised:

navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({  audio: true, video: true })
    .then(function (stream) {
                  //Display the video stream in the video object
     })
     .catch(function (e) { logError(e.name + ": " + e.message); });
}
else {
navigator.getWebcam({ audio: true, video: true }, 
     function (stream) {
             //Display the video stream in the video object
     }, 
     function () { logError("Web cam is not accessible."); });
}

I am just working out how to add it in to the above code you have provided from the webrtc docs.