adding support for navigator.mediaDevices.getUserMedia to Dart

Question

The Dart SDK does not yet have support for certain methods in the MediaDevices class, including getUserMedia https://github.com/dart-lang/sdk/issues/35253. For browsers like Chrome and Firefox, this has been okay because an older callback-based implementation of getUserMedia is still found directly on the window.navigator object. But with Safari, which I think only implemented this functionality more recently, only the newer MediaDevices variant which returns a promise is supported.

I'm struggling to figure out how to add this method to Dart's existing MediaDevices class so that it can call the native javascript function, handle the resulting promise and convert the result that's passed on success back into a Dart MediaStream object.

There is an old post here which seemed promising, but I can't make that example run successfully now and suspect it's either irrelevant for Dart 2+, or irrelevant if the Dart class already exists (which is what the error I get indicates). Dart JS Interop 0.6.0 and JS Promises - resolving

The closest I've come to success is to go back to Dart's older JsObject interop approach. I can call the getUserMedia method and receive a promise object, but currently it's always failing with an error that states I must request audio or video. So there's something wrong with my parameter syntax or for how it's getting converted to JS:

JsObject jsObj = context['navigator']['mediaDevices'];
JsObject promise = jsObj.callMethod("getUserMedia", 
    [{'audio': true, 'video': false}]);
promise.callMethod('then', [
    (_){ 
        completer.complete(true); 
        print('success...'); 
    }, 
    (e){ 
        completer.complete(false); 
        print('fail...'); 
    }
]);

However, even if I get past this, I still don't see how to convert the result back into a Dart MediaStream object. Does anyone know of any information available for filling in missing SDK pieces like this?

score 0 · Answer 1 · answered Apr 11 '20 at 18:53

This is a work-around. Rather than getting Dart to interface correctly with navigator.mediaDevices.getUserMedia, I instead added a callback implementation of getUserMedia to the navigator object if it doesn't already exist (ie. Safari). It just in turn calls the promise-based version on the mediaDevices object.

<script>
    if (navigator.getUserMedia == undefined && navigator.mediaDevices.getUserMedia){
        navigator.getUserMedia = function(constraints, success, error){
            navigator.mediaDevices.getUserMedia({audio: true, video: false})
            .then((mediaStream) => {
                success(mediaStream);
            })
            .catch((err) => {
                error(err);
            });
        };
    }
</script>

adding support for navigator.mediaDevices.getUserMedia to Dart

1 Answers1