app-media

WebJar for app-media

Лицензия	Лицензия BSD 3-Clause
Категории	Категории Github Инструменты разработки Контроль версий
Группа	Группа org.webjars.bower
Идентификатор	Идентификатор github-com-polymerelements-app-media
Последняя версия	Последняя версия 0.7.2
Дата	Дата 15 авг. 2017 г.
Тип	Тип jar
Описание	Описание app-media WebJar for app-media
Ссылка на сайт	Ссылка на сайт http://webjars.org
Система контроля версий	Система контроля версий https://github.com/polymerelements/app-media

Скачать github-com-polymerelements-app-media

Имя Файла	Размер
github-com-polymerelements-app-media-0.7.2.pom
github-com-polymerelements-app-media-0.7.2.jar	41 KB
github-com-polymerelements-app-media-0.7.2-sources.jar	22 bytes
github-com-polymerelements-app-media-0.7.2-javadoc.jar	22 bytes
Обзор

Как подключить последнюю версию

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-polymerelements-app-media/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-polymerelements-app-media</artifactId>
    <version>0.7.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-polymerelements-app-media/
implementation 'org.webjars.bower:github-com-polymerelements-app-media:0.7.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-polymerelements-app-media/
implementation ("org.webjars.bower:github-com-polymerelements-app-media:0.7.2")

Apache Buildr

'org.webjars.bower:github-com-polymerelements-app-media:jar:0.7.2'

Apache Ivy

<dependency org="org.webjars.bower" name="github-com-polymerelements-app-media" rev="0.7.2">
  <artifact name="github-com-polymerelements-app-media" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='github-com-polymerelements-app-media', version='0.7.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "github-com-polymerelements-app-media" % "0.7.2"

Leiningen

[org.webjars.bower/github-com-polymerelements-app-media "0.7.2"]

Зависимости

compile (2)

Идентификатор библиотеки	Тип	Версия
org.webjars.bower : github-com-polymer-polymer	jar	[1.8.0,3)
org.webjars.bower : github-com-polymerelements-iron-resizable-behavior	jar	[1.0.0,3)

Модули Проекта

Данный проект не имеет модулей.

App Media Elements

Elements for accessing data from media input devices, such as cameras and microphones, and visualizing that data for users.

See the full explainer for detailed usage.

See: Documentation, Demo.

Browser support

The following emerging platform APIs are used by this collection of elements:

Some additional browser support is enabled by WebRTC polyfill and MediaStream ImageCapture API polyfill. The following table documents browser support for the elements in this collection with these polyfills in use

✅ Stable native implementation
🚧 Partial fidelity with polyfill
🚫 Not supported at all

Element	Chrome	Safari 11	Firefox	Edge	IE 11
`app-media-video`	✅	✅	✅	✅	✅
`app-media-audio`	✅	✅	✅	✅	🚫
`app-media-waveform`	✅	✅	✅	✅	🚫
`app-media-devices`	✅	✅	✅	✅	🚫
`app-media-stream`	✅	✅	✅	✅	🚫
`app-media-recorder`	✅	🚫	✅	🚫	🚫
`app-media-image-capture`	✅	🚧	🚧	🚧	🚫

Usage

Installation

Element:

npm install --save @polymer/app-media

Polyfills:

npm install --save webrtc-adapter
npm install --save image-capture

In an HTML file

`<app-media-devices>`

<html>
  <head>
    <script type="module">
      import '@polymer/app-media/app-media-devices.js';
    </script>
  </head>
  <body>
    <app-media-devices
        kind="audioinput"
        devices="{{microphones}}">
    </app-media-devices>
  </body>
</html>

`<app-media-stream>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="audioinput"
            devices="{{microphone}}">
        </app-media-devices>
        <app-media-stream
            audio-device="[[microphone]]"
            stream="{{microphoneStream}}">
        </app-media-stream>
      </template>
    </dom-bind>
  </body>
</html>

`<app-media-video>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
      import '@polymer/app-media/app-media-video.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{cameraStream}}">
        </app-media-stream>
        <app-media-video
            source="[[cameraStream]]"
            autoplay>
        </app-media-video>
      </template>
    </dom-bind>
  </body>
</html>

