The video tag displaying input from the camera functions properly in Safari on iOS, however it does not work in Chrome or any in-app browser

While the video streaming on Android and Safari in iOS is functioning perfectly, issues arise when attempting to use Chrome on iOS or an In-app Browser. The implementation involves Vue as a Single File Component.

The HTML code utilized is as shown below:

<video
  height="400px"
  width="300px"
  autoplay
  playsinline
/>

The Vue JS code used is outlined here:

data: () => ({
  video: null,
}),
mounted() {
  navigator.mediaDevices.getUserMedia({
    audio: false,
    // Prioritize Rear Camera
    video: {facingMode: 'environment'},
  })
  .then((stream) => {
    this.video = document.querySelector('video');
    this.video.srcObject = stream;
    this.video.tracks = stream.getTracks();
  });
}

Any assistance or alternative approaches to resolve this issue would be highly appreciated. Our aim is to initiate a camera stream on the webpage and capture a photo upon clicking.

javascriptiosgoogle-chromevue.jshtml5-video

Answer №1

Despite the information provided, Chrome, Firefox, and Edge for iOS do not have support for the navigator.mediaDevices property. This is because they all utilize the WebKit rendering engine, which restricts this capability to third parties. There is a reported bug here that suggests there may be some improvements in iOS 13.4.

Until Apple addresses this issue, the only workaround is to check for null values in navigator.mediaDevices and handle errors in the promise accordingly:

if (navigator.mediaDevices == null) { /* device not supported */ }
else {
    navigator.mediaDevices.getUserMedia({})
    .then((stream) => {})
    .catch((err) => { /* device not supported */ })
}

...and ensure users are informed appropriately about any limitations.

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

Jade (Pug) base HTML Page: Unable to locate element: #app

My server is running on the Vibed framework and I am using the Pug preprocessor (formerly known as Jade). Below is a snippet of my page code: doctype html html head script(src="https://unpkg.com/vue") script(src="app.js") title ...

vue.jsvibed

Transferring PHP array data to JavaScript using echo

I'm currently in the process of working on a project that requires extracting data from a database and converting it into a JavaScript array. This array will be used to dynamically update a graph. Below is the PHP code I have written to retrieve the ...

javascriptphparraysjsongoogle-visualization

Guidelines for adjusting the next/image component to a full 100% height

In my Next.js application, I am trying to display an image that fills the full height of its container while automatically adjusting its width based on its aspect ratio. I attempted the following method: <Image src="/deco.svg" alt=&qu ...

javascriptreactjsnext.jsnextjs-image

How to efficiently transfer dynamically generated table row data to JavaScript for database submission using the POST method

Currently, I am working with Laravel and facing an issue related to dynamic rows in my form. Each row has its own form with unique values. My goal is to pass the form data along with values to JavaScript when the submit button is clicked without refreshin ...

javascriptphpjqueryhtmllaravel

What are the connections between objects in ReactJS?

I have an array containing objects, and I want to extract a specific value from another array by using the key inside it as a search parameter. Specifically, I need to retrieve the name of an item based on its ID. The primary array: this.setState({ offer ...

javascriptnode.jsreactjs

Turning off devtools in Next.js

Currently, my focus is on developing an application using Next.js and I am in search of a way to prevent the opening of devtools. While exploring npm packages, I came across a promising tool called Disable-devtool - npm link. However, Next.js keeps present ...

javascriptreactjsnext.jsdevtoolsdisable

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Verify the existence of a word following another word (NSSTRING)

I'm facing an interesting challenge. I'm looking to create an if statement that can recognize if there is a word following another word in an array. This is the code I currently have: NSArray *words = [texfield.text componentsSeparatedByString: ...

iosobjective-c

Drawing graphics on an HTML5 Canvas with the power of React Native

How should html5 canvas be utilized in react native? Is it necessary to utilize webview, a plugin, or can plain html canvas be used in react native code? Appreciate your help! ...

javascriptreactjsmobilereact-native

Setting a value in the selectpicker of rsuitejs involves assigning a specific value to the

const _DATA = [{ code: 'code1', name: 'Jagger' },{ code: 'code2', name: 'Tigger' },{ code: 'code3', name: 'Lion' }] <SelectPicker data={_DATA.map(x => {return {label: x.n ...

javascriptreactjstypescriptnext.jsrsuite

Executing a REST call only when the previous one has successfully completed

Is there a way to execute a second REST request only after multiple successful responses from the first one? I have noticed that while in a normal state these requests are executed sequentially as required, issues arise when dealing with a large number o ...

javascriptjsonvue.jsrestaxios

Error: Attempting to access a property called 'name' on an undefined variable leads to a TypeError

I am a beginner with MongodB and nodejs. I have successfully implemented the GET method, which returns an empty array. However, when I tried to use POST in Postman for "categories," I encountered this error message: ExpressJS categories route app.js Err ...

javascriptnode.jsexpress

How can NodeJS implement ThreadLocal variable functionality without relying on req and res.locals?

In a specific situation, I am required to handle business logic and logging for each request separately. This means that the data stored should not overlap with data from other requests. Using res.locals or req objects is not an option in this case becaus ...

javascriptnode.jsexpressbookshelf.js

Firing a missile at targets in a dynamic gaming environment

Currently, I'm in the process of developing an iOS game where the protagonist is positioned on the extreme left side of the screen (in landscape mode) and has to shoot at incoming monsters from the right. As a beginner in iOS game development, I am fo ...

iosswiftsprite-kit

Having trouble getting Vue create to work? If you're not seeing any output in the console or Vue UI,

I'm having trouble getting the Vue CLI to work. When I tried using vue create hello-world, it didn't return any output. I also attempted using vue ui, which showed ...

node.jsvue.jsnpmwindows-11

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

javascriptphpjqueryhtmlmysql

"Utilizing jQuery to enable smooth scrolling of entire windows with every twist of the mouse, similar to the

Does anyone have tips on how to achieve a scrolling effect that covers 100% of the window, similar to what is seen on this website? My website currently has vertical scrolling, with each div set to 100% width and height. I have implemented an anchor syste ...

javascriptjquerycss

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added. function tagMissions() { if ($('span[id^="mission_participant_new"]').h ...

javascriptjqueryhtmlcss

Retrieve the original state of a ReactJs button from the database

I am completely new to ReactJs and I have a question regarding how to set the initial state of a button component based on data from an SQL database. I am successfully retrieving the data using PHP and JSON, but I am struggling with setting the state corre ...

javascriptreactjs

Tips for streaming AWS Lambda response in nodeJS

I have a serverless AWS Lambda function that I need to trigger from my Node.js application and stream the response back to the client. Despite searching through the official documentation, I cannot find a straightforward way to achieve this. I am hoping to ...

javascriptnode.jsamazon-web-servicesaws-lambda