Html5 video标签访问网络摄像机实时监控

格式：doc
大小：734.00 KB
文档页数：4

下载文档原格式

/ 4

Html5在手机端调用相机的方法实现

Html5在⼿机端调⽤相机的⽅法实现input调⽤设备录像，相机等…HTML5官⽅⽂档解释：capture属性⽤于调⽤设备的摄像头或麦克风。

当accept=”audio/或video/”时capture只有两种值，⼀种是user，⽤于调⽤⾯向⼈脸的摄像头(例如⼿机前置摄像头)，⼀种是environment，⽤于调⽤环境摄像头(例如⼿机后置摄像头)。

当accept=”audio”时，只要有capture就调⽤设备麦克风，忽略user和environment值。

⾄于⽹上提到的camera和filesystem，官⽅没提。

官⽅⽂档：iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。

理想情况下应该按照如下开发webview：1.当accept=”image/”时，capture=”user”调⽤前置照相机，capture=”其他值”，调⽤后置照相机2. 当accept=”video/”时，capture=”user”调⽤前置录像机，capture=”其他值”，调⽤后置录像机3. 当accept=”image/,video/”，capture=”user”调⽤前置摄像头，capture=”其他值”，调⽤后置摄像头，默认照相，可切换录像4. 当accept=”audio/*”时，capture=”放空或者任意值”，调⽤录⾳机5. 当input没有capture时，根据accppt类型给出⽂件夹选项以及摄像头或者录⾳机选项6. input含有multiple时访问⽂件夹可勾选多⽂件，调⽤系统摄像头或者录⾳机都只是单⽂件7. ⽆multiple时都只能单⽂件判断设备类型var ua = erAgent.toLowerCase();if(ua.match(/android/i)) == "android") {alert("android");}if(ua.match(/iPhone/i)) == "iPhone") {alert("iPhone");}if(ua.match(/iPad/i)) == "iPad") {alert("iPad");}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="file" accept="image/*" capture="camera"><input type="file" accept="video/*" capture="camcorder"><input type="file" accept="audio/*" capture="microphone"></body></html><script>var file = document.querySelector('input');if (getIos()) {file.removeAttribute("capture"); //如果是ios设备就删除"capture"属性}function getIos() {var ua=erAgent.toLowerCase();if (ua.match(/iPhone\sOS/i) == "iphone os") {return true;} else {return false;}}</script>到此这篇关于Html5在⼿机端调⽤相机的⽅法实现的⽂章就介绍到这了,更多相关Html5⼿机端调⽤相机内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

Html5调用手机摄像头并实现人脸识别的实现

Html5调⽤⼿机摄像头并实现⼈脸识别的实现需求混合App开发，原⽣壳⼦+webApp，在web部分调⽤原⽣摄像头功能并且在⽹页指定区域显⽰摄像头内容，同时可以⼿动拍照并进⾏⼈脸识别，将识别结果显⽰在⽹页上。

技术栈vue、Html5、video标签、Android、IOS、百度AI分析1、使⽤navigator.mediaDevices.getUserMedia调⽤系统原⽣摄像头功能2、video标签显⽰摄像头内容3、canvas标签获取图⽚4、将图像上传服务器，通过百度AI识别图⽚5、web显⽰识别结果核⼼代码1、调⽤系统原⽣摄像头功能并使⽤video标签显⽰html:<videoid="webcam":style="videoStyle":width="videoWidth":height="videoHeight"looppreload></video>JavaScript：initVideo() {let that = this;this.video = document.getElementById("webcam");setTimeout(() => {if (navigator.mediaDevices.getUserMedia ||navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia) {//调⽤⽤户媒体设备, 访问摄像头this.getUserMedia({video: {width: {ideal: that.videoWidth,max: that.videoWidth},height: {ideal: that.videoHeight,max: that.videoHeight},facingMode: "user", //前置摄像头frameRate: {ideal: 30,min: 10}}},this.videoSuccess,this.videoError);} else {this.$toast.center("摄像头打开失败,请检查权限设置!");}}, 300);},getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核⼼浏览器navigator.webkitGetUserMedia(constraints, success, error);} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}},videoSuccess(stream) {this.mediaStreamTrack = stream;this.video.srcObject = stream;this.video.play();},videoError(error) {console.error(error);this.$toast.center("摄像头打开失败,请检查权限设置!");},2、canvas获取摄像头图⽚JavaScript：this.canvas = document.createElement("canvas");....let context = this.canvas.getContext("2d");context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); this.imgSrc = this.canvas.toDataURL("image/png");3、调⽤百度AI识别图⽚JavaScript：let that = this;let base64Data = this.canvas.toDataURL();let blob = this.dataURItoBlob(base64Data); //var file = new FormData();file.append("file", blob);file.append("key", that.uuid);util.ajax.post("XXXXXXXXXX", file, {headers: {"Content-Type": "multipart/form-data"}}).then(function(response) {if ((response.status = 200)) {.....识别成功，显⽰结果} else {......识别失败}}).catch(function(error) {console.error(error);});//base64转换为BlobdataURItoBlob(base64Data) {var byteString;if (base64Data.split(",")[0].indexOf("base64") >= 0)byteString = atob(base64Data.split(",")[1]);else byteString = unescape(base64Data.split(",")[1]);var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];var ia = new Uint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},⼿机适配1、由于Android6之后，Android的权限管理出现变化，Android原⽣的壳⼦，需要做如下处理：myWebView.setWebChromeClient(new WebChromeClient() {@TargetApi(Build.VERSION_CODES.LOLLIPOP)@Overridepublic void onPermissionRequest(final PermissionRequest request) {request.grant(request.getResources());}});2、IOS系统，Safari11之后可⽤3、OverconstrainedError错误，部分Android⼿机会报OverconstrainedError错误，原因是摄像头参数设置不合理，找不到指定设置。

html5如何调用厉善信息摄像头实现拍照代码实现

html5调用摄像头实现拍照技术时刻都在前进着。

我们的需求也是时刻在改变着。

最近在开发中遇到了用户进行账号注册时需要个人图像，网站提供自动拍照功能。

还有在登录了PC之后，手机端进行登录时只需要扫描一下PC上的二维码就可以登录。

这对一个网络来说难度是极大的。

技术的进步使我们遇到了html5。

下面这个简单粗暴的demo就是来完成这些功能的。

直接看代码：1<!DOCTYPE html>2<html>3<head>4<title>html5调用摄像头实现拍照</title>5<meta charset="utf-8">6<meta name="viewport" content="width=device-width,initial-scale=1">7</head>8<body>9<video id="video"autoplay=""style='width:640px;height:480px'></video>10<button id="paizhao">拍照</button>11<canvas id="canvas" width="640" height="480"></canvas>12<script type="text/javascript">13var video=document.getElementById("video");14var context=canvas.getContext("2d");15var errocb=function(){16 console.log("sth srong");17 }18if(navigator.getUserMedia){19navigator.getUserMedia({"video":true},function(stream){20 video.src=stream;21 video.play();22 },errocb);23 }else if(navigator.webkitGetUserMedia){24navigator.webkitGetUserMedia({"video":true},function(stream){25video.src=window.webkitURL.createObjectURL(stream);26 video.play();27 },errocb);28 }29document.getElementById("paizhao").addEventListener("click",function( ){30 context.drawImage(video,0,0,640,480);31 });32</script>33</body>34</html>。

HTML实现海康摄像头实时监控功能

HTML实现海康摄像头实时监控功能最近公司安排做CCFA的⼀些东西，有⼀项就是做⼀个⽹页播放摄像头的实时监控。

⽹上百度了很久，很多都是直接⽤vlc插件实现，但是⽬前主流浏览器都已经不⽀持vlc插件了，搞了很久也没成功。

⽹上⼤多是这么实现的：<object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540"pluginspage="" codebase="/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz"><param name='mrl' value=rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream' /><param name='volume' value='50' /><param name='autoplay' value='true' /><param name='loop' value='false' /><param name='fullscreen' value='false' /></object>偶然发现⼀篇⽂章，可以使⽤⼯具进⾏推流，然后在⽹页上使⽤<video>播放。

最后实现的效果图：最后经过测试，正常会有2秒左右的延迟，还在能接受范围内。

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。

你可以不依赖其它的插件来调用你需要的本机硬件设备。

在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。

并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？
主要特性：
对比度设置颜色设置亮度设置色调设置拍照按钮支持最新的chrome, firefox, opera等浏览器支持jQuery插件方式和javascript代码方式
浏览器支持-
使用Chrome打开在线演示后，请确认允许浏览器调用你的摄像头，如下：
基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能- photobooth.js
Javascript代码：
代码如下:
$('#webcam').photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '<img src="' + dataUrl + '" >');
});
以上代码将生成的图片数据传递到id=picture的这个标签中。

具体说明请参考相关API。

如何在组态王中添加网络视频实时监控

如何在组态王中添加网络视频实时监控内容导读：一、连接网络摄像头，把电脑IP与摄像头IP改为同一网段内。

测试用的摄像头IP为192.0.0.64，把电脑改为同一网段。

二、注册海康威视摄像头OCX 控件。

在文件上右键点击打开方式，找到regsvr32.exe点打开，再确定。

一、连接网络摄像头，把电脑IP与摄像头IP改为同一网段内。

测试用的摄像头IP为192.0.0.64，把电脑改为同一网段。

二、注册海康威视摄像头OCX控件。

在文件上右键点击打开方式，找到regsvr32.exe点打开，再确定。

三、在工程画面中点击插入通用控件四、选择NetVideoActiveX23控件。

五、添加控制按钮六、更改字符串为需要显示文字七、双击打开动画连接属性，点击按下时出现命令语言页面写入需要的命令点击确定退出。

八、点击开发画面中文件---全部存，保存画面。

九、点击开发画面中文件---切换到View，打开运行画面，点击登录，开始预览，即可显示摄像头监控画面。

十、常用命令语言如下1、登录Login("192.0.0.64",8000,"admin","12345");2、开始预览StartRealPlay(0,0,0);3、云台开始命令PTZCtrlStart(0,3);（0 -- 云台向上，1 -- 云台向下，2 -- 云台向左，3 -- 云台向右， 4 -- 焦距缩进，5 -- 焦距拉远，6 -- 焦点近，7 -- 焦点远，8 -- 光圈小，9 -- 光圈大，10 –自动, 11 –灯光， 12 –雨刷，13 - 云台左上, 14 - 云台右上, 15 - 云台左下, 16 - 云台右下）。

4、云台停止PTZCtrlStop(0,3);（0 -- 云台向上，1 -- 云台向下，2 -- 云台向左，3 -- 云台向右， 4 -- 焦距缩进，5 -- 焦距拉远，6 -- 焦点近，7 -- 焦点远，8 -- 光圈小，9 -- 光圈大，10 –自动, 11 –灯光， 12 –雨刷，13 - 云台左上, 14 - 云台右上, 15 - 云台左下, 16 - 云台右下）。

HTML5视频媒体标签video的使用方法及完整参数说明详解

HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解这篇⽂章主要介绍了HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解,需要的朋友可以参考下简介video 是 HTML5 的⼀个视频媒体标签，其作⽤是在⽹页中嵌⼊指定的视频，video 标签的代码结构及参数如下。

<videocontrolsautoplaylooppreload="auto"poster="img/popup-img.png"webkit-playsinline="true"playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"x-webkit-airplay="allow"x5-video-orientation="portraint"style="object-fit:fill"><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg; codecs=dirac, speex"><p>你的浏览器不⽀持 <code>video</code> 标签.</p></video>参数说明controls - 显⽰标准的 HTML5 视频/⾳频播放器控制条、控制按钮。

autoplay - 让⽂件⾃动播放。

loop - 让⽂件循环播放。

preload - 属性是⽤来缓存⼤体积⽂件的。

html5调用摄像头实例代码

html5调⽤摄像头实例代码最近在学习在做HTML5的项⽬，看了博客上html5调⽤摄像头拍照的⽂章，但各有瑕疵。

于是⾃⼰查阅书籍写了⼀个demo，主要分三步，废话不多说上代码。

HTML代码部分：<video id="video" autoplay style="width: 480px;height: 320px"></video><div><button id="capture">拍照</button></div><canvas id="canvas" width="480" height="320"></canvas>接下来是js代码部分：<script>var video = document.getElementById('video');var canvas = document.getElementById('canvas');var capture = document.getElementById('capture');var context = canvas.getContext('2d');function getUserMediaToPhoto(constraints,success,error) {if(navigator.mediaDevices.getUserMedia){//最新标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);}else if (navigator.webkitGetUserMedia) {//webkit核⼼浏览器navigator.webkitGetUserMedia(constraints,success,error);}else if(navigator.mozGetUserMedia){//firefox浏览器navigator.mozGetUserMedia(constraints,success,error);}else if(navigator.getUserMedia){//旧版APInavigator.getUserMedia(constraints,success,error);}}//成功回调函数function success(stream){//兼容webkit核⼼浏览器var CompatibleURL = window.URL || window.webkitURL;//将视频流转化为video的源video.src = CompatibleURL.createObjectURL(stream);video.play();//播放视频}function error(error) {console.log('访问⽤户媒体失败：',,error.message);}if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){getUserMediaToPhoto({video:{width:480,height:320}},success,error);}else{alert('你的浏览器不⽀持访问⽤户媒体设备');}capture.addEventListener('click',function() {// 将video画⾯描绘在canvas画布上context.drawImage(video,0,0,480,320);})</script>值得注意的是：使⽤的时候打开摄像头⼀定要上server上打开，否则没办法使⽤！因为打开的是属于⽹络的webcam，需要在server上打开。

Html5video用法详解

Html5video⽤法详解<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>test1</title></head><body><video src="qingdao1.mp4" width="442" height="242" controls="controls" id="video" poster="bg.jpg">您的浏览器暂不⽀持播放该视频，请升级⾄最新版浏览器。

</video><br><button onclick="play()">播放</button><button onclick="pause()">暂停</button><button onclick="kuaijin()">快进5秒</button><button onclick="kuaitui()">快退5秒</button><button onclick="mute(this)">静⾳</button><button onclick="jiasu()">加速播放</button><button onclick="jiansu()">减速播放</button><button onclick="normal()">正常播放</button><button onclick="upper()">增加⾳量</button><button onclick="lower()">降低⾳量</button><script>var video = document.getElementById("video");// video对象可以通过ontimeupdate时间来进⾏监听实时播放进度video.ontimeupdate = () => {console.log(video.currentTime);console.log(video.duration)}//播放function play() {video.play();}//暂停function pause() {video.pause();}//快进function kuaijin() {video.currentTime += 5;}//快退function kuaitui() {video.currentTime -= 5;}//静⾳function mute(obj) {if (video.muted) {obj.innerHTML = "静⾳";video.muted = false;} else {obj.innerHTML = "声⾳";video.muted = true;}}//加速(3)function jiasu() {video.playbackRate = 3;}//减速（3）function jiansu() {video.playbackRate = 1 / 3;}function normal() {video.playbackRate = 1;}//增加⾳量function upper() {var volume = video.volume * 10;if (volume >= 0 && volume < 10) {volume += 2;video.volume = volume / 10;} else if (volume === 10) {video.volume = 1;} else {return false;}}//降低⾳量function lower() {var volume = video.volume * 10;if (volume >= 2 && video.volume <= 10) { volume -= 2;video.volume = volume / 10;} else if (video.volume == 0) {video.volume = 0;} else {return false;}}</script></body></html>。

【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）

【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）html 代码。

video后边⼏个元素，可处理ios 系统的兼容性<video id="myVideo" controls="controls" poster='预览图' preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" ><source src="" type="video/mp4"></video>js 代码<script>//获取视频DOM元素var myVideo = document.getElementById("myVideo");myVideo.oncanplay = function(){console.log("准备就绪");};//监听播放开始myVideo.addEventListener('play',function(){console.log("开始播放");});//监听播放结束myVideo.addEventListener('pause',function(){console.log("播放暂停");});//监听播放结束myVideo.addEventListener('ended',function(){console.log("播放结束");});//使⽤事件监听⽅式捕捉事件，此事件可作为实时监测video 播放状态myVideo.addEventListener("timeupdate",function(){var timeDisplay;//⽤秒数来显⽰当前播放进度timeDisplay = Math.floor(myVideo.currentTime);console.log(Math.floor(myVideo.currentTime))//当视频播放到 4s的时候做处理if(timeDisplay == 4){//处理代码}},false);</script>事件介绍事件描述loadstart浏览器开始在⽹上寻找媒体数据progress浏览器正在获取媒体数据suspend浏览器暂停获取媒体数据，但是下载过程并滑正常结束abort浏览器在下载完全部媒体数据之前中⽌获取媒体数据，但是并不是由错误引起的error获取媒体数据过程中出错video元素或audio元素所在⽹络突然变为未初始化状态可能原因有两个:1.载⼊媒体过程中突然发⽣⼀个致命错误emptied2.在浏览器正在选择⽀持的播放格式时，⼜调⽤了load⽅法重新载⼊媒体stalled浏览器尝试获取媒体数据失败play即将开始播放，当执⾏了play⽅法时触发，或数据下载后元素被设为autoplay属性pause播放暂停，当执⾏了pause⽅式时触发loadedmetadata浏览器获取完毕媒体的时间长和字节数waiting播放过程由于得不到下⼀帧⽽暂停播放（例如下⼀帧尚未加载完毕），但很快就能够得到下⼀帧canplay浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲canplaythrough浏览器能够播放媒体，⽽且以当前播放速率能够将媒体播放完毕，不再需要进⾏缓冲seeking seeking属性变为true，浏览器正在请求数据seeked seeking属性变为false，浏览器停⽌请求数据timeupdate由于播放位置被改变，可能是播放过程中的⾃然改变，也可能是被⼈为的改变，或由于播放不能连续⽽发⽣的跳变ended播放结束后停⽌播放ratechange defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变druationchange播放时长被改变volumechange volume属性（⾳量）被改变或muted属性（静⾳状态）被改变。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网络摄像机+VLC+Nod e.js+HTML5
网络摄像机大部分都需要安装插件才能看，对于我们这些搞B/S的来说比较麻烦，最近项目中要用到摄像机实时监控，所以查询了些资料。

公司采用的大华的东西，将设备全部接入一个局域网中，设置好ip
摄像机1 (192.168.8.110)
摄像机2 (192.168.8.180)
硬盘录像机NVR (192.168.8.108)
百度了一下大华（包含NVR/摄像机）RTSP地址：
rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0
channel通道，NVR分通道。

subtype码流，0代表主码流（高清1080P），1代表辅码流(704*576(D1)).
直接访问摄像机：
摄像机1:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0
摄像机2:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0
访问NVR:
摄像机1:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype=0
摄像机2:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype=0
Html5 <video>并不支持rtsp,所以使用vlc进行转码,将rtsp转http流,这样<video>就可以直接播放。

使用vlc命令，在cmd命令下使用（注意下面是一行命令）
vlc -I dummy -vvv
"rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=1"
--sout="#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate= 44100}:http{mux=ogg,dst=:8080/cam}" --sout-all --sout-keep
多行0%-100%，基本上就是成功了
HTML5
<video src="http://127.0.0.1:8800/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
chrome打开页面就可以看到了
Node.js+HTML5
采用Node.js启动vlc，这里是多个摄像头
app.js
var child_process = require('child_process');
function openCam(rtsp,path){
var server=child_process.spawn("C:\\Program Files
(x86)\\VideoLAN\\VLC\\vlc.exe",["-I","dummy","-vvv",rtsp,"--sout=#transcode{vco dec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100}:http{mux=ogg,ds t="+path+"}","--sout-all","--sout-keep"]);
//dummy 可以修改为 --no-dummy-quiet，隐藏vlc命令窗口
server.on('exit', function (code, signal) {
console.log('service exit');
});
}
openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype =1',':8800/cam');//摄像机110
openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype =1',':8801/cam');//摄像机180
目前只能一个摄像机一个端口，端口复用暂时不知道怎么弄。

HTML
<video src="http://192.168.8.87:8800/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
<video src="http://192.168.8.87:8801/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
运行node app，打开html即可
经过测试PC chrome、安卓UC都能打开。

（注：专业文档是经验性极强的领域，无法思考和涵盖全面，素材和资料部分来自网络，供参考。

可复制、编制，期待你的好评与关注）。