# 项目描述
前两天老板又让把上次做的 Web 页面显示摄像头搬到手机上，大概的产品原型在我脑子里成型了。实时摄像头视频只在横屏下可以显示最好是占满整个屏幕。然后左上角有一个按钮，点击显示左侧菜单，用来切换不同的视频源。还有一个登录退出按钮。加一个登录页面。总体上比较简单。
# 要解决的问题
- 怎么样实现只在横屏下显示？
- 侧边的菜单怎么做？
- 视频怎么样完整的自适应手机大小？
- 在手机上浏览器下，怎么实现全屏？
基本上解决上面几个问题，这个小项目就完成了。还好百度,gg 了一下都有对应的解决方案。下面的链接对应上面的问题：
- Mobile site - force landscape only / no auto-rotate (opens new window)
- 轻量级 JavaScript 可展开隐藏的侧边栏下拉菜单 (opens new window)
- canvas 移动端长宽自适应 (opens new window)
- h5 页面实现浏览器全屏显示 (opens new window)
当然对应的解决方案有很多，这里只选出了我采用的方式。
# 遇到的小坑
- 不能自动全屏的问题。原因是浏览器要求只有用户与页面交互了才能触发这个 API。所以要横屏之前先点一下页面，然后横屏过来就全屏了。
- 在苹果手机上采用问题 1 解决方案不能实现横屏后隐藏提示。由于这个是老板给我的反馈，我又没有苹果手机，所以这个问题至今没有解决。(己解决 解决 ios 下 safari 浏览器横屏判断和 display: 'none' 失效的问题)
# 效果截图
