devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5调用摄像头录制视频_stoprecordcallback

作者：我家小花儿 | 2024-07-17 03:46:40

赞

踩

stoprecordcallback

HTML5调用摄像头录制视频
不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>video recoder</title>
  6.     <script src="fileSaver.js"></script>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.     <meta charset="utf-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11. </head>
  12. <style>
  13.     body{
  14.         background-color:#EFEDEF;
  15.     }
  16. </style>
  17. <body>
  18.     <article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;">
  19.  
  20.         <section class="experiment" style="width:320px; height:240px;border:1px solid green; margin:50px auto;">
  21.             <div id="videos-container" style="width:320px; height:240px;">
  22.             </div>
  23.         </section>
  24.         <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
  25.             <button id="openCamera">打开摄像头</button>
  26.             <button id="start-recording" disabled>开始录制</button>
  27.             <button id="save-recording" disabled>保存</button>
  28.             <!--<a href="javascript:void(0)" onclick="send()">发送</a>-->
  29.         </section>
  30.  </article>
  31. <script>
  32.             var mediaStream;
  33.             var recorderFile;
  34.             var stopRecordCallback;
  35.             var openBtn = document.getElementById("openCamera");
  36.             var startBtn = document.getElementById("start-recording");
  37.             var saveBtn = document.getElementById("save-recording");
  38.             openBtn.onclick = function() {
  39.                 this.disabled = true;
  40.                 startBtn.disabled=false;
  41.                 openCamera();
  42.             };
  43.  
  44.             startBtn.onclick = function() {
  45.                 this.disabled = true;
  46.                 startRecord();
  47.             };
  48.  
  49.             saveBtn.onclick = function() {
  50.                 saver();
  51.  
  52.                 // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
  53.             };
  54.  
  55.             var mediaRecorder;
  56.             var videosContainer = document.getElementById('videos-container');
  57.  
  58.             function openCamera(){
  59.                 var len = videosContainer.childNodes.length;
  60.                 for(var i=0;i<len;i++){
  61.                     videosContainer.removeChild(videosContainer.childNodes[i]);
  62.                 }
  63.  
  64.                 var video = document.createElement('video');
  65.  
  66.                 var videoWidth = 320;
  67.                 var videoHeight = 240;
  68.  
  69.                 video.controls = false;
  70.                 video.muted = true;
  71.                 video.width = videoWidth;
  72.                 video.height = videoHeight;
  73.                 MediaUtils.getUserMedia(true, false, function (err, stream) {
  74.                     if (err) {
  75.                         throw err;
  76.                     } else {
  77.                         // 通过 MediaRecorder 记录获取到的媒体流
  78.                         console.log();
  79.                         mediaRecorder = new MediaRecorder(stream);
  80.                         mediaStream = stream;
  81.                         var chunks = [], startTime = 0;
  82.                         video.srcObject = stream;
  83.                         video.play();
  84.  
  85.                         videosContainer.appendChild(video);
  86.                         mediaRecorder.ondataavailable = function(e) {
  87.                             mediaRecorder.blobs.push(e.data);
  88.                             chunks.push(e.data);
  89.                         };
  90.                         mediaRecorder.blobs = [];
  91.  
  92.                         mediaRecorder.onstop = function (e) {
  93.                             recorderFile = new Blob(chunks, { 'type' : mediaRecorder.mimeType });
  94.                             chunks = [];
  95.                             if (null != stopRecordCallback) {
  96.                                 stopRecordCallback();
  97.                             }
  98.                         };
  99.                 }
  100.             });
  101.             }
  102.  
  103.             // 停止录制
  104.             function stopRecord(callback) {
  105.                 stopRecordCallback = callback;
  106.                 // 终止录制器
  107.                 mediaRecorder.stop();
  108.                 // 关闭媒体流
  109.                 MediaUtils.closeStream(mediaStream);
  110.             }
  111.  
  112.             var MediaUtils = {
  113.                 /**
  114.                 * 获取用户媒体设备(处理兼容的问题)
  115.                 * @param videoEnable {boolean} - 是否启用摄像头
  116.                 * @param audioEnable {boolean} - 是否启用麦克风
  117.                 * @param callback {Function} - 处理回调
  118.                 */
  119.                 getUserMedia: function (videoEnable, audioEnable, callback) {
  120.                     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
  121.                     || navigator.msGetUserMedia || window.getUserMedia;
  122.                     var constraints = {video: videoEnable, audio: audioEnable};
  123.                     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  124.                         navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
  125.                         callback(false, stream);
  126.                     })['catch'](function(err) {
  127.                         callback(err);
  128.                     });
  129.                     } else if (navigator.getUserMedia) {
  130.                         navigator.getUserMedia(constraints, function (stream) {
  131.                         callback(false, stream);
  132.                     }, function (err) {
  133.                         callback(err);
  134.                     });
  135.                 } else {
  136.                     callback(new Error('Not support userMedia'));
  137.                 }
  138.             },
  139.  
  140.                 /**
  141.                 * 关闭媒体流
  142.                 * @param stream {MediaStream} - 需要关闭的流
  143.                 */
  144.                 closeStream: function (stream) {
  145.                     if (typeof stream.stop === 'function') {
  146.                         stream.stop();
  147.                     }
  148.                     else {
  149.                         let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];
  150.  
  151.                         for (let i = 0; i < trackList.length; i++) {
  152.                             let tracks = trackList[i];
  153.                             if (tracks && tracks.length > 0) {
  154.                                 for (let j = 0; j < tracks.length; j++) {
  155.                                     let track = tracks[j];
  156.                                     if (typeof track.stop === 'function') {
  157.                                         track.stop();
  158.                                     }
  159.                                 }
  160.                             }
  161.                         }
  162.                     }
  163.                 }
  164.             }; 
  165.  
  166. function startRecord() {
  167.     mediaRecorder.start();
  168.     setTimeout(function(){
  169.         // 结束
  170.         stopRecord(function() {
  171.             alert("录制成功!");
  172.             openBtn.disabled=false;
  173.             saveBtn.disabled=false;
  174.             //send();
  175.         });
  176.     }, 5000);
  177. }
  178.  
  179. function saver(){
  180.     var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
  181.         type: 'video/mp4'
  182.     });
  183.     saveAs(file);
  184. }
  185.  
  186. function send(){
  187.     var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
  188.         type: 'video/mp4'
  189.     });
  190.     var data = new FormData();
  191.     data.append("username", "test");
  192.     data.append("userfile", file);
  193.  
  194.     var req = new XMLHttpRequest();
  195.     req.open("POST", "com.spinsoft.bip.frame.utils.image.saveMp4.biz.ext");
  196.     req.send(data);
  197. }
  198.  
  199. </script>
  200.  
  201. </body>
  202.  
  203. </html>

