HTMLMediaElement.srcObject & URL.createObjectURL & HTMLMediaElement.src
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的更多相关文章
- js图片前端预览之 filereader 和 window.URL.createObjectURL
//preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...
- 图片上传预览 (URL.createObjectURL)
知识预备:1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定. ...
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...
- URL.createObjectURL() 与 URL.revokeObjectURL()
.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- 浏览器 本地预览图片 window.url.createobjecturl
第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...
- window.url.createobjecturl 兼容多种浏览器(IE,google,360,Safari,firefox)
<script type="text/javascript"> function setImagePreview() { var docObj = document.g ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- URL.createObjectURL()的使用方法
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
随机推荐
- 2 安装部署flume
本文对flume进行安装部署 flume是什么?传送门:https://www.cnblogs.com/zhqin/p/12230301.html 0.要安装部署在日志所在的服务器,或者把日志发送到日 ...
- 从tcp层面研究java socket 的使用
本文主要通过wireshark抓包来分析java socket程序的一些细节, 解决以前的一些疑问: 1.当一方的socket先关闭后,另一方尚未关闭的socket 还能做什么? 2.当基于socke ...
- 关于MinGW64的调试
学习的机房电脑能老了,都是xp系统.安装DEV C++后发现为MinGW64. 而我常用编译调试命令为: g++ -g *.cpp -o a gdb a 编译出的程序无法调试. 一直以为,根本就无法调 ...
- pikachu靶场XSS详解
一.反射型XSS 1.get型 源码前后区别 前 <form method="get"> <input class="xssr_in" typ ...
- (七)整合 Redis集群 ,实现消息队列场景
整合 Redis集群 ,实现消息队列场景 1.Redis集群简介 1.1 RedisCluster概念 2.SpringBoot整合Redis集群 2.1 核心依赖 2.2 核心配置 2.3 参数渲染 ...
- Git基本概念,流程,分支,标签及常用命令
Git基本概念,流程,分支,标签及常用命令 Git一张图 Git基本概念 仓库(Repository) 分支(Branch) Git工作流程 Git分支管理(branch) 列出分支 删除分支 分支合 ...
- 31.FTP简介
1.FTP 是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用20.21号端口,其中端口20(数据端口)用于进行数据传输,端口21(命令端口)用于接受客户端发出的相关FTP 命令与参 ...
- 小程序navigateTo和redirectTo跳转的区别与应用
最近在做小程序的跳转,发现navigateTo的跳转无法满足业务需求,所以特地记录下 业务需求 类似一个淘宝的在订单界面选择地址的功能,从A页面点击跳转到B页面的地址列表页面,B页面可以选择已有的地址 ...
- 十四自定义构建购物计算组件&表单组件
目录: 1.前言 2.组件介绍 3.js业务逻辑层 4.视图层 5.css属性设置 6.效果呈现 1.前言: 在第九篇文章购物车做好后,还忘记了一个至关重要的计算组件.在鸿蒙的组件中并没有提供这样一个 ...
- 简单判断long long 以内的回文数
bool Ispalindrome(long long x) { if(x<0||(x>0&&x%10==0))return false; long long back=0 ...