MediaStream & Elm

I got that piece of code:

'use strict';

var constraints = {
  video: true

var video = document.querySelector("video");

function handleSuccess(stream) {
  video.srcObject = stream; = video

function handleError(error) {
  console.error('getUserMedia error: ', error);


How Can I integrate this code in Elm?
How Can I / Should I pass the MediaStream object to the Elm app and integrate it in my Elm view? Is there a library that can deal with the mediastream Object through a port, Is there a MediaStream Type somewhere?
Should I just notify the state of the promise navigator.mediaDevices.getUserMedia() to the elm app (MediaStreamSuccess , MediaStreamError String) and treat the MediaStream completely apart?



Hi! glad to see other people interested in media stuff with elm :wink:

Unfortunately there is no way of handling a MediaStream in Elm, you have to go through ports. I’m not aware of any available code already doing this with ports. According to Evan’s roadmap extending the web platform is a priority but this will only happen after 0.19.

In case you happen to modify some DOM elements in JS through ports, the good practice I hear is to use Html.Keyed.

Maybe you can use the approach here and integrate a media driver? I would probably be happy to see that come into fruition :slight_smile:

How about this tutorial from Thoughtbot.
It looks very similar, in our case it isn’t a Google map but a MediaStream and it’s pretty straighforward !