HTML

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>recorded</title>

 </head>

 <body>

     <video id="gum" autoplay muted></video>

     <video id="recorded" autoplay loop></video>

     <div>

       <button id="opencamera">Open camera</button>

       <button id="record" disabled>Start Recording</button>

       <button id="play" disabled>Play</button>

       <button id="download" disabled>Download</button>

     </div>

 </body>

 </html>

JavaScript

'use strict';

var mediaRecorder;

var recordedBlobs;

var gumVideo = document.querySelector('video#gum');

var recordedVideo = document.querySelector('video#recorded');

var recordButton = document.querySelector('button#record');

var playButton = document.querySelector('button#play');

var downloadButton = document.querySelector('button#download');

recordButton.onclick = toggleRecording;

playButton.onclick = play;

downloadButton.onclick = download;

var isSecureOrigin = location.protocol === 'https:' ||

location.hostname === 'localhost';

if (!isSecureOrigin) {

  alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' +

    '\n\nChanging protocol to HTTPS');

  location.protocol = 'HTTPS';

}

var constraints = {

  audio: true,

  video: true

};

function handleSuccess(stream) {

  recordButton.disabled = false;

  console.log('getUserMedia() got stream: ', stream);

  window.stream = stream;

  if (window.URL) {

    gumVideo.src = window.URL.createObjectURL(stream);

  } else {

    gumVideo.src = stream;

  }

}

function handleError(error) {

  console.log('navigator.getUserMedia error: ', error);

}

document.querySelector('#opencamera').onclick = function(){

  this.disabled = true;

  navigator.mediaDevices.getUserMedia(constraints).

    then(handleSuccess).catch(handleError);

};

recordedVideo.addEventListener('error', function(ev) {

  console.error('MediaRecording.recordedMedia.error()');

  alert('Your browser can not play\n\n' + recordedVideo.src

    + '\n\n media clip. event: ' + JSON.stringify(ev));

}, true);

function handleDataAvailable(event) {

  if (event.data && event.data.size > 0) {

    recordedBlobs.push(event.data);

  }

}

function handleStop(event) {

  console.log('Recorder stopped: ', event);

}

function toggleRecording() {

  if (recordButton.textContent === 'Start Recording') {

    startRecording();

  } else {

    stopRecording();

    recordButton.textContent = 'Start Recording';

    playButton.disabled = false;

    downloadButton.disabled = false;

  }

}

function startRecording() {

  recordedBlobs = [];

  var options = {mimeType: 'video/webm;codecs=vp9'};

  if (!MediaRecorder.isTypeSupported(options.mimeType)) {

    console.log(options.mimeType + ' is not Supported');

    options = {mimeType: 'video/webm;codecs=vp8'};

    if (!MediaRecorder.isTypeSupported(options.mimeType)) {

      console.log(options.mimeType + ' is not Supported');

      options = {mimeType: 'video/webm'};

      if (!MediaRecorder.isTypeSupported(options.mimeType)) {

        console.log(options.mimeType + ' is not Supported');

        options = {mimeType: ''};

      }

    }

  }

  try {

    mediaRecorder = new MediaRecorder(window.stream, options);

  } catch (e) {

    console.error('Exception while creating MediaRecorder: ' + e);

    alert('Exception while creating MediaRecorder: '

      + e + '. mimeType: ' + options.mimeType);

    return;

  }

  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);

  recordButton.textContent = 'Stop Recording';

  playButton.disabled = true;

  downloadButton.disabled = true;

  mediaRecorder.onstop = handleStop;

  mediaRecorder.ondataavailable = handleDataAvailable;

  mediaRecorder.start(10); // collect 10ms of data

  console.log('MediaRecorder started', mediaRecorder);

}

function stopRecording() {

  mediaRecorder.stop();

  console.log('Recorded Blobs: ', recordedBlobs);

  recordedVideo.controls = true;

}

