HTML5——利用navigator+Video调用摄像头进行录像

简介:                      以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额。。。。        今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传。


             

       以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额。。。。


       今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传。刚开始最先想到的是Video标签,只要将它的src指定为当前摄像头录制到的视频就可以了。


          后来百度了一段,发现还要用上Navigator,具体代码如下:



             

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        window.addEventListener("DOMContentLoaded", function () {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function (error) {
		    console.log("Video capture error: ", error.code);
		};

            // 
            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed引擎
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
        }, false);
    
    </script>
</head>
     <body>
    <form id="form1" runat="server">
    <div>
        <video id="video" width="640" height="480" autoplay></video>
        <button id="snap">Snap Photo</button>
        <canvas id="canvas" width="640" height="480"></canvas>
    </div>
    </form>
</body>
</html>



         搞完之后同事大哥发布到服务器上然后拿手机测试,发现微信里面的浏览器是不支持摄像头调用的。。。额,,然后就我勒个去了。。。。。。。


         有用到的小伙伴可以拿到自己网站上玩儿玩儿。。。。








目录
相关文章
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
353 0
|
4天前
|
移动开发 JavaScript 前端开发
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
|
2月前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
263 1
|
2月前
|
移动开发 JavaScript 前端开发
html5 video
本文介绍了HTML5中的`<video>`标签的用法,包括如何设置视频的属性如自动播放、循环播放、加载模式,以及如何通过JavaScript控制视频播放和暂停,还提到了支持的视频格式和`<video>`标签中`<source>`元素的作用。
39 0
html5 video
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
|
移动开发 HTML5
HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)
HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)
|
移动开发 HTML5 内存技术
零基础HTML入门教程(13)——插入视频video标签
我们前几小结学习了,插入图片插入音频等,我们这一小结学习一下,插入视频标签video并熟练使用。(1)直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 (2)controls 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 代码如下 效果如下 我们可以看到,页面上面会出现一个可以播放的视频,我们再一些网站上看到视频,都是用
零基础HTML入门教程(13)——插入视频video标签
|
移动开发 前端开发 JavaScript
前端祖传三件套HTML的HTML5之新多媒体元素 audio/video
HTML5 是 Web 技术的重要更新,它引入了许多新特性,其中包括一些新的多媒体元素。这些新元素包括音频和视频,让 Web 开发者可以更方便地在网站上添加多媒体内容。
171 0
|
Web App开发
HTML - Video 在使用非 localhost/127.0.0.1 地址访问时打开摄像头失败
HTML - Video 在使用非 localhost/127.0.0.1 地址访问时打开摄像头失败
540 0