zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    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 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    linux基础
    模块三、企业实战案例
    模块二、shell脚本逻辑结构
    模块一:shell 脚本基础
    三剑客、shell脚本
    定时任务、用户管理、磁盘介绍
    python笔记03
    文件属性、正则表达式、文件权限
    Linux系统目录结构介绍
    Linux基础及入门介绍
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13033177.html
Copyright © 2011-2022 走看看