智能小程序小部件(Widget)媒体组件属性说明和示例代码汇总

camera

基础库 2.2.0 开始支持, 低版本需做兼容处理。

系统相机。相关 API：ty.createCameraContext。这是基于异层渲染的原生组件, 请注意原生组件使用限制。

属性说明

Bug & Tip

1. tip：同一页面只能插入一个 camera 组件。
2. tip：Tuya MiniApp Tools 上不支持。
3. tip：相关原理请参考 基于异层渲染的原生组件。
4. tip：请注意 原生组件使用限制。

示例代码

TYML

<view class="page-body">
  <camera
    style="width: 100%; height:300px;"
    resolution="high"
    device-position="{{devicePosition}}"
    flash="{{flash}}"
    frame-size="large"
    bindstop="stop"
    binderror="error"
    bindinitdone="initdone"
  ></camera>
  <view class="btn-area">
    <button class="page-body-button" type="primary" bindtap="takePhoto">takePhoto API</button>
    <button class="page-body-button" type="primary" bindtap="setZoom">setZoom API</button>
    <button class="page-body-button" type="primary" bindtap="devicePositionCHnage">device-position 属性</button>
    <button class="page-body-button" type="primary" bindtap="flashChange">flash 属性</button>
    <view>预览照片:</view>
    <image ty:if="{{src}}" mode="widthFix" src="{{src}}"></image>
  </view>
</view>

JS

Page({
  data: {
    devicePosition: 'back',
    flash: 'off',
    src: '',
  },
  onReady() {
    this.ctx = ty.createCameraContext();
  },
  devicePositionCHnage() {
    this.setData({
      devicePosition: this.data.devicePosition === 'back' ? 'front' : 'back',
    });
  },
  flashChange() {
    this.setData({
      flash: this.data.flash === 'off' ? 'on' : 'off',
    });
  },
  stop(e) {
    console.log('demo stop', e);
  },
  error(e) {
    console.log('demo error', e);
  },
  initdone(e) {
    console.log('demo initdone', e);
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
        });
      },
      fail: (res) => {
        console.log('demo takePhoto fail', res);
      },
    });
  },
  setZoom() {
    this.ctx.setZoom({
      zoom: 5,
      success: (res) => {
        console.log('demo setZoom success', res);
      },
      fail: (res) => {
        console.log('demo setZoom fail', res);
      },
    });
  },
});

JSON

{
  "navigationBarTitleText": "camera"
}

TYSS

.page-body {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 20px 20px;
}
 
.btn-area {
  width: 100%;
  margin-top: 20px;
}
 
.page-body-button {
  width: 100%;
  margin-bottom: 20px;
}

image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

属性说明

mode 的合法值

示例代码

TYML

<view class="page-head">
	<view class="page-head-title">image</view>
	<view class="page-head-line"></view>
</view>
 
<view class="section l-r-padding" ty:for="{{array}}" ty:key="{{item.mode}}">
  <view class="page-section-title">{{item.text}}</view>
  <view class="section__ctn">
    <image class="image" src="{{src}}" mode="{{item.mode}}" bind:load="load" bind:error="error"></image>
  </view>
</view>

JS

Page({
  data: {
    array: [
      {
        mode: 'widthFix',
        text: 'widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变',
      },
      {
        mode: 'heightFix',
        text: 'heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变',
      },
      {
        mode: 'scaleToFill',
        text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应',
      },
      {
        mode: 'aspectFit',
        text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来',
      },
      {
        mode: 'aspectFill',
        text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来',
      },
      {
        mode: 'top',
        text: 'top：不缩放图片，只显示图片的顶部区域',
      },
      {
        mode: 'bottom',
        text: 'bottom：不缩放图片，只显示图片的底部区域',
      },
      {
        mode: 'center',
        text: 'center：不缩放图片，只显示图片的中间区域',
      },
      {
        mode: 'left',
        text: 'left：不缩放图片，只显示图片的左边区域',
      },
      {
        mode: 'right',
        text: 'right：不缩放图片，只显示图片的右边边区域',
      },
      {
        mode: 'top left',
        text: 'top left：不缩放图片，只显示图片的左上边区域',
      },
      {
        mode: 'top right',
        text: 'top right：不缩放图片，只显示图片的右上边区域',
      },
      {
        mode: 'bottom left',
        text: 'bottom left：不缩放图片，只显示图片的左下边区域',
      },
      {
        mode: 'bottom right',
        text: 'bottom right：不缩放图片，只显示图片的右下边区域',
      },
    ],
    src: '/images/godzilla.png',
  },
  load: function (event) {
    console.log('demo image load', event.detail, event);
  },
  error: function (event) {
    console.log('demo image error', event.detail, event);
  },
});

TYSS

.section {
  margin-top: 20px;
}
.section__title {
  margin-bottom: 10px;
}
.image {
  height: 200px;
  width: 200px;
  background-color: #ffffff;
}
.section__ctn {
  margin-top: 15px;
  margin-bottom: 20px;
}

常见问题（FAQ）

image 支持懒加载吗？

支持，可通过配置lazy-load实现图片懒加载

真机调用 image 组件，显示的图片被压缩？

建议把 mode 值设为 widthFix。

ipc-player

基础库 2.2.0 开始支持, 低版本需做兼容处理。

实时视频播放。

相关 API：ty.createIpcPlayerContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。

属性说明

错误码

Bug & Tip

1. tip：ipc-player 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
2. tip：Tuya MiniApp Tools 上暂不支持。
3. tip：相关原理请参考 基于异层渲染的原生组件。
4. tip：请注意 原生组件使用限制。

示例代码

TYML

