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. dp - 斜率优化笔记

    (原来的题解没得了,只好重写一份) 斜率优化一般是,\(dp\) 是枚举一个 \(i\),然后前面找一个 \(j\),式子中有些和 \(j\) 有关,有些和 \(i\) 有关,有些和俩都有关. 过程中 ...

  2. bzoj2654(loj20069)

    2654: tree Time Limit: 30 Sec  Memory Limit: 512 MB Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有ne ...

  3. java.util.List.subList使用注意

    List<E> subList(int fromIndex, int toIndex); 它返回原来list的从[fromIndex, toIndex)之间这一部分的视图,之所以说是视图, ...

  4. 初识 Nginx服务配置

    Nginx 是一个免费的,开源的,高性能的HTTP服务器和反向代理,以及IMAP / POP3代理服务器. Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名.很多高知名度的网站 ...

  5. Java 8教程(知识内容详细,快速学习Java 8)

    允许在接口中有默认方法实现 Lambda表达式 函数式接口 方法和构造函数引用 Lambda的范围 内置函数式接口 Predicates Functions Suppliers Consumers C ...

  6. Pytest(18)pytest接口自动化完整框架思维导图

    pytest接口自动化完整框架思维导图

  7. Web APP和原生 APP的不同

    我们现在手机中的APP,大部分都是混合APP,也就是既用到了原生APP的基础,又用到了Web APP的基础,混合的比例从0%到100%之间不等.更好的了解APP的类型,有助于我们学则合适的测试策略.今 ...

  8. switch表达式为字符串

    package EXERCISE; import java.util.*; public class HashCode { //switch判断字符串.switch表达式byte,short,int, ...

  9. 使用xshell连不上ubuntu14.04

    判断Ubuntu是否安装了ssh服务: 输入:#ps -e | grep ssh 如果服务已经启动,则可以看到"sshd",否则表示没有安装服务,或没有开机启动,如果不是下图情况, ...

  10. 【bzoj 2467】[中山市选2010]生成树(数论--排列组合)

    题目:有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些五角形只在五角形圈的中心的圈上有 ...