【小程序】媒体API能力集成指南——视频、原生视频、WebView、相机API

最新推荐文章于 2024-03-04 00:15:00 发布

IoT砖家涂拉拉

最新推荐文章于 2024-03-04 00:15:00 发布

阅读量1.6k

点赞数 49

文章标签：媒体小程序 API iot 前端 javascript 音视频

本文链接：https://blog.csdn.net/Ms_Smart/article/details/136324650

版权

视频 API

createVideoContext

ty.createVideoContext(string id)

创建 video 上下文 VideoContext 对象。

参数

string id

video 组件的 id

返回值

VideoContext

VideoContext 实例，可通过 ty.createVideoContext 获取。

VideoContext 通过 id 跟一个 video 组件绑定，操作对应的 video 组件。

方法

VideoContext.play

VideoContext.play()

播放视频

VideoContext.pause

VideoContext.pause()

暂停视频

VideoContext.stop

VideoContext.stop()

停止视频

VideoContext.playbackRate

VideoContext.playbackRate(number rate)

设置倍速播放

VideoContext.seek

VideoContext.seek(number position)

跳转到指定位置

参数

number position

跳转到的位置，单位 s

VideoContext.sendDanmu

VideoContext.sendDanmu(Object data)

发送弹幕

参数

Object data

弹幕内容

属性	类型	默认值	必填	说明
text	string		是	弹幕文字
color	string		否	弹幕颜色

👉 立即开发。

原生视频 API

createNativeVideoContext

ty.createNativeVideoContext(string id)

创建 native-video 上下文 NativeVideoContext 对象。

参数

string id

native-video 组件的 id

返回值

NativeVideoContext

VideoContext 实例，可通过 ty.createNativeVideoContext 获取。

NativeVideoContext 通过 id 跟一个 native-video 组件绑定，操作对应的 native-video 组件。

方法

NativeVideoContext.play

NativeVideoContext.play()

播放视频

NativeVideoContext.pause

NativeVideoContext.pause()

暂停视频

NativeVideoContext.stop

NativeVideoContext.stop()

停止视频

NativeVideoContext.playbackRate

NativeVideoContext.playbackRate(number rate)

设置倍速播放

NativeVideoContext.seek

NativeVideoContext.seek(number position)

跳转到指定位置

参数

number position

跳转到的位置，单位 s

👉 立即开发。

WebView API

WebviewContext

WebviewContext 实例，可通过 ty.createWebviewContext 获取。

基础库 >= 2.15.0

interface WebviewContext {
  postMessage(msg: { data: Record<string, any>}): void;
  reload(options?: {
    success?: () => void;
    fail?: () => void;
    complete?: () => void;
  }): void;
}

方法

postMessage

发送数据到 web-view 页面中，页面内通过 @tuya-miniapp/jssdk 进行接收。

reload

刷新当前 web-view 页面。

ty.createWebviewContext(mapId: string)

用于创建 WebviewContext 实例

示例

<web-view id="w1" src="https://your-domain.com"></web-view>

Page({
  onReady() {
     this.webviewContext = ty.createWebviewContext('w1');
  },
 
  sendMessage() {
    this.webviewContext.postMessage({
      data: {
        msg: 'send to html ' + Date.now(),
      },
    });
  }
})

WebviewContext.postMessage

发送消息到 web-view 标签的页面中。

type postMessage = (msg: { data: Record<string, any>}) => void;

const webviewContext = ty.createWebviewContext('id')
webviewContext.postMessage({
  data: {a: 1}
})

在 web-view 的页面中，需要通过 @tuya-miniapp/jssdk 进行消息的接收

import { miniProgram } from '@tuya-miniapp/jssdk'
 
miniProgram.onMessage(event => {
  const messageData = event.data
  // messageData => {a: 1}
})

WebviewContext.reload

刷新当前 web-view 页面

type reload = (options?: { 
  success?: () => void; 
  fail?: () => void; 
  complete?: () => void; 
}) => void;

const webviewContext = ty.createWebviewContext('id')
webviewContext.reload()

👉 立即开发。

相机API

createCameraContext

ty.createCameraContext()

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

创建 camera 上下文 CameraContext 对象。

返回值

CameraContext

CameraContext 实例，可通过 ty.createCameraContext 获取。

CameraContext 与页面内唯一的 camera 组件绑定，操作对应的 camera 组件。

方法

CameraContext.takePhoto

拍摄照片

CameraContext.setZoom

设置缩放级别

takePhoto

CameraContext.takePhoto(Object object)

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

功能描述

拍摄照片

参数

Object Object

属性	类型	默认值	必填	说明
quality	string	normal	否	成像质量，可选值有 `high`: 高质量，`normal`: 普通质量，`low`: 低质量
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
tempImagePath	string	照片文件的临时路径 (本地路径)

setZoom

CameraContext.setZoom(Object object)

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

功能描述

设置缩放级别

参数

Object Object

属性	类型	必填	说明
zoom	number	是	缩放级别，范围[1, maxZoom]。zoom 可取小数，精确到小数后一位。maxZoom 可在 bindinitdone 返回值中获取。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）