imaustink

"git@github.com:TyphosLabs/test.git"
"git@github.com:TyphosLabs/zeus-light.git"
"git@github.com:TyphosLabs/zeus-lite.git"
"git@github.com:TyphosLabs/zeus-lite-api.git"
"git@github.com:TyphosLabs/bootstrap-theme.git"
"git@github.com:TyphosLabs/npm.git"
"git@github.com:TyphosLabs/hydra-2.git"
"git@github.com:TyphosLabs/lambda.git"
"git@github.com:TyphosLabs/shopify-deep.git"
"git@github.com:TyphosLabs/shopify-move.git"

imaustink

[3193884563717641] Creating ICE agent (ICE Full mode, controlled)
[ERR] [sdp-utils.c:janus_sdp_get_codec_rtpmap:718] Unsupported codec 'none'
[WARN] [3193884563717641]     Missing valid SRTP session (packet arrived too early?), skipping...
[3193884563717641] The DTLS handshake has been completed
[janus.plugin.videoroom-0x7fea8401a2e0] WebRTC media is now available
Creating new handle in session 7985478018209678: 7647917661950493; 0x7fea84026ae0 0x7fea84087200
[7647917661950493] Creating ICE agent (ICE Full mode, controlling)
[WARN] [7647917661950493] ICE failed for component 1 in stream 1, but let's give it some time... (trickle pending, answer received, alert not set)
[WARN] [7647917661950493]     Missing valid SRTP session (packet arrived too early?), skipping...
[WARN] [7647917661950493]     Missing valid SRTP session (packet arrived too early?), skipping...

imaustink

user-media-selector {
  display: flex;
  flex-direction: column;
  padding: 10px;
  & > * {
    margin-bottom: 15px;
  }
  video {
    max-width: 100%;
  }

imaustink

<style>
  user-media-selector {
    box-sizing: border-box;
    border: 1px solid #000;
    width: 600px;
    margin-bottom: 30px;
  }
  textarea {
    width: 600px;
    height: 200px;

imaustink

<video srcObject:from="previewStream" autoplay muted></video>
<label>
  Video
  <select value:bind="selectedVideoDevice">
    {{#each(videoDevices)}}
      <option value="{{deviceId}}">{{label}}</option>
    {{/each}}
    <option value="">None</option>
  </select>
</label>

imaustink

export const ViewModel = DefineMap.extend({
  // Setup and teardown
  // This is called when the component is inserted into the DOM
  connectedCallback () {
    const deviceChangeHandler = () => {
      navigator.mediaDevices.enumerateDevices()
        .then(devices => (this.devices = devices))
        .catch(error => console.error(error))
    }
    deviceChangeHandler()

imaustink

export const ViewModel = DefineMap.extend({
  // Default resolution of media constraints
  height: {
    type: 'number',
    default: 1080
  },
  width: {
    type: 'number',
    default: 1920
  },

imaustink

import Component from 'can-component'
import DefineMap from 'can-define/map/'
import view from './user-media-selector.stache'
import './user-media-selector.less'

export const ViewModel = DefineMap.extend({

})

export default Component.extend({

imaustink

navigator.mediaDevices
  .addEventListener('devicechange', () => {
    console.log('Changed!')
  })

imaustink

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    console.log(stream)
  })