The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

I'm having trouble understanding why my code is not working. I've read that Safari 11 should be compatible with getUserMedia APIs from iOS 11, but for some reason it's not functioning as expected. My aim is to capture a QR code in a live stream, but I seem to be stuck at this point:

Controller

function BarcodeReaderQRCtrl($scope) {
  /* widget controller */
  var c = this;
  var constraints = { audio: true, video: { width: 640, height: 480 } };

  c.startMedia = function() {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.getElementById('idvideo');
        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ': ' + err.message);
      });
  };
}

HTML

<div>
  <a class="btn btn-default" href="#" role="button" ng-click="c.startMedia()">Start</a>
  <div>
    <video id="idvideo"></video>
  </div>
</div>

Does anyone have any suggestions or solutions?

javascriptangularjsmobile-safariios11getusermedia

Answer №1

The issue isn't with the API like you mentioned, it's actually because mobile browsers require a valid click event to initiate video playback. Therefore, calling video.play() won't work on mobile devices without user interaction. This post demonstrates the problem: . My solution is simple: I overlay a play icon on the video (for mobile only) to prompt the user to click, and then I link video.play() to this click event. Easy fix!

Answer №2

For my situation, I found it necessary to specify 

video.setAttribute('playsinline', 'true');
. The video variable corresponds to the video element being manipulated.

Reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: the search variable is not defined

function sorting(type) { $("#parentDiv").empty(); $.getJSON("example_data.json", ({ Find })); function Locate(a, b) { return (a[Find.type] < b[Find.type]) ? -1 : (a[Find.type] > b[Find.type]) ? 1 : 0; }; } The example_data.j ...

javascriptjqueryjsonsorting

Is the element loaded but not appearing on screen?

I am facing an issue when using ajax to send data to a PHP server and displaying it in the view. Even though the data loads successfully (checked in console), it does not display in the view. Can someone please help me resolve this? Here is my code : Vie ...

javascriptphpjqueryajax

Retrieve webpage content using an ajax request in JavaScript

I'm working on an HTML page with an Ajax call to load table content. <html> .... <script sec:haspermission="VIEW_NOTE" th:inline='javascript'> require(['app/agent/viewGlobalAgent'], function (){ ...

javascripthtml

Apply the "ng-class" directive only if there is an <a> element located after the specified element

My issue involves a list of items categorized by labels, with a search filter applied. The problem arises when the labels appear in the search results even though the lists themselves are empty. I need to hide the relevant label if there are no items prese ...

javascriptangularjs

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...

javascriptjqueryhtmlcssjquery-ui

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

Encountering an issue The error message 'Type 'string' is not assignable to type 'PostCard Layout'' is being displayed A parent component named page-blog.component.html is responsible for defining the class styles and passi ...

javascriptangulartypescript

Error occurs during server to server mutation with Apollo Client (query successful)

Currently, I am using apollo-client on my web server to interact with my graphql server (which is also apollo). While I have successfully implemented a query that retrieves data correctly, I encounter new ApolloError messages when attempting a mutation. Od ...

javascriptexpressgraphqlapolloapollo-server

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

javascripthtmlcsspopup

What is the best way to sort through an array depending on a specific sequence of elements provided

I am trying to create a custom pipe in Angular 5 that filters an array of events based on a given sequence. For instance, if my data is: ["submit", "click", "go_back", "click",...] I want to filter this data based on up to three inputs. If input ...

javascriptangulartypescript

Unable to activate function when closing Vuetify v-alert

Is there a way to trigger a function when the Vuetify v-alert is closed? I have explored the documentation but haven't found any information on this specific functionality. In the codepen example, the dismissible attribute allows for closing the alert ...

javascriptvue.jsvuetify.jsalert

Solving Angular Circular Dependencies

My popupservice allows me to easily open popup components: export class PopupService { alert() { this.matdialog.open(PopupAlertComponent); } yesno() { this.matdialog.open(PopupYesNoComponent); } custom() { this.matdialog.open(PopupCustomCompon ...

javascriptangularcircular-dependency

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

After successfully recognizing the hover function, the console displays an error message: Uncaught TypeError: $ is not a function <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(docume ...

javascriptjquery

How can AngularJS utilize ng-repeat and ng-bind-html to display arrays of HTML strings?

I'm currently attempting to display HTML strings from an array of HTML strings in my AngularJS project. As a newcomer to AngularJS, I have been trying to follow the examples provided on the official AngularJS website, but I am struggling to find a sui ...

javascripthtmlangularjsangularjs-ng-repeatng-bind-html

"The server responded with a 405 error message indicating that the requested method

I have been working on a registration form project using HTML, JS, NodeJS, and SQLite. However, I am encountering an issue with the fetch function when trying to post the inputted information into the database. I keep receiving a POST 405 (Method Not Allo ...

javascripthtmlexpresssqliteliveserver

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

javascripthtml

Next.js threw a wrench in my plans when the HTML syntax was completely disrupted upon saving the index.js

I have encountered an issue in my VSCode environment while working on a next.js project. Whenever I attempt to save the index.js file, the HTML syntax crashes. I am at a loss on how to resolve this issue, so any assistance would be greatly appreciated. Tha ...

javascripthtmlvisual-studio-codenext.jssyntax-error

AngularJS Sharepoint 2013 IE9 Sharepoint web part grouped error: The property 'replace' of undefined or null reference cannot be obtained

Encountering a browser error "Unable to get property 'replace' of undefined or null reference" while using AngularJS with IE9 and SharePoint 2013 on-premises, specifically when a SharePoint web part is grouped by any columns. Interestingly, IE10/ ...

angularjssharepointinternet-explorer-9

Chrome fails to select item in Protractor test, while Safari succeeds

While my test passes smoothly on Safari, I encountered an issue on Chrome where the following code snippet fails to work: it('should click the first source and get to the source preview page', function () { var grid_icon = element(by.css(&a ...

javascriptangularjsprotractor

Froala Editor: Innovative external toolbar that pops up when the button is clicked

In our project, we are implementing the latest version of Froala and aim to configure it so that the toolbar is activated by a separate external button, similar to Gmail where the editor initially does not display a toolbar. I attempted to modify the &apo ...

javascriptjqueryangularwysiwygfroala

Stealthy access using the Facebook API log-in

I'm currently developing an app that features Facebook login functionality. I'm wondering if there's a way to keep a device authorized so that users don't have to go through the process of logging in with Facebook each time they use the ...

javascriptreactjsfacebookreact-nativeoauth