polymerelements / app-media Goto Github PK

As a camera app author,
When I implement camera switching,
I want unambiguous control over which camera to use,
so that I can pick the right camera at the right time.

Description

Expose videoBitsPerSecond, audioBitsPerSecond (and perhaps bitsPerSecond) in app-media-recorder, which are options passed into MediaRecorder constructor (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder). This will enable higher quality video recording.

Expected outcome

Ability to customize bitrate options

Actual outcome

Bits per second encoding is always default (which can appear overly compressed at 720p, for instance)

Description

app-media-stream fails to stop camera access when 'active' property set to false.

Expected outcome

When app-media-stream.active is set to false, all media tracks should be stopped and Chrome should no longer indicate that website is accessing camera.

Actual outcome

Chrome indicates that website is accessing camera (recording red dot in tab in desktop or notification on mobile) until tab is killed or page is refreshed.

Steps to reproduce

1. Add app-media-stream to page with some video constraints and active = true.
2. Browser indicates that website is accessing camera.
3. Set active = false
4. Browser still indicates that website is accessing camera.

Browsers Affected

Only tested on latest stable Chrome.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Shouldn't demo/index.html import polymer.html? 🤔

Description

The currently available version of this element set on npm is the 3.0.0-pre.19.

The current version on master, according to package.json, seems to be 2.0.0, and it includes a series of bugfixes. Without these bugfixes, app-media-image-capture doesn't work in the Polymer 3/npm based version of the element.

Could you please publish on npm a version with bugfix? And ideally also fixing the version schema, i.e. putting it in 3.0.0.

Thanks a lot, and once again congrats on the good job!!!!

@cdata First of all, thank you so much for all your work! <app-media> elements are awesome! 👍

FYI, I've added <app-media> elements into my progressive-elements collection that contains web components for modern features/APIs (i.e. building blocks for progressive web apps).

What about Shape Detection API web component (e.g. <app-media-shape-detection>)? 😉

You can read more about Shape Detection API in @PaulKinlan's blog:

https://paul.kinlan.me/face-detection/
https://paul.kinlan.me/barcode-detection/
https://paul.kinlan.me/detecting-text-in-an-image/

TL;DR: Shape Detection API is a Web API for QR/barcode/text/face detection in live or still images. See use cases: https://github.com/WICG/shape-detection-api#use-cases-camera

In the near future, I plan to develop web components for Google Cloud Vision API, Google Cloud Speech API, Google Cloud Translate API.

It helps easily and quickly develop mind-blowing progressive web apps similar to @dmotz's Thing Translator using web components only. 🔥

Also I'm thinking about web component for NTechLab FindFace API, but that's a different story… 😜

I've updated app-media to the latest version and video-constraints='{"facingMode":"environment"}' no longer works.

Description

Using the provided Polymer 3 as defined here https://github.com/PolymerElements/app-media#app-media-devices-1 , the element isn't rendered properly and isn't showing up on the screen. The same issue occurs when trying to load the demo from the contributing section with polymer-cli

Expected outcome

A Web UI element that we could select the device (microphone)

Actual outcome

Nothing is shown on the Web Page. Running Chrome Debugger, we can see the present in the DOM. Further debugging using breakpoint in the app-media-devices.js, we can see that the devices property is set with the available audioinput. However, the html element doesn't have the devices attribute define.

Live Demo

https://www.webcomponents.org/element/@polymer/app-media/demo/demo/index.html

Steps to reproduce

1. Run the polymer-cli demo as suggested on the home page

Browsers Affected

• [X ] Chrome
• [X ] Firefox

Please add a demo that demonstrates the capabilities of <app-media-image-capture> element: manual change the camera hardware settings (zoom, focus mode, contrast, ISO, white balance, etc.).

I've run the modulizer over app-media and pushed the results up to the 3.0-preview branch. I'm wondering what version we should use when we publish it to npm. The pattern we've been going with so far has been (major version bump)-pre.1 but I'm unsure we you want the modulized version to be 1.0 or if there may be more API changes / stabilization before 1.0.

Thoughts? @cdata @FluorescentHallucinogen

Description

Second attempt call app-media-image-capture.takePhoto() does nothing when running in Polymer v2.

