Deprecation of Createobjecturl and Replace With the New Htmlmediaelement.Srcobject Doesn't Work for Webcam Stream

Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream

Your misunderstanding what HTMLMediaElement is.

It is the JavaScript Class/Prototype that represents a HTML <audio> or <video> tag whether it's in the HTML or not.

For a more class like explanation
<audio> on the page is an object of type HTMLAudioElement and that extends HTMLMediaElement and that in turn extends HTMLElement.

If you get the media element with querySelector() or getElementById() or create a media element in JavaScript with createElement("audio") or createElement("video")
you'll get an instance of HTMLMediaElement.

In your case this is an object of HTMLMediaElement class.

With JavaScript, as a rule of thumb if the object type name starts with HTML it is referring to an HTML Element / Tag.

All you need to do is change

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

if ('srcObject' in this) {
  this.srcObject = stream;
} else {
  this.src = window.URL.createObjectURL(stream);
}

This is taken from Mozilla Documentation

You can read more about how this change should be used, and where this answer takes knowledge from:
https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

How to replace URL.createObjectURL() for blob cases

Long story short:

You don't need to change that code since URL.createObjectURL() is not deprecated.

The specific use case of creating an object URL to attach to a media element (e.g. <video>) is, and for that you should use .srcObject instead.

Capture from webcamera html

MediaElement.srcObject should allow Blobs, MediaSources and MediaStreams to be played in the MediaElement without the need to bind these sources in the memory for the lifetime of the document like blobURIs do.

^{(Currently no browser support anything else than MediaStream though...)}

Indeed, when you do URL.createObjectURL(MediaStream), you are telling the browser that it should keep alive this Source until your revoke the blobURI, or until the document dies.

In the case of a LocalMediaStream served from a capturing device (camera or microphone), this also means that the browser has to keep the connection to this device open.

Firefox initiated the deprecation of this feature, one year or so ago, since srcObject can provide the same result in better ways, easier to handle for everyone, and hence Chrome seems to finally follow (not sure what's the specs status about this).

So to use it, simply do

MediaElement.srcObject = MediaStream;

Also note that the API you are using is itself deprecated (and not only in FF), and you shouldn't use it anymore. Indeed, the correct API to capture MediaStreams from user Media is the MediaDevices.getUserMedia one.

This API now returns a Promise which gets resolved to the MediaStream.

So a complete correction of your code would be

var video = document.getElementById('video');navigator.mediaDevices.getUserMedia({    video: true  })  .then(function(stream) {    video.srcObject = stream;  })  .catch(function(error) {    console.log('error', error);  });

<video id="video"></video>

Failed to execute 'createObjectURL' on 'URL':

I experienced the same error, when I passed raw data to createObjectURL:

window.URL.createObjectURL(data)

It has to be a Blob, File or MediaSource object, not data itself. This worked for me:

var binaryData = [];
binaryData.push(data);
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

Check also the MDN for more info: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

UPDATE

Back in the day we could also use createObjectURL() method with MediaStream objects. This use has been dropped by the specs and by browsers.

If you need to set a MediaStream as the source of an HTMLMediaElement just attach the MediaStream object directly to the srcObject property of the HTMLMediaElement e.g. <video> element.

const mediaStream = new MediaStream();
const video = document.getElementById('video-player');
video.srcObject = mediaStream;

However, if you need to work with MediaSource, Blob or File, you still have to create a blob:// URL with URL.createObjectURL() and assign it to HTMLMediaElement.src.

Read more details here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

Chrome update-Failed to execute 'createObjectURL' on 'URL'

It's just been removed from the current version of Chrome. I suddenly started getting this error after it updated. I have no idea why it never printed deprecation warnings before today.

Instead of setting the src property to URL.createObjectURL(stream) you're now supposed to set the srcObject property to the stream directly. It seems to be working in Chrome and Firefox.

Source: https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems

Is there a way to save and API stream as .csv without using FileSaver or createObjectURL()

I found the solution through a bit of digging and trial and error. I think this will come as a pleasant surprise that it can be this easy to download a file and that post createObjectURL()'s deprecation, it is still possible :

this.http.post(
  this.url + this.currentId,
  params,
  httpOptions
).subscribe((response: any) => {
  const link = document.createElement('a');
  link.setAttribute('style', 'display: none');
  link.href = 'data:attachment/csv,' + encodeURI(response); // <- it was as simple as this.
  const date = new Date();
  link.download = this.currentChoice + '-' + date.getDate() + '-' + (1 + date.getMonth()) + '-' + date.getFullYear() + '.csv';
  link.click();
  link.remove();
}, error => {
  console.log('File download failed : ', error);
});

my api's return already being the raw content of the file I do not need to call .text() or any other child.

hope this helps :)

Camera js Web App unable to get camera feed

Your code is completely outdated...

First, navigator.getUserMedia has been deprecated in favor of Promise based navigator.mediaDevices.getUserMedia.

So your first part should look like

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(function(stream) {
 ...

But that's not what is blocking your script from working.

If you did open your Browser's web-console, you probably would have found a message along the lines of

Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

That is because we cannot create blob-URLs from MediaStreams anymore. Instead, you should use the srcObject property of your HTMLMediaElement:

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(function(stream) {
  video.srcObject = stream;
  return video.play();
});

EditorJs warning "«blocks.stretchBlock()» is deprecated and will be removed in the next major release. Please use the «BlockAPI» instead."

Block API is passed via constructor props in block prop. You have to get it from there and set it to your block's property.

It should look something like this:

class CustomBlock {
  private data;
  private block;

  constructor({
    data,
    block
  }) {
    this.data = data;
    this.block = block;
  }

  toggleStretched() {
    this.block.stretched = !!this.data.stretched;
  }

  // Rest of the block implementation
}

It seems that the official docs aren't up-to-date, however I found this file with a description of Block API.

Deprecation of Createobjecturl and Replace With the New Htmlmediaelement.Srcobject Doesn't Work for Webcam Stream