<view class="page-body">
  <ipc-player
    ty:if="{{isShow}}"
    class="ipc"
    device-id="{{deviceId}}"
    autoplay="{{true}}"
    auto-pause-if-navigate="{{true}}"
    auto-pause-if-open-native="{{true}}"
    object-fit="{{objectFit}}"
    orientation="{{orientation}}"
    bindconnectChange="onConnectChange"
    binderror="onError"/>
 
  <view class="btn-box">
    <button bindtap="setMuted1" class="page-body-button" type="primary">开启静音</button>
    <button bindtap="setMuted2" class="page-body-button" type="primary">关闭静音</button>
    <button bindtap="setSoundMode1" class="page-body-button" type="primary">扬声器播放</button>
    <button bindtap="setSoundMode2" class="page-body-button" type="primary">听筒播放</button>
    <button bindtap="setClarity1" class="page-body-button" type="primary">标清播放</button>
    <button bindtap="setClarity2" class="page-body-button" type="primary">高清播放</button>
    <button bindtap="orientationChange" class="page-body-button" type="primary">orientation 切换 </button>
    <button bindtap="objectFitChange" class="page-body-button" type="primary">objectFit 切换 </button>
    <button bindtap="snapshot" class="page-body-button" type="primary">截取视频影像</button>
    <view>截取视频影像如下:<view>
    <image src="{{tempImagePath}}"></image>
  </view>
</view>

JS

Page({
  data: {
    deviceId: 'vdevo164759164131606',
    tempImagePath: '',
    isShow: true,
    orientation: 'vertical',
    objectFit: 'contain',
  },
  onReady() {
    this.ctx = ty.createIpcPlayerContext(this.data.deviceId);
  },
  onUnload() {
    this.ctx.disconnect({
      success: (res) => {
        console.log('demo disconnect success');
      },
    });
  },
  initIpc() {
    this.ctx = ty.createIpcPlayerContext(this.data.deviceId);
    this.ctx.connect({
      success: (res) => {
        this.ctx.startPreview({
          success: (res) => {
            console.log('demo 开启预览成功');
          },
          fail: (res) => {
            console.log('demo 开启预览失败');
          },
        });
      },
      fail: (res) => {
        console.log('demo 建立通道连接失败');
      },
    });
  },
  onConnectChange(e) {
    console.log('demo onConnectChange 事件触发', e);
  },
  onError(e) {
    console.log('demo onError 事件触发', e);
  },
  snapshot() {
    this.ctx.snapshot({
      success: (res) => {
        console.log('demo snapshot API 调用成功', res);
        this.setData({
          tempImagePath: res.tempImagePath,
        });
      },
      fail: (res) => {
        console.log('demo snapshot API 调用失败', res);
      },
    });
  },
  setMuted1() {
    this.ctx.setMuted({
      mute: true,
      success: (res) => {
        console.log('demo setMuted API 开启成功', res);
      },
      fail: (res) => {
        console.log('demo setMuted API 开启失败', res);
      },
    });
  },
  setMuted2() {
    this.ctx.setMuted({
      mute: false,
      success: (res) => {
        console.log('demo setMuted API 关闭成功', res);
      },
      fail: (res) => {
        console.log('demo setMuted API 关闭失败', res);
      },
    });
  },
  setSoundMode1() {
    this.ctx.setSoundMode({
      mode: 'speaker',
      success: (res) => {
        console.log('demo setSoundMode API 扬声器播放成功', res);
      },
      fail: (res) => {
        console.log('demo setSoundMode API 扬声器播放失败', res);
      },
    });
  },
  setSoundMode2() {
    this.ctx.setSoundMode({
      mode: 'ear',
      success: (res) => {
        console.log('demo setSoundMode API 听筒播放成功', res);
      },
      fail: (res) => {
        console.log('demo setSoundMode API 听筒播放失败', res);
      },
    });
  },
  setClarity1() {
    this.ctx.setClarity({
      clarity: 'normal',
      success: (res) => {
        console.log('demo setClarity API 标清成功', res);
      },
      fail: (res) => {
        console.log('demo setClarity API 标清失败', res);
      },
    });
  },
  setClarity2() {
    this.ctx.setClarity({
      clarity: 'hd',
      success: (res) => {
        console.log('demo setClarity API 高清成功', res);
      },
      fail: (res) => {
        console.log('demo setClarity API 高清失败', res);
      },
    });
  },
  orientationChange() {
    this.setData({
      orientation:
        this.data.orientation == 'vertical' ? 'horizontal' : 'vertical',
    });
  },
  objectFitChange() {
    this.setData({
      objectFit: this.data.objectFit == 'contain' ? 'fillCrop' : 'contain',
    });
  },
});

JSON

{
  "navigationBarTitleText": "ipc-player"
}

TYSS

.page-body {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 20px 20px;
}
 
.ipc {
  width: 100%;
}
 
.btn-box {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
 
.page-body-button {
  width: 160px;
  margin-bottom: 20px;
  display: inline-block;
  padding: 10px 20px;
}

video 

视频。相关 API: ty.createVideoContext

object-fit 的合法值

Bug & Tip

tip：video 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。

tip：video 支持三种视频格式：MP4、WebM、Ogg。

• MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器

常见问题（FAQ）

如何获取视频播放进度？

可通过bind:timeupdate 获取视频播放时长。

native-video

基础库 2.5.0 开始支持, 低版本需做兼容处理。

Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异，请以真机效果为主。

视频。相关 API: ty.createNativeVideoContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。文章来源地址https://www.toymoban.com/news/detail-796861.html

object-fit 的合法值

Bug & Tip

1. tip：native-video 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
2. tip：相关原理请参考 基于异层渲染的原生组件。
3. tip：请注意 原生组件使用限制。
4. tip：native-video 支持三种视频格式：MP4。

• MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器

立即开发

到了这里，关于智能小程序小部件(Widget)媒体组件属性说明和示例代码汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！