I also see this error in the console:
Uncaught TypeError: Failed to construct 'ImageCapture': parameter 1 is not of type 'MediaStreamTrack'.
at HTMLElement.__computeImageCapture (app-media-image-capture.js:58)

Expected outcome

Each call to takePhoto() should take a new photo.

Actual outcome

Only the first takePhoto call works in Polymer 2.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

What about adding web component(s) for Presentation API (https://w3c.github.io/presentation-api/)?

In discussion with @kenchris he said that Presentation API element(s) should be part of app-media elements.

Seems, Presentation API is quite simple.
See https://developer.mozilla.org/docs/Web/API/Presentation_API.
Live demo: https://googlechrome.github.io/samples/presentation-api/index.html.
But I worry about good web component API (interface design). What properties and methods should Presentation API element (or elements) have?

Safari 11 has shipped many user media APIs. Firefox also seems to have MediaRecorder.

Description

app-media-image capture raises 'ImageCapture instance not ready' error

Expected outcome

Should display the content that the camera is streaming

Actual outcome

No content is being displayed and error appears.

Steps to reproduce

1. import all the app-media modules
2. add the app-media-devices component
3. add the app-media-stream component
4. add the app-media-image-capture component

Browsers Affected

Tested on Chrome.

Code Sample

This is how my code looks like

<app-media-devices kind="videoinput" selected-device="{{videoDevice}}"> </app-media-devices> <app-media-stream video-device="[[videoDevice]]" audio-device="[[audioDevice]]" stream="{{stream}}" active> </app-media-stream>
<app-media-image-capture id="imageCapture" stream="[[videoDevice]]" focus-mode="single-shot" last-photo="{{photo}}"> </app-media-image-capture>

my script

takePhoto() { this.$.imageCapture.takePhoto(); }

As a camera app user,
When I switch from front to back camera,
I want the recorder to record a contiguous video,
So that I don't need to combine separate videos later.

Is it possible to control the videos ? likepause/unpause or slide video duration etc ?

Description

The app-media-recorder element is not recording in proper .wav file format.

Expected outcome

The element should generate a valid WAV format with LPCM audio for maximum audio quality.

Actual outcome

The element records in audio/webm, even if you specify mime-type="audio/wav".

Live Demo

MyRecording.zip

Steps to reproduce

1. Put a app-media-recorder element in the page.
2. Open the page in a web browser.
3. Set the mime-type="audio/wav"
4. Record using the app-media-recorder element.

Browsers Affected

• Chrome

Description

app-media-image-capture can't set the track constraints

Expected outcome

Should set the constraints when setting the constraint property.

Actual outcome

Nothing changed when I set constraint property.

Steps to reproduce

1. Set the pointsOfInterest property, the focus point of camera does not change.

Browsers Affected

Tested on Chrome of Pixel

What about adding properties for minimum, maximum and step values for each camera settings to <app-media-image-capture> element?

It makes data binding easy:

<app-media-image-capture
  stream="[[stream]]"
  zoom-min="{{zoomMin}}"
  zoom-max="{{zoomMax}}"
  zoom-step="{{zoomStep}}"
  zoom="{{zoom}}"
  last-photo="{{photo}}">
</app-media-image-capture>

<paper-slider
  min="[[zoomMin]]"
  max="[[zoomMax]]"
  step="[[zoomStep]]"
  value="{{zoom}}">
</paper-slider>

Description

app-media-stream sets its stream property to null if active gets set to false.

app-media-recorder tries to re-compute the recorder property with a nullified stream. => throws error.

Expected outcome

No error.

Actual outcome

Uncaught TypeError: Failed to construct 'MediaRecorder': parameter 1 is not of type 'MediaStream'.

Steps to reproduce

Bind stream from app-media-stream to app-media-recorder.
Set active property of app-media-stream to false.

Description

Changing property in <app-media-image-capture> HTML element does not affect corresponding track property (e.g. white-balance-mode = "manual").

Expected outcome

Attempted to set whiteBalanceMode to "manual" from "continuous". Also tested with modifications to zoom and contrast.

Actual outcome

No discernible change was detected in the capture view stream. Setting values manually in console using applyConstraints on videoTrack produced expected results. Issue seems to be isolated in setTrackConstraints call within updateTrackConstraints.

Live Demo

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10