i want to replace URL.createObjectURL in the following code because it's deprecated. The problem is that i don't know with what and how to replace it.

Here's my code:

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    var mediaConfig =  { video: true };
    var errBack = function(e) {
        console.log('An error has occurred!', e)
    };
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }

    else if(navigator.getUserMedia) {
        navigator.getUserMedia(mediaConfig, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(mediaConfig, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if(navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(mediaConfig, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    document.getElementById('snap').addEventListener('click', function() {
        context.drawImage(video, 0, 0, width, height);
    });

i want to replace URL.createObjectURL in the following code because it's deprecated. The problem is that i don't know with what and how to replace it.

Here's my code:

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    var mediaConfig =  { video: true };
    var errBack = function(e) {
        console.log('An error has occurred!', e)
    };
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }

    else if(navigator.getUserMedia) {
        navigator.getUserMedia(mediaConfig, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(mediaConfig, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if(navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(mediaConfig, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    document.getElementById('snap').addEventListener('click', function() {
        context.drawImage(video, 0, 0, width, height);
    });

• javascript

• 1 fxsitepat./en-CA/docs/2017/… seems instructive (set the srcObject property to the stream) – Ry- ♦ Commented Apr 17, 2018 at 19:43

3 Answers 3

Check https://developer.mozilla/en-US/docs/Web/API/URL/createObjectURL:

Note: The use of a MediaStream object (not to be confused with MediaSource) as an input to this method is in the process of being deprecated. Discussions are ongoing about whether or not it should be removed outright. As such, you should try to avoid using this method with MediaStreams, and should use HTMLMediaElement.srcObject instead.

It tells you explicitly to use HTMLMediaElement.srcObject.

function createObjectURL() is deprecated

replace this:

video.src = window.URL.createObjectURL(stream);

to this:

video.srcObject = stream;

because of deprecation of some URL calls by most of chrome and Firefox instead of using window.URL.createObjectURL, you should use HTMLMediaElement.srcObject. check out this