调用摄像头直接把画面显示在html页面上(请哪位大神帮帮忙)

调用摄像头直接把画面显示在html页面上(在不联网的情况下可以使用)
在网上找个一段h5的例子,但是运行的时候报错。不知道缺失什么文件

PICTURE

<script>
    var video = document.getElementById("video");
    var context = canvas.getContext("2d");
    var errocb = function () {
        console.log('sth wrong!');
    };
    if (navigator.getUserMedia) { // 标准的API
        navigator.getUserMedia({ "video": true }, function (stream) {
            video.src = stream;
            video.play();
        }, errocb);
    } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
        navigator.webkitGetUserMedia({ "video": true }, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errocb);
    }
    document.getElementById("picture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 640, 480);
    });

</script>
0

2个回答

0
showbo
支付宝加好友偷能量挖 回复opcec: 谷歌要发布网站通过http协议访问测试,高版本chrome需要用https,http也不允许访问客户端摄像头。更换firefox测试看看。记得采纳:)。。
一年多之前 回复
u011391385
opcec 也是报错,能不能帮我看看谢谢
一年多之前 回复

图片说明 报错跟我之前试的一样请问是什么原因

0
u011391385
opcec 回复showbo: 不行,你测试这种方式是可行的吗
一年多之前 回复
u011391385
opcec 回复showbo: 好的 我试试
一年多之前 回复
showbo
支付宝加好友偷能量挖 谷歌要发布网站通过http协议访问测试,高版本chrome需要用https,http也不允许访问客户端摄像头。更换firefox测试看看。记得采纳:)。。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
基于火狐和谷歌浏览器的html5调用摄像头
基于html5调用摄像头以及视频流的捕捉
3.在Android上显示摄像头,并在摄像头画面上画图
实现此功能分成
Python调用摄像头tkinter显示
编写小程序之前,我们需要安装几个包 程序代码如下: import cv2 import tkinter as tk from tkinter import filedialog#文件控件 from PIL import Image, ImageTk#图像控件 import threading#多线程 #---------------创建窗口 window = tk.Tk() window.tit...
HTML5 实现摄像头实时监控
实现摄像头实时监控有如下两种方法 1.HTML5+VLC实现网络串流进行实时监控,对带宽要求较高。 VLC下载链接:https://www.videolan.org/ 2.VLC安装 选择自己所需要的版本 选取VLC存放位置 3.安装完成 打开VLC ...
关于将摄像头预览显示到SurfaceView上
http://2d7eb962.wiz03.com/share/s/0JvHBy3NOASk2pFO7C39hO7i3MXyX335_Q_e2Fg1IB3HGI0Z 为知笔记分享链接
MFC 使用Opencv调用摄像头并显示画面,关闭摄像头显示一张本地图片
MFC 使用Opencv调用摄像头并显示画面,关闭摄像头显示一张本地图片,MFC 使用Opencv调用摄像头并显示画面,关闭摄像头显示一张本地图片,MFC 使用Opencv调用摄像头并显示画面,关闭摄像头显示一张本地图片
在页面中嵌入Applet使用opencv调用摄像头,并显示实时摄像头内容
目的:在页面中嵌入Applet使用opencv调用摄像头,并在applet中显示实时视频中的内容。 软件:opencv.2.4.9 jdk:jdk1.8_0_91 浏览器:IE、火狐 相关技术要点: 1、配置客户端的jdk权限,在jre的lib包目录下java.policy文件中配置需要使用到的权限,在文件最后加上以下内容: permission java.util.PropertyP
【IOS开发】实时显示摄像头内容
转自互联网:http://blog.csdn.net/dean19900504/article/details/8101522,有做修改。ViewController:#import &amp;lt;UIKit/UIKit.h&amp;gt; #import &amp;lt;AVFoundation/AVFoundation.h&amp;gt; @interface ViewController : UIViewControll...
Unity 将相机里看到的 显示到 Image上
http://blog.csdn.net/jk823394954/article/details/52431470 参考链接
unity 打开摄像头(图像倒立的变换) 和显示所有摄像头的名称
using UnityEngine; using System.Collections; public class DetectDeviceList : MonoBehaviour { // Use this for initialization void Start () { WebCamTexture webcamTexture = new WebCamTex...
摄像头图像上如何显示文字的程序
最近在做一个USB摄像头的程序,现在摄像头视频已经可以显示了。 采用对话框,然后在对话框上生成一个子窗口,在这个子窗口里显示视频。 我想着摄像头视频上叠加文字,请问如何叠加文字? 我在对话框里可以用CDC::TextOut显示文字,一开始想把子窗口放到Z轴的最下面,这样对话框上的文字就可以显示了,生成、设置子窗口位置的代码如下,利用设置位置的HWND_BOTTOM: [code=C/C++]m_hDisplay = CreateWindow(lpszClassName, TEXT("Capture Window"), WS_CHILD | WS_VISIBLE, 0, 0, m_nWidth, m_nHeight, this->GetSafeHwnd(), NULL, NULL, this); if (m_hDisplay != NULL) { ::SetWindowPos(m_hDisplay, HWND_BOTTOM, 0, 0, 0, 0, SWP_NOSIZE | SWP_NOMOVE); }[/code] 这样似乎不行,子窗口一直在对话框的上面,对话框显示的内容看不到。 可不可以在视频子窗口上用CDC::TextOut显示文字呢?那么怎么得到子窗口的CDC呢?会不会影响视频显示呢? 或者还有别的什么办法吗? 谢谢了!
pyqt5 使用label显示摄像头
  1. 安装opencv库 pip install opencv-python 2. 界面 3 .代码 界面设计: palette = QPalette() icon = QPixmap('c.jpg').scaled(800, 600) palette.setBrush(self.backgroundRole(), QBrus...
手机摄像头图像在电脑上显示-实现视频监控
如果想用手机摄像头实现无线监控
python 实现摄像头实时读取显示在tk上
Windows上利用python语言,实现摄像头实时显示。在GUI窗口显示。
python 实现摄像头实时读取 显示在窗口上
一个简单的程序,将摄像头实时图像利用python语言在窗口中显示。
各位大佬帮帮忙,
新人初来乍到,求 各位给点积分 下载东西啊 ,感谢感谢,万分感谢
海康威视安卓移动端摄像头调用demo
海康威视安卓端调用摄像头,显示控制画面等 海康威视安卓端调用摄像头,显示控制画面等
Html调用摄像头并拍照
<!DOCTYPE> <html> <title></title> <meta charset="utf-8" /> <head></head> <script type="text/javascript"> // Put event listeners into place window.addEventListener("DOMCon
unity如何实现3D物体叠加到摄像头画面上
实现效果如下: 功能: 1 打开摄像头,摄像头画面作为软件的背景 2 3d物体放在摄像头画面之上 具体实现如下: 具体代码实现如下: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; pub
android开发摄像头开发,在自己的SurfaceView里预览,并且解决摄像头预览变形问题--懒人笔记02
本来想只贴设置预览尺寸的部分了,后来想想就直接写个最简单的完整的demo吧 先在mainfeast中加入权限 然后是anctivity_main文件中的代码 &lt;FrameLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_widt
Unity3d,调用摄像头显示
先上代码 using UnityEngine; using System.Collections; public class WebCamManager : MonoBehaviour { // Use this for initialization void Start () { WebCamTexture webcamTexture = new WebCamTexture ()
基于OpenCV和Python的文件操作——捕获摄像头的帧,在窗口显示图像,在窗口显示摄像头帧和视频文件的读/写
0 写在前面 这篇博客主要参考资料为《OpenCV 3计算机视觉Python语言实现》(Learning OpenCV 3 Computer Vison with Python)。 因为之前用Faster R-CNN做过一个红绿灯检测的小实践,但是Github提供的demo的输入只是几幅测试图片,而且显示用的matplotlib库,每个窗口必须手动关闭后才能显示下一个窗口,交互体验不好。 为...
Camera开发系列之一 显示摄像头实时画面
最近一直在做安卓摄像头方面的功能,不得不说这里面的坑简直多的一批,要注意的地方简直不要太多,可以说是从入门到入土系列。总之,这玩意儿差点要我的老命。本系列文章使用的都是使用android.hardware.Camera包下面的api,并没有使用Camer2。主要是考虑到兼容性问题,另外一个很重要的原因是我还没看camera2的文档,啥都不会=_=。本片文章主要分为以下几个小点讲解:如何调用手机摄像...
Unity3D调用摄像头时的最高分辨率
怎样知道一款网络摄像头支持的最高分辨率呢?
Unity调用摄像头获取拍摄画面
using System.Collections; using UnityEngine; public class Test : MonoBehaviour { public WebCamTexture cameraTexture; public string cameraName = &quot;&quot;; private string isUser; private M...
Qt下使用OpenCV3打开摄像头并把图像显示到QLabel上
前言
实现摄像头内容的网页播放
【Python+OpenCV】Windows+Python3.6.0(Anaconda3)+OpenCV3.2.0安装配置海康摄像头+web调用(官方开发包)+手把手全方位扫盲Java后台实时输出数据到页面 Html5 video标签访问网络摄像机实时监控VLC网页插件添加对火狐浏览器的支持网页中插入VLC播放器播放rtsp视频流步骤JS视频播放最好免费的 HTML5 & JS 网站视频播放器收集海
unity3d 摄像机画面作为材质贴到模型上面去
首先创建一个RenderTexture,然后放到需要成像的摄像头的TargetTexture位置,如下图红线所示, 最后将此RenderTexture放在需要看到的模型上,我是创建了个 红线处摄像头的为上面添加了RenderTexsture的摄像头,下面的蓝色的板就是放了相同RenderTexture的Panel,这样就可以将红线的摄像头看到的东西呈现在下面的板
Android调用系统摄像头拍照并显示在ImageView上
Android调用系统摄像头拍照并显示在ImageView上
解决web页面嵌入多摄像头显示问题
问题描述 当电脑连接有多个摄像头,如果在一个web页面中要同时嵌入显示,该如何实现? 解决方案 javascript中有关于媒体的函数 navigator.mediaDevices.enumerateDevices(),使用该函数可以遍历所有连接的可用设备。根据设备名称自行选择,然后将获取的设备在前端页面显示。 下面通过代码具体解释: // 获取页面视频元素 // var video...
WebCamTexture摄像头画面颠倒的问题
之前我用的是横屏的,那么我打开摄像头,并将摄像头内容呈现在UI上,用下面的代码显示正常应项目的需要,开发的app变成竖屏显示,我依然使用上面截图中代码,发现摄像头的画面总是平躺着,并且还大量变形,我必须歪着头才能正常显示,起初我不断的修改下面这两行width和height值 int maxl = Screen.width; if (Screen.height > Screen.widt
双摄像头切换
使用C++编写的摄像头调用库thread.dll,供VB调用显示摄像头的画面,并可以对画面进行放大
调用手机的摄像头,并且返回照片显示在程序界面上.
在多媒体应用中,Image是最基础的功能模块,接下来我们将看看在Android中是如何获取和存储Image的。Android内嵌的Image获取和存储功能,可以让我们对于整个媒体框架有个比较全面的了解,同时为audio和video的学习打下基础。 一、Image的获取可以通过调Android自带的Camera应用来完成。该应用含有一个Intent-Filter。通过使用 Intent inte
大华摄像头OCX控件及HTML画面中使用例子
通过加载ocx控件,在浏览器中在线浏览大华视频。 (Browse the Dahua video online in the browser by loading the OCX control.)
在虚幻4中显示Kinect2.0摄像头的画面
默认设置好Kinect的虚幻4插件先要创建一个材质,为以后转化Kinect的图像用。 打开材质编译器后,创意一个TextureSampleParameter2D的节点 改名为Texture,这个名字一定要注意,在使用的时候会用到。 其他的设置无所谓。 然后天价两个常数,如图连接: 保存后关掉。之后,新建一个Actor的蓝图类。 然后打开,添加两个Component,一个是Cube
JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路。
问题:大华IPC枪型摄像头需要在WEB中显示实时监控视频,官方提供的SDK只有C#的桌面程序访问方式。解决思路:     RTSP协议访问方式将RTSP流转换成hls文件在H5的video播放器中进行播放实时视频。一、首先将摄像头连接好网络,利用大华视频IP搜索工具搜索内网中的摄像头设备。配置好相关的IP地址账号和密码二、进入摄像头的管理界面配置好通道,配置好RTSP的端口,默认是 554端口。 ...
使用Opencv调用摄像头并在MFC中进行视频显示
1.使用OpenCV打开摄像头: cv::VideoCapture g_camera(0); if (!g_camera.isOpened()) { g_camera = cv::VideoCapture(1); } if (!g_camera.isOpened()) { std::cerr << "Failed opening g_camera" << std::endl;
在MFC用OPENCV打开摄像头
用OPENCV调用摄像头,并将画面显示到MFC的图像控件上。
如何利用MFC及Opencv读入摄像头并显示画面
如何利用MFC及opencv读取单个摄像头并显示在指定窗口
QT+OpenCv 实时显示摄像头画面
一般来说,用opencv调用摄像头是很方便的,但是当需要将画面显示在我们的GUI界面中则需要将格式转换下,话不多说直接贴代码。 以下为打开摄像头部分的代码,原理是利用QT中的QTimer,本次程序设定时间为每20ms结束时启动该函数,需要在构造函数中将事件和定时器连接起来。 QTimer timer = new QTimer; connect(timer, SIGNAL(timeout())...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java大神班 大数据大神班