标签目录：移动

以下是与标签 “移动” 相关联的文章

H5调用摄像头

| 前端 | | 暂无评论 | 5817 views

最近要做的一个项目需要调用移动摄像头，想必大家也都清楚，这个兼容性很不好，除了在pc上测试通过，移动端很少有可行的。最终这个功能弱化，而在端内进行。但是我还是把代码贴出来，方便学习。 HTML代码

1
2
3
4
5
6
7
8
<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px;background: #999">当前浏览器不支持video</video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.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) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}
 
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
function success(stream) {
    //兼容webkit核心浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    console.log(stream);
    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}
 
function error(error) {
    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
 
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
    alert('不支持访问用户媒体');
}
 
document.getElementById('capture').addEventListener('click', function () {
    context.drawImage(video, 0, 0, 480, 320);
})

……

移动营销设计

| 前端,闲谈 | | 暂无评论 | 1583 views

这算是一篇读书笔记，最近看了一本关于h5的移动营销设计的书。 其实这本书还是比较适合跟技术经常做交接但是并不写代码的人，大致是那些市场、运营、设计岗位的人吧。里面很少涉及到代码层面的东西，多半是关于营销的，比如如何设计一个页面能达到传宣效果，或者说应该采用怎样的设计风格等等。 这里就不多说太多，主要记录开发同学在开发过程中可能会用到的点，……

ios上页面禁止滚动

| 前端 | | 暂无评论 | 1526 views

ios上的页面只用一行没办法解决

1
document.documentElement.style.overflow='hidden';

所以需要额外添加其他的，把touchmove禁止掉

1
2
3
$("body").on("touchmove",function(event){
    event.preventDefault;
}, false);

当然了，可能需要另一个操作让页面重新开始滚动

1
2
3
4
$('.share-close').on('click',function () {
    $('.cover-index').fadeOut();
    $("body").off("touchmove");
})

&nbsp……

移动端web滚动对js对影响 HOT

| 前端 | | 13 条评论 | 3901 views

最近在手机上开发一个功能，页面上有几个分享按钮，当web页面滚动到按钮的位置时，按钮状态改为悬浮，那么问题来了：iOS上，web滚动过程中，不响应js绘图事件 这里引用了相关说明： 现象 根源 ### 关于web滚动响应js绘图事件的情况 ios7浏览器内核从根本上无法支持，包括safari浏览器 ios8浏览器内核支持，所以safair……