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. Java面向对象(三)—— 继承

    标签: java 继承 抽象类 this super abstract 概述 多个类中存在相同的属性和行为的时候,将这些内容抽取到单独一个类中,那么多个类无需在定义这些属性和行为,只要继承那个类即可. ...

  2. “batteries included” philosophy

    https://docs.djangoproject.com/en/2.2/ref/contrib/ contrib packages Django aims to follow Python's & ...

  3. 向同一个模型的外键反向关联名称产生了冲突 Django迁移

    向同一个模型的外键反向关联名称产生了冲突 一个模型中有两个外键指向同一张表时,创建迁移模型时报错:" HINT: Add or change a related_name argument ...

  4. Java——对象和类

    对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象行为和状态. Java中的对象 对象具有状态和行为.对象的状态就是属性,行为通过方法体现. 在开发中,方法操作对象内部状态的改变,对象的相 ...

  5. java 读取text内容

    public static String readToString(String fileName) { String encoding = "UTF-8"; File file ...

  6. markdown 编辑器使用教程---字体、颜色、表格换行、链接等

    资源池: 绿色版markdown编辑器:点击这里 提取码:ftf9 1.标题 #一级标题 ##二级标题 ###三级标题 ####四级标题 #####五级标题 ######六级标题 一级标题 二级标题 ...

  7. python中变量值改变地址也会跟着改变

    先上图. 图里,分别用三个整数进行了验证.可以发现当a和b值相同时,a与b地址也一致.改变a的值,a的地址也跟着改变了. 原因 python的宗旨之一,万物皆对象.(单身狗狂喜) 而对象又被分为可变对 ...

  8. 全网最硬核 JVM TLAB 分析(单篇版不包含额外加菜)

    今天,又是干货满满的一天.这是全网最硬核 JVM 系列的开篇,首先从 TLAB 开始.由于文章很长,每个人阅读习惯不同,所以特此拆成单篇版和多篇版 全网最硬核 JVM TLAB 分析(单篇版不包含额外 ...

  9. Left join查询为空

    这两个查询,上面查询返回空,下面能正常返回记录 两个表结构: left join 没有匹配上得到的b.dates,b.game_id和b.uid都是null值,在按b.dates=20200317 a ...

  10. jmespath(1)基础语法

    前言 JMESPath是JSON的查询语言.您可以从JSON文档中提取和转换元素 官方文档:https://jmespath.org/tutorial.html 基本表达式 JMESPath用的最多的 ...