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>



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


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








目录
相关文章
|
3月前
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
|
4月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
97 0
|
9月前
|
移动开发 前端开发 JavaScript
前端祖传三件套HTML的HTML5之新多媒体元素 audio/video
HTML5 是 Web 技术的重要更新,它引入了许多新特性,其中包括一些新的多媒体元素。这些新元素包括音频和视频,让 Web 开发者可以更方便地在网站上添加多媒体内容。
104 0
|
移动开发 HTML5 内存技术
零基础HTML入门教程(13)——插入视频video标签
我们前几小结学习了,插入图片插入音频等,我们这一小结学习一下,插入视频标签video并熟练使用。(1)直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 (2)controls 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 代码如下 效果如下 我们可以看到,页面上面会出现一个可以播放的视频,我们再一些网站上看到视频,都是用
零基础HTML入门教程(13)——插入视频video标签
|
Web App开发
HTML - Video 在使用非 localhost/127.0.0.1 地址访问时打开摄像头失败
HTML - Video 在使用非 localhost/127.0.0.1 地址访问时打开摄像头失败
162 0
|
移动开发 HTML5
《图解HTML练习》- video标签实现视频背景
《图解HTML练习》- video标签实现视频背景
137 0
《图解HTML练习》- video标签实现视频背景
|
移动开发 前端开发 程序员
好程序员web前端分享HTML5 video事件应用示例
  好程序员web前端分享HTML5 video事件应用示例,使用 onloadedmetadata 事件获取视频的时间长度,使用 ontimeupdate 事件获取视频当前播放的进度,示例代码如下:   1、获取视频时间长度   当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度。
1185 0
|
移动开发 HTML5
火狐放不了html5 video MP4格式
火狐放不了html5 video MP4格式 这里教大家解决火狐播放html5 video时 显示视频或mime类型不支持 这是因为火狐不支持mp4格式视频的播放,所以得把mp4格式的视频转为ogg格式的 一:下载 这里提供一个转换工具 [Total Video Audio Converter] 如果链接失效,请自行百度。
1603 0
|
移动开发 JavaScript HTML5
02.HTML5(Video + DOM)
大多数基础内容来自W3CSchool HTML5 元素同样拥有方法、属性和事件 其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。
929 0

相关产品

  • 云迁移中心