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. Go 语言编译过程

    走进Golang之编译器原理_大愚Talk-CSDN博客 https://blog.csdn.net/hel12he/article/details/103061921 go编译器 - 知乎 http ...

  2. java中List元素移除元素的那些坑

    https://blog.csdn.net/javageektech/article/details/96668890  List  的迭代器类 采用倒序移除 jdk1.8的写法 public sta ...

  3. tarjan 复习笔记 割点与桥

    定义分析 给定一个无向连通图\(G=(V,E)\) 对于\(x\in Y\),如果删去\(x\)及与\(x\)相连的边后,\(G\)分裂为两个或者两个以上的不连通子图,那么称\(x\)为\(G\)的割 ...

  4. LOJ10201

    题目描述 原题来自:Codeforces Round #400 B. Sherlock 有了一个新女友(这太不像他了!).情人节到了,他想送给女友一些珠宝当做礼物. 他买了n  件珠宝.第i  件的价 ...

  5. 在 WebAssembly 中实现回调的方式

    本文将介绍在 C++ 中实现 js 回调的几种方式. 在使用 wasm 的过程中, 避免不了要从 C++ 回调 js 的函数来实现异步交互. 官网文档 https://emscripten.org/d ...

  6. Linux内存运维操作及常用命令

    Linux内存运维操作及常用命令 1.问题诊断 1.1 什么是 Linux 服务器 Load Average? 1.2如何查看 Linux 服务器负载? 1.3服务器负载高怎么办? 1.4如何查看服务 ...

  7. Cookie (设置与读取、超时设置、指定路径、显示用户上次登录时间)

    Cooike简介 Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式.Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的 ...

  8. redis学习教程一《Redis的安装和配置》

    redis学习教程一<Redis的安装和配置> Redis的优点 以下是Redis的一些优点. 异常快 - Redis非常快,每秒可执行大约110000次的设置(SET)操作,每秒大约可执 ...

  9. 通达OA<=11.5版本SQL注入——日程安排

    注入点产生位置

  10. 将插件绑定在某个phase执行,推送镜像

    文章目录 将插件绑定在某个phase执行 推送镜像 将插件绑定在某个phase执行 需求:在执行mvn clean package 时,插件自动为构建Docker镜像. 实现:将插件的的goal绑定在 ...