xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

HTMLMediaElement.srcObject & URL.createObjectURL & HTMLMediaElement.src

HTMLMediaElement.srcObject & URL.createObjectURL & HTMLMediaElement.src

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

https://learning.xgqfrms.xyz/000projects/pwa-photo/index.html

video.srcObject = mediaStream;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

The object can be a MediaStream, a MediaSource, a Blob, or a File (which inherits from Blob).

    // Request the camera.
    // const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
    navigator.getMedia(
      {
        video: true
      },
      // Success Callback
      function (stream) {
        log(`stream`, typeof stream, stream);
        // const mediaStream = new MediaStream();
        // video.src = URL.createObjectURL(mediaStream);
        // Uncaught (in promise) DOMException: Failed to load because no supported source was found.
        // video.src = stream;
        // const mediaStream = new MediaStream(stream);
        // const mediaStream = new MediaStream();
        video.srcObject = stream;
        // Create an object URL for the video stream and set it as src of our HTLM video element.
        // video.src = URL.createObjectURL(stream);
        // Play the video element to start the stream.
        video.play();
        video.onplay = function () {
          showVideo();
        };
      },
      // Error Callback
      function (err) {
        displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
      }
    );

promise

Uncaught (in promise) DOMException: Failed to load because no supported source was found

Uncaught SyntaxError: await is only valid in async function

// async  await
const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});

async await

      // Success Callback
      async function (stream) {
        const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
        log(`stream`, typeof stream, stream);
        // const mediaStream = new MediaStream();
        // video.src = URL.createObjectURL(mediaStream);
        // Uncaught (in promise) DOMException: Failed to load because no supported source was found.
        // video.src = stream;
        // const mediaStream = new MediaStream(stream);
        // const mediaStream = new MediaStream();
        video.srcObject = mediaStream;
        // video.srcObject = stream;
        // Create an object URL for the video stream and set it as src of our HTLM video element.
        // video.src = URL.createObjectURL(stream);
        // Play the video element to start the stream.
        video.play();
        video.onplay = function () {
          showVideo();
        };
      },


©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


posted @ 2020-06-02 19:16  xgqfrms  阅读(780)  评论(5编辑  收藏  举报