MediaStream & Elm

Learn
1

I got that piece of code:

'use strict';

var constraints = {
  video: true
};

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

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

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

navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

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?

Tks.

2 Likes
2

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.

3

Maybe you can use the approach here https://github.com/pdamoc/elm-ports-driver and integrate a media driver? I would probably be happy to see that come into fruition :slight_smile:

4

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 !