fileSaver.js

  1. /* FileSaver.js
  2.  * A saveAs() FileSaver implementation.
  3.  * 1.3.2
  4.  * 2016-06-16 18:25:19
  5.  *
  6.  * By Eli Grey, http://eligrey.com
  7.  * License: MIT
  8.  *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
  9.  */
  10.  
  11. /*global self */
  12. /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
  13.  
  14. /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
  15.  
  16. var saveAs = saveAs || (function(view) {
  17.     "use strict";
  18.     // IE <10 is explicitly unsupported
  19.     if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
  20.         return;
  21.     }
  22.     var
  23.           doc = view.document
  24.           // only get URL when necessary in case Blob.js hasn't overridden it yet
  25.         , get_URL = function() {
  26.             return view.URL || view.webkitURL || view;
  27.         }
  28.         , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
  29.         , can_use_save_link = "download" in save_link
  30.         , click = function(node) {
  31.             var event = new MouseEvent("click");
  32.             node.dispatchEvent(event);
  33.         }
  34.         , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
  35.         , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
  36.         , throw_outside = function(ex) {
  37.             (view.setImmediate || view.setTimeout)(function() {
  38.                 throw ex;
  39.             }, 0);
  40.         }
  41.         , force_saveable_type = "application/octet-stream"
  42.         // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
  43.         , arbitrary_revoke_timeout = 1000 * 40 // in ms
  44.         , revoke = function(file) {
  45.             var revoker = function() {
  46.                 if (typeof file === "string") { // file is an object URL
  47.                     get_URL().revokeObjectURL(file);
  48.                 } else { // file is a File
  49.                     file.remove();
  50.                 }
  51.             };
  52.             setTimeout(revoker, arbitrary_revoke_timeout);
  53.         }
  54.         , dispatch = function(filesaver, event_types, event) {
  55.             event_types = [].concat(event_types);
  56.             var i = event_types.length;
  57.             while (i--) {
  58.                 var listener = filesaver["on" + event_types[i]];
  59.                 if (typeof listener === "function") {
  60.                     try {
  61.                         listener.call(filesaver, event || filesaver);
  62.                     } catch (ex) {
  63.                         throw_outside(ex);
  64.                     }
  65.                 }
  66.             }
  67.         }
  68.         , auto_bom = function(blob) {
  69.             // prepend BOM for UTF-8 XML and text/* types (including HTML)
  70.             // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
  71.             if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
  72.                 return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
  73.             }
  74.             return blob;
  75.         }
  76.         , FileSaver = function(blob, name, no_auto_bom) {
  77.             if (!no_auto_bom) {
  78.                 blob = auto_bom(blob);
  79.             }
  80.             // First try a.download, then web filesystem, then object URLs
  81.             var
  82.                   filesaver = this
  83.                 , type = blob.type
  84.                 , force = type === force_saveable_type
  85.                 , object_url
  86.                 , dispatch_all = function() {
  87.                     dispatch(filesaver, "writestart progress write writeend".split(" "));
  88.                 }
  89.                 // on any filesys errors revert to saving with object URLs
  90.                 , fs_error = function() {
  91.                     if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
  92.                         // Safari doesn't allow downloading of blob urls
  93.                         var reader = new FileReader();
  94.                         reader.onloadend = function() {
  95.                             var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
  96.                             var popup = view.open(url, '_blank');
  97.                             if(!popup) view.location.href = url;
  98.                             url=undefined; // release reference before dispatching
  99.                             filesaver.readyState = filesaver.DONE;
  100.                             dispatch_all();
  101.                         };
  102.                         reader.readAsDataURL(blob);
  103.                         filesaver.readyState = filesaver.INIT;
  104.                         return;
  105.                     }
  106.                     // don't create more object URLs than needed
  107.                     if (!object_url) {
  108.                         object_url = get_URL().createObjectURL(blob);
  109.                     }
  110.                     if (force) {
  111.                         view.location.href = object_url;
  112.                     } else {
  113.                         var opened = view.open(object_url, "_blank");
  114.                         if (!opened) {
  115.                             // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
  116.                             view.location.href = object_url;
  117.                         }
  118.                     }
  119.                     filesaver.readyState = filesaver.DONE;
  120.                     dispatch_all();
  121.                     revoke(object_url);
  122.                 }
  123.             ;
  124.             filesaver.readyState = filesaver.INIT;
  125.  
  126.             if (can_use_save_link) {
  127.                 object_url = get_URL().createObjectURL(blob);
  128.                 setTimeout(function() {
  129.                     save_link.href = object_url;
  130.                     save_link.download = name;
  131.                     click(save_link);
  132.                     dispatch_all();
  133.                     revoke(object_url);
  134.                     filesaver.readyState = filesaver.DONE;
  135.                 });
  136.                 return;
  137.             }
  138.  
  139.             fs_error();
  140.         }
  141.         , FS_proto = FileSaver.prototype
  142.         , saveAs = function(blob, name, no_auto_bom) {
  143.             return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
  144.         }
  145.     ;
  146.     // IE 10+ (native saveAs)
  147.     if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
  148.         return function(blob, name, no_auto_bom) {
  149.             name = name || blob.name || "download";
  150.  
  151.             if (!no_auto_bom) {
  152.                 blob = auto_bom(blob);
  153.             }
  154.             return navigator.msSaveOrOpenBlob(blob, name);
  155.         };
  156.     }
  157.  
  158.     FS_proto.abort = function(){};
  159.     FS_proto.readyState = FS_proto.INIT = 0;
  160.     FS_proto.WRITING = 1;
  161.     FS_proto.DONE = 2;
  162.  
  163.     FS_proto.error =
  164.     FS_proto.onwritestart =
  165.     FS_proto.onprogress =
  166.     FS_proto.onwrite =
  167.     FS_proto.onabort =
  168.     FS_proto.onerror =
  169.     FS_proto.onwriteend =
  170.         null;
  171.  
  172.     return saveAs;
  173. }(
  174.        typeof self !== "undefined" && self
  175.     || typeof window !== "undefined" && window
  176.     || this.content
  177. ));
  178. // `self` is undefined in Firefox for Android content script context
  179. // while `this` is nsIContentFrameMessageManager
  180. // with an attribute `content` that corresponds to the window
  181.  
  182. if (typeof module !== "undefined" && module.exports) {
  183.   module.exports.saveAs = saveAs;
  184. } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
  185.   define("FileSaver.js", function() {
  186.     return saveAs;
  187.   });
  188. }

转载于：https://blog.csdn.net/mrzhangdulin/article/details/84560146 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号