您的位置：首页 > Web前端 > HTML5

调取手机电话调取视频聊天 html5调用手机摄像头

2016-10-11 15:49 501 查看

调取手机电话
<button onclick="callphone()">10086</button>
<script>
function callphone(){
window.location.href = "tel:10086";
}
</script>

js 调取摄像头实现视频聊天

截止目前（2016-06-23）为止，js 调取摄像头实现视频聊天，部分浏览器还是不怎么支持的。

示例1 ：

代码附上：<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head><body>
<video id="video" width="640" height="480" autoplay></video>
</body>
<script type="text/javascript">
var promisifiedOldGUM = function(constraints) {// 第一个拿到getUserMedia，如果存在
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);// 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现'));
}// 否则，调用包在一个旧navigator.getusermedia承诺
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});}// 旧的浏览器可能无法实现mediadevices可言，所以我们设置一个空的对象第一
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}// 一些浏览器部分实现mediadevices。我们不能只指定一个对象
// 随着它将覆盖现有的性能getUserMedia。.
// 在这里，我们就要错过添加getUserMedia财产。. 
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}// Prefer camera resolution nearest to 1280x720.
var constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script></html></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li></ul>就拿以上这个代码来说，火狐下是可以正常调取摄像头的。
谷歌下其实也可以，一般 http://localhost:8080 或者 http://172.0.0.1:8080服务，这个是可以调起的，但是如果使用指定的 ip，
比如： http://172.168.5.100:8080 ，此时就会报个 PermissionDeniedError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).异常信息提示。
这个所表达的意思在这里：
http://stackoverflow.com/questions/32329484/google-permission-denied-on-current-location
http://stackoverflow.com/questions/34290337/serviceworker-registration-failed-domexception-only-secure-origins-are-allowed

示例2 ：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-doctype" style="color:#66066;box-sizing: border-box;"><!DOCTYPE html></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">html</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">head</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">meta</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">charset</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"utf-8"</span> /></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">meta</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">name</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"viewport"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">content</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"width=device-width, initial-scale=1"</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">title</span>></span>js 获取视频 demo<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">title</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">head</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">body</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">video</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"video"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"640"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"480"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">autoplay</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">video</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">button</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"snap"</span>></span>Snap Photo<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">button</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">canvas</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"canvas"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"640"</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"480"</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">canvas</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">body</span>></span>
<span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">script</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">type</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
<span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Put event listeners into place</span>
window.addEventListener(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"DOMContentLoaded"</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">()</span> {</span>
<span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Grab elements, create settings, etc.</span>
<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">var</span> canvas = document.getElementById(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"canvas"</span>),
context = canvas.getContext(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"2d"</span>), <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//getContext唯一合法值2d</span>
video = document.getElementById(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"video"</span>),
videoObj = {
<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"video"</span>: <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">true</span>,
<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"audio"</span>: <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">true</span>
},
errBack = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">(error)</span> {</span>
console.log(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"Video capture error: "</span>, error.code);
};<span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Put video listeners into place</span>
<span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//navigator.getUserMedia =  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;</span>
<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (navigator.getUserMedia) { <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Standard 如果用户允许打开摄像头</span>
<span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//stream为读取的视频流</span>
navigator.getUserMedia(videoObj, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">(stream)</span> {</span>
video.src = stream;
video.play();
}, errBack);
} <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (navigator.webkitGetUserMedia) { <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// WebKit-prefixed  根据不同的浏览器写法不同</span>
navigator.webkitGetUserMedia(videoObj, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">(stream)</span> {</span>
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (navigator.mozGetUserMedia) { <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Firefox-prefixed</span>
navigator.mozGetUserMedia(videoObj, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">(stream)</span> {</span>
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"snap"</span>).addEventListener(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"click"</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">function</span><span class="hljs-params" style="color:#66066;box-sizing: border-box;">()</span> {</span>
context.drawImage(video, <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>, <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>, <span class="hljs-number" style="color:#06666;box-sizing: border-box;">640</span>, <span class="hljs-number" style="color:#06666;box-sizing: border-box;">480</span>);
});
}, <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">false</span>);
</span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">script</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li></ul>

PC 浏览器支持：

Mobile 浏览器支持：

需要加载cordova.js
方法：document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
//相册
function fromCamera()
{
var source = pictureSource.PHOTOLIBRARY;
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA)
alert('加载照相机出错!' + message);
else
alert('加载相册出错!' + message);
}, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照
function EditImgPz()
{
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
alert(message);
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
});
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

调取手机电话 调取视频聊天 html5调用手机摄像头

示例1 ：

示例2 ：

调取手机电话调取视频聊天 html5调用手机摄像头