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


HTMLMediaElement.srcObject & URL.createObjectURL & HTMLMediaElement.src的更多相关文章

  1. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  2. 图片上传预览 (URL.createObjectURL)

    知识预备:1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定. ...

  3. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  4. URL.createObjectURL() 与 URL.revokeObjectURL()

    .URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL ...

  5. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  6. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. window.url.createobjecturl 兼容多种浏览器(IE,google,360,Safari,firefox)

    <script type="text/javascript"> function setImagePreview() { var docObj = document.g ...

  8. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  9. URL.createObjectURL()的使用方法

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

随机推荐

  1. 内存空间有限情况下的词频统计 Trie树 前缀树

    数据结构与算法专题--第十二题 Trie树 https://mp.weixin.qq.com/s/nndr2AcECuUatXrxd3MgCg

  2. 安装、登入centos7

    系统CentOS7.4 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Everything-1708.iso 虚 ...

  3. hasOwnProperty和 ... in ...的区别

    hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键).https://developer.mozilla.org/zh-CN/docs ...

  4. BigDecimal 用法详解

    BigDecimal简介 BigDecimal用法: BigDecimal的构造方法 BigDecimal常用方法描述 BigDecimal比较 BigDecimal总结 BigDecimal简介 J ...

  5. K8s (常用命令)

    查看集群信息: [root@kubernetes-master pods]# kubectl cluster-infoKubernetes master is running at http://lo ...

  6. hadoop知识点总结(二)hdfs分布式文件系统

    1, hdfs设计:减少硬件错误的危害,流式数据访问,大规模数据集,简单的一致性模型 2,特点: 1)移动计算的代价比移动数据的代价低 在异构的软硬件平台间的可移植性 2)局限性 不适合低延迟性数据访 ...

  7. eclipse下执行maprdeuc程序报错 java.lang.ClassNotFoundException

    最近遇到一个问题,不知怎么突然运行hadoop的map程序报错,困扰了我很久,现在来给大家分享分享.. 错误信息 2017-05-18 21:34:22,104 INFO [main] client. ...

  8. centos6.5 更新python2.6.6至2.7.6

    1.查看当前Python版本    # python -V      Python 2.6.6  2.下载Python2.7.6源码    # wget http://python.org/ftp/p ...

  9. vb.net和C#两兄弟谁的封装性更好?

    引言: 虽然没怎样接触过vb.net,但是大概对于vb6还是比较了解的.前者是从后者基础上发展而来的.后来接触了C#编程语言,起初没有太关心她和vb.net有啥不同的地方,话说都是面向对象的,而且都是 ...

  10. Inceptor [Code: 40000, SQL State: 42000] COMPILE FAILED: Internal error NullPointerException: [Error 40000] java.lang.NullPointerException

    下面代码报空指针 with `__all_dim__` as ( select * from ( select from_unixtime(unix_timestamp(`__bts__`) -1,' ...