产品百科 |H5 端如何实现镜像和显示手机横屏录制的视频

简介: 当您成功集成阿里云音视频通信 SDK,并想实现 H5 端镜像和显示横屏录制画面时,您可以通过本章节了解代码方法。

解决方案

说明 Web SDK 本身不提供镜像和横竖屏接口,需要您自己实现。

  • 实现镜像:通过给 video 标签设置 css,来实现镜像功能。
{
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}
  • 显示横屏录制画面:在 video 标签外增加一个 div 标签,并在 div 上设置 css,来显示远端横屏录制的画面。
{
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
}


「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

image.png

相关文章
|
18天前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
72 0
|
18天前
|
XML Java Android开发
Android App开发手机阅读之使用贝塞尔曲线实现给主播刷礼物特效(附源码和演示视频 简单易懂 可直接使用)
Android App开发手机阅读之使用贝塞尔曲线实现给主播刷礼物特效(附源码和演示视频 简单易懂 可直接使用)
49 0
|
18天前
|
XML Java Android开发
Android App开发手机阅读中贝塞尔曲线的原理讲解及实现波浪起伏动画实战(附源码和演示视频 可直接使用)
Android App开发手机阅读中贝塞尔曲线的原理讲解及实现波浪起伏动画实战(附源码和演示视频 可直接使用)
59 0
|
18天前
|
XML Java Android开发
Android App开发实战项目之仿手机QQ动感影集动画播放(附源码和演示视频 可直接使用)
Android App开发实战项目之仿手机QQ动感影集动画播放(附源码和演示视频 可直接使用)
37 0
|
7月前
|
移动开发 小程序 Android开发
|
9月前
|
移动开发
手机端H5加载中效果demo(整理)
手机端H5加载中效果demo(整理)
|
9月前
|
移动开发
H5手机端常见问题汇总
H5手机端常见问题汇总
|
9月前
|
移动开发
手机h5页面唤起打电话、发短信功能
手机h5页面唤起打电话、发短信功能
|
10月前
|
移动开发
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
176 0
|
11月前
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
311 0