HTMLMediaElement.srcObject & URL.createObjectURL & HTMLMediaElement.src

时间:2022-09-19 12:35:41

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&period;url&period;createobjecturl 兼容多种浏览器(IE&comma;google&comma;360&comma;Safari&comma;firefox)

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

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

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

  9. URL&period;createObjectURL&lpar;&rpar;的使用方法

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

随机推荐

  1. VC&plus;&plus; GetModuleFileName&lpar;&rpar;获取路径字符串中带波浪线~

    GetModuleFileName()获取的字符串中带波浪线,不是完整的路径显示. 原因:获取的是短路径,进行了缩写 解决:还原长路径 TCHAR }; GetLongPathName( strTem ...

  2. 【Apache】apache简单配置URL重写规则

    [概述]URL重写就是首先获得一个进入的URL请求然后把它重新写成网站可以处理的另一个URL的过程.举个例子来说,如果通过浏览器进来的URL是index.php?type=news&& ...

  3. Android 中 Handler 引起的内存泄露

    在Android常用编程中,Handler在进行异步操作并处理返回结果时经常被使用.其实这可能导致内存泄露,代码中哪里可能导致内存泄露,又是如何导致内存泄露的呢?那我们就慢慢分析一下.http://w ...

  4. HTML-Canvas03

    颜色合成 globalCompositeOperation 属性: //先绘制一个图形. ctx.fillStyle = "#00ff00"; ctx.fillRect(10,10 ...

  5. PCL 点云数据操作 OpenCV遍历数据

    1.对于点云类型实例cloud,对其第i个点进行赋值操作,使用cloud.point[i].x 和 cloud.point[i].y 和cloud.point[i].z 分别对其XYZ坐标赋值. cl ...

  6. ARM裸编程系列---UART

    S5PV210 UART说明 通用异步收发器缩写UART,这是UNIVERSAL ASYNCHRONOUS RECEIVER AND TRANSMITTER.它被用来传送串行数据.当发送数据,CPU将 ...

  7. python通过webservice接口实现配置下发

    项目上要开发一个小工具,通过webservice接口实现配置下发,考虑到python的第三方库对soap的良好支持,果断决定用python来完成这一使命. Python的支持webservice的第三 ...

  8. Delegate &amp&semi;&amp&semi;Lambda

    匿名函数及委托的使用: public delegate void NoReturnNoParaOutClass();//delegate can be defined in class or out ...

  9. mybatis xml &lt&semi; &gt&semi;

    [参考文章]:mybatis 中的 xml 配置文件中 ‘<’. ‘>’ 处理 1.使用转义字符将 ‘<’. ‘>’ 替换掉 描述 字符 转义字符小于号 < <大于 ...

  10. Bugku-CTF之过狗一句话(送给大家一个过狗一句话)

    Day25 过狗一句话   http://123.206.87.240:8010/ 送给大家一个过狗一句话<?php $poc="a#s#s#e#r#t"; $poc_1=e ...