function play() {

  var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});

  recordedVideo.src = window.URL.createObjectURL(superBuffer);

}

function download() {

  var blob = new Blob(recordedBlobs, {type: 'video/webm'});

  var url = window.URL.createObjectURL(blob);

  var a = document.createElement('a');

  a.style.display = 'none';

  a.href = url;

  a.download = 'test.webm';

  document.body.appendChild(a);

  a.click();

  setTimeout(function() {

    document.body.removeChild(a);

    window.URL.revokeObjectURL(url);

  }, 100);

}

javascript原生调用摄像头的更多相关文章

  1. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  2. 用NativeScript创建JavaScript原生移动应用

    Telerik公开了用于创建安卓.iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限. NativeScript既不是一种新型的JavaScript ...

  3. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  4. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  5. [转] 有趣的JavaScript原生数组函数

    在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘obj ...

  6. Hybrid App开发模式中, IOS/Android 和 JavaScript相互调用方式

    IOS:Objective-C 和 JavaScript 的相互调用 iOS7以前,iOS SDK 并没有原生提供 js 调用 native 代码的 API.但是 UIWebView 的一个 dele ...

  7. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  8. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  9. 有趣的JavaScript原生数组函数

    本文由 伯乐在线 - yanhaijing 翻译.未经许可,禁止转载!英文出处:flippinawesome.欢迎加入翻译小组. 在JavaScript中,可以通过两种方式创建数组,Array构造函数 ...

随机推荐

  1. monkey测试工具与常用的linux命令

    Monkey测试工具 说明:monkey是一个安卓自带的命令行工具,可以模拟用户向应用发起一定的伪随机事件.主要用于对app进行稳定性测试与压力测试. 实现:首先需要安装一个ADB工具,安装完之后,需 ...

  2. Python字典类型、

    字典类型: # msg_dic = {#     'apple': 10,#     'tesla': 100000,#     'mac': 3000,#     'lenovo': 30000,# ...

  3. hdu图论题目分类

    =============================以下是最小生成树+并查集====================================== [HDU] 1213 How Many ...

  4. 九度oj 题目1171：C翻转

    题目描述: 首先输入一个5 * 5的数组,然后输入一行,这一行有四个数,前两个代表操作类型,后两个数x y代表需操作数据为以x y为左上角的那几个数据. 操作类型有四种:  1 2 表示:90度,顺时 ...

  5. Xcode中断点的使用

    注:本文由破船译自:albertopasca.本文由HoNooD在iosfeed站点上做了推荐. 这里先推荐两篇Xcode相关的文章: Xcode Code Snippets iOS调试 — 基本技巧 ...

  6. Welcome-to-Swift-05控制流（Control Flow ）

    Swift提供了所有c类语言的控制流结构.包括for和while循环来执行一个任务多次:if和switch语句来执行确定的条件下不同的分支的代码:break和continue关键字能将运行流程转到你代 ...

  7. iOS学习笔记46-Swift(六)扩展

    一.Swift扩展 扩展就是向一个已有的类.结构体或枚举类型添加新功能,这包括在没有权限获取原始源代码的情况下扩展类型的能力.扩展和 Objective-C中的分类(category)类似,但是它要比 ...

  8. 【HNOI2011/bzoj2337】XOR和路径

    第二道高斯消元练习题 题意 一张无向图,从点 $1$ 出发每次随机选一条出边走,走到 $n$ 停止,求经过的所有边权异或和的期望. $n\le 100$ 题解 注意一点,异或和的期望 $≠$ 期望的异 ...

  9. 【转】SpringMVC访问静态资源的三种方式

    如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg ...

  10. bzoj 3779 重组病毒 好题 LCT+dfn序+线段树分类讨论

    题目大意 1.将x到当前根路径上的所有点染成一种新的颜色: 2.将x到当前根路径上的所有点染成一种新的颜色,并且把这个点设为新的根: 3.查询以x为根的子树中所有点权值的平均值. 分析 原题codec ...