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

调取手机电话
<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;"><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;">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;">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;">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;">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;">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-keyword" style="color:#0088;box-sizing: border-box;">var</span> promisifiedOldGUM = <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;">(constraints)</span> {</span>

            <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 第一个拿到getUserMedia,如果存在</span>
            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">var</span> getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);

            <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口</span>
            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (!getUserMedia) {
                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> Promise.reject(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color:#66066;box-sizing: border-box;">Error</span>(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">'getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现'</span>));
            }

            <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 否则,调用包在一个旧navigator.getusermedia承诺</span>
            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> Promise(<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;">(resolve, reject)</span> {</span>
                getUserMedia.call(navigator, constraints, resolve, reject);
            });

        }

        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 旧的浏览器可能无法实现mediadevices可言,所以我们设置一个空的对象第一</span>
        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (navigator.mediaDevices === <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">undefined</span>) {
            navigator.mediaDevices = {};
        }

        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 一些浏览器部分实现mediadevices。我们不能只指定一个对象</span>
        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 随着它将覆盖现有的性能getUserMedia。.</span>
        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// 在这里,我们就要错过添加getUserMedia财产。.     </span>
        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (navigator.mediaDevices.getUserMedia === <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">undefined</span>) {
            navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
        }

        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">// Prefer camera resolution nearest to 1280x720.</span>
        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">var</span> constraints = {
            audio: <span class="hljs-literal" style="color:#06666;box-sizing: border-box;">true</span>,
            video: {
                width: <span class="hljs-number" style="color:#06666;box-sizing: border-box;">1280</span>,
                height: <span class="hljs-number" style="color:#06666;box-sizing: border-box;">720</span>
            }
        };

        navigator.mediaDevices.getUserMedia(constraints)
            .then(<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>
                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">var</span> video = document.querySelector(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">'video'</span>);
                video.src = window.URL.createObjectURL(stream);
                video.onloadedmetadata = <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;">(e)</span> {</span>
                    video.play();
                };
            }).catch(<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;">(err)</span> {</span>
                console.log(err.name + <span class="hljs-string" style="color:#0880;box-sizing: border-box;">": "</span> + err.message);
            });
    </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><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
});
}





展开阅读全文

没有更多推荐了,返回首页