`<app-media-recorder>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
      import '@polymer/app-media/app-media-recorder.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-devices
            kind="audioinput"
            devices="{{microphone}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            audio-device="[[microphone]]"
            stream="{{cameraAndMicrophoneStream}}">
        </app-media-stream>
        <app-media-recorder
            id="recorder"
            stream="[[cameraAndMicrophoneStream]]"
            data="{{recordedVideo}}"
            duration="3000">
        </app-media-recorder>
      </template>
    </dom-bind>
    <script>
      function createRecording() {
        recorder.start();
      }
    </script>
  </body>
</html>

`<app-media-image-capture>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
      import '@polymer/app-media/app-media-image-capture.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-image-capture
            id="imageCapture"
            stream="[[videoStream]]"
            focus-mode="single-shot"
            red-eye-reduction
            last-photo="{{photo}}">
        </app-media-image-capture>
      </template>
    </dom-bind>
    <script>
      function takePhoto() {
        imageCapture.takePhoto();
      }
    </script>
  </body>
</html>

`<app-media-audio>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
      import '@polymer/app-media/app-media-audio.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-audio
            stream="[[microphoneStream]]"
            analyser="{{microphoneAnalyzer}}">
        </app-media-audio>
      </template>
    </dom-bind>
  </body>
</html>

`<app-media-waveform>`

<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
      import '@polymer/app-media/app-media-audio.js';
      import '@polymer/app-media/app-media-waveform.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-audio
            stream="[[microphoneStream]]"
            analyser="{{microphoneAnalyzer}}">
        </app-media-audio>
        <app-media-waveform analyser="[[microphoneAnalyzer]]">
        </app-media-waveform>
      </template>
    </dom-bind>
  </body>
</html>

In a Polymer 3 element

`<app-media-devices>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="audioinput"
          devices="{{microphones}}">
      </app-media-devices>
    `;
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-stream>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="audioinput"
          devices="{{microphone}}">
      </app-media-devices>
      <app-media-stream
          audio-device="[[microphone]]"
          stream="{{microphoneStream}}">
      </app-media-stream>
    `;
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-video>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-video.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{cameraStream}}">
      </app-media-stream>
      <app-media-video
          source="[[cameraStream]]"
          autoplay>
      </app-media-video>
    `;
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-recorder>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-recorder.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-devices
          kind="audioinput"
          devices="{{microphone}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          audio-device="[[microphone]]"
          stream="{{cameraAndMicrophoneStream}}">
      </app-media-stream>
      <app-media-recorder
          id="recorder"
          stream="[[cameraAndMicrophoneStream]]"
          data="{{recordedVideo}}"
          duration="3000">
      </app-media-recorder>
    `;
  }

  createRecording() {
    this.$.recorder.start();
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-image-capture>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-image-capture.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-image-capture
          id="imageCapture"
          stream="[[videoStream]]"
          focus-mode="single-shot"
          red-eye-reduction
          last-photo="{{photo}}">
      </app-media-image-capture>
    `;
  }

  takePhoto() {
    this.$.imageCapture.takePhoto();
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-audio>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-audio.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-audio
          stream="[[microphoneStream]]"
          analyser="{{microphoneAnalyzer}}">
      </app-media-audio>
    `;
  }
}
customElements.define('sample-element', SampleElement);

`<app-media-waveform>`

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-audio.js';
import '@polymer/app-media/app-media-waveform.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-audio
          stream="[[microphoneStream]]"
          analyser="{{microphoneAnalyzer}}">
      </app-media-audio>
      <app-media-waveform analyser="[[microphoneAnalyzer]]">
      </app-media-waveform>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/app-media
cd app-media
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

Версии библиотеки

Версия
0.7.2 15 авг. 2017 г.

app-media

Лицензия

Категории

Группа

Идентификатор

Последняя версия

Дата

Тип

Описание

Ссылка на сайт

Система контроля версий

Скачать github-com-polymerelements-app-media

Как подключить последнюю версию

Зависимости

compile (2)

Модули Проекта

App Media Elements

Browser support

Usage

Installation

In an HTML file

<app-media-devices>

<app-media-stream>

<app-media-video>

<app-media-recorder>

<app-media-image-capture>

<app-media-audio>

<app-media-waveform>

In a Polymer 3 element

<app-media-devices>

<app-media-stream>

<app-media-video>

<app-media-recorder>

<app-media-image-capture>

<app-media-audio>

<app-media-waveform>

Contributing

Installation

Running the demo locally

Running the tests

Версии библиотеки

`<app-media-devices>`

`<app-media-stream>`

`<app-media-video>`

`<app-media-recorder>`

`<app-media-image-capture>`

`<app-media-audio>`

`<app-media-waveform>`

`<app-media-devices>`

`<app-media-stream>`

`<app-media-video>`

`<app-media-recorder>`

`<app-media-image-capture>`

`<app-media-audio>`

`<app-media-waveform>`